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>

<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 canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');

    // create snapschot          
      function snapshot() {

              ctx.drawImage(video, 0, 0);

             document.getElementById("huhu").src = canvas.toDataURL('image/webp');

      }

      video.addEventListener('click', snapshot, false);
  });