javascript - 队列获取多个视频帧

Question

我正在使用 jsPDF 创建 PDF 输出工具，但需要添加多个页面，每个页面都包含视频帧的 Canvas 图像。 我坚持实现这一目标的最佳方法的逻辑，因为我无法协调如何对操作进行排队并等待事件以实现最佳结果。 首先，我将视频加载到视频标签中，并且只需使用以下命令即可获取或设置其搜索点:

video.currentTime

我还有一系列视频秒数，如下所示:

var vidSecs = [1,9,13,25,63];

我需要做的是循环遍历这个数组，在视频中查找数组中定义的秒数，在这些秒数创建 Canvas ，然后将每个 Canvas 添加到 PDF 页面。 我有一个从视频帧创建 Canvas 的函数，如下所示:

function capture_frame(video_ctrl, width, height){
    if(width == null){
        width = video_ctrl.videoWidth;
    }
    if(height == null){
        height = video_ctrl.videoHeight;
    }
    canvas = document.createElement('canvas');
    canvas.width  = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video_ctrl, 0, 0, width, height);
    return canvas;
}

此函数与以下函数结合使用可以很好地向 PDF 添加图像:

function addPdfImage(pdfObj, videoObj){    
    pdfObj.addPage();
    pdfObj.text("Image at time point X:", 10, 20);
    var vidImage = capture_frame(videoObj, null, null);
    var dataURLWidth = 0;
    var dataURLHeight = 0;
    if(videoObj.videoWidth > pdfObj.internal.pageSize.width){
        dataURLWidth = pdfObj.internal.pageSize.width;
        dataURLHeight = (pdfObj.internal.pageSize.width/videoObj.videoWidth) * videoObj.videoHeight;
    }else{
        dataURLWidth = videoObj.videoWidth;
        dataURLHeight = videoObj.videoHeight;
    }
    pdfObj.addImage(vidImage.toDataURL('image/jpg'), 'JPEG', 10, 50, dataURLWidth, dataURLHeight);
}

我的逻辑困惑是如何在循环 vidSecs 数组时最好地调用这些代码，因为问题是设置 video.currentTime 需要循环等待在运行捕获帧并将其添加到 PDF 的代码之前触发 video.onseeked 事件。

我已尝试以下操作，但仅获取最后一个图像，因为循环在 onseeked 事件触发并调用帧捕获代码之前完成。

for(var i = 0; i < vidSecs.length; i++){
    video.currentTime = vidSecs[i];
    video.onseeked = function() {
        addPdfImage(jsPDF_Variable, video);
    };            
}

非常感谢任何想法。

Answer 1

这不是真正的答案，而是评论，因为我开发了类似的应用程序，但没有得到解决方案。 我正在尝试从网络摄像头实时视频流中提取视频帧并保存为 Canvas /上下文，每 1 - 5 秒更新一次。 How to loop HTML5 webcam video + snap photo with delay and photo refresh?

我创建了 2 个 Canvas ，由 setTimeout (5000) 事件填充，并且在测试运行时， Canvas /上下文之间没有 5 秒的延迟，有时是 2 5 秒。延迟上下文同时填充图像。

所以我正在尝试实现 Draw HTML5 Video onto Canvas - Google Chrome Crash, Aw Snap

var toggle = true;

function loop() {

toggle = !toggle;
if (toggle) {
    if (!v.paused) requestAnimationFrame(loop);
    return;
}

/// draw video frame every 1/30 frame
ctx.drawImage(v, 0, 0);

/// loop if video is playing
if (!v.paused) requestAnimationFrame(loop);
}

替换setInterval/setTimeout以使视频和视频帧正确同步

” 请改用 requestAnimationFrame (rAF)。 20ms 没有意义。大多数视频在美国(NTSC 系统)以 30 FPS 运行，在欧洲(PAL 系统)以 25 FPS 运行。那将分别是 33.3 毫秒和 40 毫秒。 ”

恐怕 HTML5 没有为通过 Canvas /上下文进行同步实时视频处理提供质量支持，因为 HTML5 没有提供适当的计时，因为它旨在由事件控制而不是作为实时运行应用程序代码运行(C， C++ ...)。

我通过搜索引擎进行的 100 多次查询没有得到一个我打算开发的 HTML5 应用程序。 对我有用的是从网络摄像头视频输入捕捉照片，单击按钮事件控制。

如有错误，请指正。