Скриншот из видео в разное время
У меня есть 3 холста на линии, и на каждом я хочу разместить изображение (скриншот из видео, в разное время). Проблема в том, что все 3 скриншота сделаны одновременно (последний раз указан). Ниже - мой код 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);
}
}