Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Taking Screenshots

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 305
    Comment on it

    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:


    <video autoplay></video>
    <img src="">
    <canvas style="display:none;"></canvas>
      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);


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: