JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" width="320" height="240" autoplay="autoplay" ></video>
<canvas id="canvas" width="320" height="240" ></canvas>
<div id="info" style="border: 1px solid #000"> INFO </div>
|<canvas class="target" id="m0"  width="320" height="240"></canvas>

CSS

.target {border: 3px solid #000; margin: 10px;}

JavaScript

window.onload = function () {
var video = document.querySelector('video');

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var cms = document.getElementById('m0');
var target = cms.getContext('2d');

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL;
navigator.getUserMedia({video: true}, function (stream) { 


video.src = URL.createObjectURL(stream);
video.play();

    setInterval(function() {
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
	var data = context.getImageData(0, 0, 320, 240).data;
	document.getElementById('info').innerHTML = data;
	 target.putImageData(data, 0, 0, 0, 0, 320, 240);  
	}, 1000);
}, function () {
alert('video stream error');
});

} //window.onload