Question

我使用getusermedia()将网络摄像头和麦克风流式传输到浏览器。但是当使用画布拍摄视频时，它会输出一个黑色图像！ ctx.drawImage(video, 0,0,640,480); window.open(canvas.toDataURL('image/jpeg')); 为什么它显示黑色图像以及如何修复它？ Ingmars解决了mah问题。

现在，如果我想要一个最大的10秒视频我想到循环框架并一个接一个地加入.png。可能吗？如果没有其他选择？

Answer 1

你需要一个循环：

//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' );

使用画布捕获视频截图

1 个答案: