Hello everyone!!

Today, we will learn how to take screenshots in HTML 5. HTML 5 provide a method called ctx.drawImage(video, 0, 0), by the help of this  method we can take screenshots of the video and save it. In this example, we use the getUserMedia()for the input of the video. It is also an API method which is provided by the media class. In this we are using ctx.drawImage() method to draw the image of the video and provide the src path of the image. It's just as easy to create a photo booth application with real-time video:

codes:-

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

<script>
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;

  function snapshot() {
    if (localMediaStream) {
      ctx.drawImage(video, 0, 0);

      document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
  }
  video.addEventListener('click', snapshot, false);
  navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
  }, errorCallback);
</script>