JSFiddle - React, Tailwind, and code Playground

by idude

HTML

<!DOCTYPE html>
<html lang="en">
<head class="html5">
      <meta charset="utf-8">
      <title>ILUMY rocks</title>
</head>
<body>

<button>Take snapshot</button>   
<br />
<video autoplay  ></video>

<!-- img  id="hu" src="" -->
    
<canvas ></canvas>
    

</body>
</html>

JavaScript

navigator.webkitGetUserMedia({video: true}, function(stream) {

      var video = document.querySelector('video');
      video.src = window.webkitURL.createObjectURL(stream);

      var button = document.querySelector('button');
      button.addEventListener('click', snapshot, false);

      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');

      // create snapshot          
      function snapshot() {
          
             // set the canvas to the dimensions of the video
             canvas.width = video.clientWidth;
             canvas.height = video.clientHeight;
                 
             ctx.drawImage(video, 0, 0);

             // don't think this stuff is necessary and it's throwing an error
             //document.getElementById("huhu").src = canvas.toDataURL('image/webp');

      }
  });