Screenshot from video at different time

Question

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 time specified). Bellow is my JavaScript code.

function getVideoScreenShot(videoFile, currentIncidentTime, idx) {
    var images = [];

    for(var canvas=1; canvas<=3; canvas++) {
        var canvasId = "#canvas"+ idx + canvas;

        var milisec = parseInt(currentIncidentTime)%1000;
        var secFromMilisec = milisec/1000;

        var sec = (parseInt(currentIncidentTime)/1000)%60;
        sec = "" + sec + "";
        sec = parseInt(sec.substring(0,2));

        var min = ((parseInt(currentIncidentTime)/1000)/60)%60;
        min = "" + min + "";
        min = parseInt(min.substring(0,2));
        var secFromMin = min * 60;

        var seconds = secFromMilisec+sec+secFromMin;

        if (canvas == 1) {
            seconds = seconds - 1;
        } else if (canvas == 3) {
            seconds = seconds + 1;
        } else {
            seconds = seconds;
        }

        images.push({canvas: canvasId, time: seconds});
    }

    console.log(images);
    var video = document.createElement('video');
    video.addEventListener('loadedmetadata', function ()
    {
        var ratio = video.videoWidth / video.videoHeight;
        var w = video.videoWidth;
        var h = w / ratio;

        for (var i = 0; i < images.length; i++) {
            images[i].canvas = document.querySelector(images[i].canvas);

            images[i].canvas.width = w;
            images[i].canvas.height = h;
        }
        draw(video, images);
    });

    video.src = videoFile;
}

function drawFrame(video, time, canvas) {
    var context = canvas.getContext("2d");
    video.addEventListener("seeked", function (e) {
        e.target.removeEventListener(e.type, arguments.callee);
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
    });
    console.log(time, "time to draw frame");

    video.currentTime = time;
}

function draw(video, images) {
    for (var i = 0; i < images.length; i++) {
        drawFrame(video, images[i].time, images[i].canvas);
    }
}

Answer 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>