JSFiddle - React, Tailwind, and code Playground

by Nikolay Vasilchuk

HTML

<video id="video" controls autoplay muted></video> 
<canvas id="canvas"></canvas>
<button id="add">Add video</button>
<button id="remove">Remove video</button>

CSS

#video {
  visibility: hidden;
  position: absolute;
}

JavaScript

var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var cw, ch, added = false;
var stream = canvas.captureStream(30);
 
video.addEventListener('play', function(){
  cw = video.clientWidth;
  ch = video.clientHeight;
  canvas.width = cw;
  canvas.height = ch;
  console.warn(stream.getVideoTracks()[0]);
  draw();
});

function draw() {
  context.drawImage(video, 0, 0, cw, ch);
  added && requestAnimationFrame(draw);
}

add.onclick = function() {
	added = true;
  navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
    video.srcObject = stream;
  });
};
remove.onclick = function() {
	added = false;
  video.srcObject.getVideoTracks().forEach(function(track) {
  	track.stop();
  });
  video.srcObject = null;
};