Снимок экрана из видео в разное время

Question

У меня 3 холста на линии, и в каждом я хочу поместить изображение (снимок экрана с видео в разное время). Проблема в том, что все 3 снимка экрана одновременно (последний раз задан). Bellow - это мой код JavaScript.

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

Вот пример, позволяющий пользователю выбрать, когда видеокассету захватывают на холст.

До 4 кадров можно захватить из видео и отобразить на одном холсте.

Если вам нужен захват с временным кадром, вы можете создать цикл requestAnimationFrame и активировать код # snap.click, когда произойдет ваше искомое прошедшее время (ы).

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 - вы должны установить источник видео на свой .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>