JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<div>
    <button id="start" type="button">Start</button>
    <button id="save" type="button">Save</button>
</div>
<canvas></canvas>
<video autoplay></video>

CSS

video,
canvas{
   width: 45%;
   background: #fed;
    border: solid 1px #dad;
}

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
 
var constraints = {audio: false, video: true};
var video = document.querySelector("video");
var canvas = document.querySelector("canvas");
 
function successCallback(stream) {
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
  video.play();
}
 
function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

$("#start").on("click", function() {
    navigator.getUserMedia(constraints, successCallback, errorCallback);
});

$("#save").on("click", function() {
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);

});