0

I’m creating a function to take a screenshot of a video from YouTube using HTML5-JavaScript-Canvas.

Created a simple code and function for the take screenshot button, but it does not work.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset=utf-8>
  <title>Video screenshot</title>
</head>

<body>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw" frameborder="0" allow="accelerometer; autoplay; 
    encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>

  <canvas></canvas>

  <footer>
    <button id="snap" onclick="snap()">Take screenshot</button>
  </footer>

  <script>
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');
    var w, h, ratio;

    video.addEventListener('loadedmetadata', function() {
      w = video.videoWidth - 100;
      h = parseInt(w / ratio, 10);
      canvas.width = w;
      canvas.height = h;
    }, false);


    function snap() {
      context.fillRect(0, 0, w, h);
      context.drawImage(video, 0, 0, w, h);
    }

  </script>

</body>
</html>
Sandeep Ranjan
  • 824
  • 15
  • 33
Ant
  • 1
  • 2
  • https://stackoverflow.com/questions/13760805/how-to-take-a-snapshot-of-html5-javascript-based-video-player and this https://www.html5rocks.com/en/tutorials/getusermedia/intro/ will be a good place to start with. – A. Meshu Aug 06 '19 at 20:38
  • I read it. But to capture the pixels, need to load the video into a – Ant Aug 07 '19 at 17:45

0 Answers0