Screenshot From Video At Different Time

I have 3 canvas on a line, and in each I want to put an image (screenshot form a video, at different time). The problem is that all 3 screenshots are at the same time (the last tim

Solution 1:

Here's an example letting the user click to select when a video frame is grabbed to the canvas.

Up to 4 frames can be grabbed from the video and displayed on a single canvas.

If you need a timed frame capture you can create a requestAnimationFrame loop and trigger the #snap.click code when your desired elapsed time(s) occur.

JavaScript:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var position=0;

var v = document.getElementById('v');
v.addEventListener( "loadedmetadata", function(e){
  // resize canvas
  cw=canvas.width=v.videoWidth;
  ch=canvas.height=v.videoHeight;
  // play the video
  v.play();
}, false );   


$('#snap').click(function(){

  var x,y;
  if(position==0){ x=0;y=0; }
  if(position==1){ x=cw/2;y=0; }
  if(position==2){ x=0;y=ch/2; }
  if(position==3){ x=cw/2;y=ch/2; }

  ctx.clearRect(v,x,y,cw/2,ch/2);
  ctx.drawImage(v,x,y,cw/2,ch/2);

  position++;
  if(position>3){ position=0; }

});

HTML -- you must set the video source to your own .mp4

<button id=snap>Capture</button>
<br>
<h4>Captured Snapshots -- 4 snapshots per canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
<h4>Video Element below</h4>
<video id=v controls loop>
    <source src=yourClip.mp4 type=video/mp4>
</video>