隊列獲得多個視頻幀

我使用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); 
    };    
}

任何想法非常感謝。

來源

2017-06-19 Diplonics

這不是一個真正的答案，而是一個評論，因爲我開發的應用程序並沒有得到解決。我想從網絡攝像頭實時視頻流中提取viddeo幀，並保存爲畫布/上下文，每1 - 5秒更新一次。 How to loop HTML5 webcam video + snap photo with delay and photo refresh?

我已創建畫布2通過的setTimeout來填充（5000）事件和試運行我沒有得到帆布/ contextes之間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的沒有任何意義大多數視頻在美國以30 FPS（NTSC系統）和25 FPS在歐洲（PAL系統）運行，分別爲33.3ms和40ms。由於HTML5沒有提供適當的時間，因爲HTML5並沒有爲通過畫布/上下文同步的實時視頻處理提供質量支持，因爲它被設計爲事件/控制，並且不作爲實時運行應用程序代碼運行（C，C++）。 ..）。

我的100多個查詢通過搜索引擎導致沒有一個單一的HTML5應用程序，我打算開發。我的工作是從網絡攝像頭視頻輸入Snap照片，點擊按鈕事件控制。

如果我錯了，請糾正我。

來源

2017-06-19 23:48:52

後續Muaz汗看起來是最先進的HTML5視頻處理的開發商之一。直接詢問他http://www.muazkhan.com/ https://twitter.com/muazkh https://twitter.com/WebRTCWeb https://www.webrtc-experiment.com/RTCMultiConnection/RecordRTC-and-RTCMultiConnection .html https://stackoverflow.com/questions/41487635/thumbnails-from-a-video-with-javascript-html5?rq=1 –

這個帖子已經回答了這個問題，我使用的視頻遞歸seeked事件： HTML5 video and canvas

來源

2017-06-20 16:26:49 Diplonics

隊列獲得多個視頻幀

回答

相關問題