Question

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

video.currentTime

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

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

我需要做的是循环遍历此数组，在视频中搜索数组中定义的秒数，在这些秒创建画布，然后将每个画布添加到PDF页面。我有一个来自视频帧功能的创建画布，如下所示：

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需要循环等待video.onseeked事件在代码捕获框架并将其添加到PDF之前触发可以运行。

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

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

任何想法都非常感激。

Answer 1

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

我创建了2个画布，由setTimeout（5000）事件填充，在测试运行中，画布/上下文之间没有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以使视频和视频帧正确同步

＆＃34; 请改用requestAnimationFrame（rAF）。 20毫秒毫无意义。大多数视频在美国（NTSC系统）以30 FPS运行，在欧洲以25 FPS（PAL系统）运行。那将分别是33.3ms和40ms。＆＃34;

我担心HTML5不能通过画布/上下文为同步的实时实时视频处理提供质量支持，因为HTML5没有提供适当的时序，因为它旨在被事件控制，而不是作为实时运行的应用程序代码运行（C， C ++ ......）。

通过搜索引擎我的100多个查询导致我打算开发的单个HTML5应用程序。对我有用的是来自网络摄像头视频输入的Snap Photo，点击按钮事件控制。

如果我错了，请纠正我。

Answer 2

这篇文章使用视频搜索事件的递归回答了这个问题： HTML5 video and canvas

队列获得多个视频帧

2 个答案: