JSFiddle - React, Tailwind, and code Playground

by Luis Fraguada

HTML

<html>
	<head>
		<title>Update Canvas with MJPEG</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>

  	<canvas id="canvas" width="512" height="512"></canvas>

		<img src="http://192.168.0.15:8080/stream/video.mjpeg" id="imageElement">

		<script>

			var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
			var img = document.getElementById('imageElement');

			img.onload = function(){

				console.log('...img onload...');

				ctx.clearRect( 0,0 , canvas.width, canvas.height);

				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

			};

		</script>

  </body>
  </html>