複数のビデオフレームを取得するキュー

Question

jsPDFを使用してPDF出力ツールを作成していますが、それぞれがビデオフレームのキャンバスイメージを保持する複数のページを追加する必要があります。 最高の結果を得るために、操作をキューに入れてイベントを待つ方法を調整できないため、これを達成するための最善の方法については論理に固執しています。

video.currentTime 

私はまた、次のようなビデオ秒の配列を持っている：

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

私はvideoタグにロードされたビデオを持っているとして取得するか、その求めるポイントは単純に設定することができます開始するには 私はこの配列をループする必要があります、配列で定義された秒にビデオを探し、これらの秒でキャンバスを作成し、各キャンバスを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配列をループさせながらこれらのビットを呼び出すときは、を設定すると、フレームをキャプチャして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

これは本当の答えではありませんが、私は同様のアプリケーションを開発して解決策を得ていないので、コメントです。 私はウェブカメラのライブビデオストリームからviddeoフレームを抽出し、1 - 5秒ごとに更新されたキャンバス/コンテキストとして保存しようとしています。 How to loop HTML5 webcam video + snap photo with delay and photo refresh?

私はsetTimeoutを（5000）イベントによって移入する2つのキャンバスを作成し、テストの実行に私はキャンバス/ contextes、時々、2〜5秒の間に5秒の遅延を得ることはありません。遅延されたコンテキストには、同時にイメージが設定されます。

だから私はきちんと

「 使用requestAnimationFrameの（RAF）同期ビデオとビデオのフレームを取得するためのsetInterval/setTimeoutメソッドを置き換えるために 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); 
} 

を実装しようとしています代わりに。20msのは意味がありませんほとんどのビデオは、米国（NTSCシステム）で30FPS、ヨーロッパ（PALシステム）で25FPSで実行されます（それぞれ33.3msと40ms）。

HTML5はイベント/制御され、リアルタイム実行アプリケーションコード（C、C++）として実行されていなかったため、HTML5は適切なタイミングを提供しないため、HTML5はキャンバス/コンテキストを介してリアルタイムのライブビデオ処理を同期させるための品質サポートを提供していません。 ..）。

検索エンジンを使用した100回以上のクエリで、私が開発しようとしているHTML5アプリケーションは1つではありませんでした。 ウェブカメラのビデオ入力からスナップ写真、クリックボタンイベントが制御されました。

私が間違っている場合は、私を修正してください。

Answer 2

この投稿は、動画の上に再帰を使用して私のためにこの質問に答えたイベントをシーク： HTML5 video and canvas