使用畫布捕捉視頻截圖

我用getusermedia()將網絡攝像頭和麥克風傳輸到瀏覽器。但是當使用畫布捕獲視頻時，它會輸出黑色圖像！ ctx.drawImage(video, 0,0,640,480); window.open(canvas.toDataURL('image/jpeg')); 爲什麼它顯示一個黑色的圖像，以及如何解決它？ Ingmars解決了麻煩問題。使用畫布捕捉視頻截圖

現在，如果我想要一個最大10秒的視頻，我想通過幀循環和一個接一個地加入.png。可能嗎？如果沒有其他的選擇？

來源

2014-06-13 user3508453

你使用了一些一種循環到'drawImage'？如果你僅僅調用了一次，它將不起作用。您需要更新每個框架上的畫布上下文。 – Ingmars

沒有使用任何循環。 – user3508453

使用什麼樣的迴路@Ingmars – user3508453

你需要一個循環：

//assuming canvas, ctx and video is set previously and available in all scopes. 

var fps = 1000/25; //Approximately 25 frames per second 

var videoDrawInterval = setInterval(function() { 
    ctx.drawImage(video, 0, 0, 640, 480); 
}, fps); 


something.onclick = function() { 
    clearInterval(videoDrawInterval); 

    var snapshotImg = new Image(); 
    snapshotImg.src = canvas.toDataURL('image/jpeg', 0.5); //Second param is jpg quality 

    var win = window.open('', 'Snapshot', 'width=640, height=480' ); 
    win.document.body.appendChild(snapshotImg); 
}

記住，JPEG壓縮是不是在所有的瀏覽器都支持，所以測試我建議使用PNG格式：

canvas.toDataURL('image/png');

來源

2014-06-13 15:46:24 Ingmars

如果她/他只需要一個屏幕截圖，則不需要循環，如果它只是一個屏幕截圖。 –

使用畫布捕捉視頻截圖

回答

相關問題