使用WebRTC从画布捕获流并从视频中捕获音频

Question

使用WebRTC从画布捕获流并从视频中捕获音频

3

在我的项目中，我有一个显示视频的部分。在视频的顶部，有一个画布，上面绘制了一些对象。因此视频被与一些绘画叠加在一起。现在我想下载包括绘画在内的视频文件。我正在使用webrtc mediaRecorder。我通过window.requestAnimationFrame将视频绘制到画布上。导出的视频效果很好，但是没有视频的音频，因为我捕捉的是画布。是否可以捕捉视频的音频并将其添加到canvasStream中？我还记录了包括音频在内的视频流，但是那时候我没有在其上方绘制绘画。有什么建议吗？

- q-jack

请查看我对一个类似问题的回答。 - jib

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ajay · Accepted Answer

你需要使用输入流AudioTrack和Canvas Video Track创建新的MediaStream。
然后记录新的媒体流，这样记录器输出的数据块(blobs)将包含音频和视频。

var options = {mimeType: 'video/webm'};
var recordedBlobs = [];
var newStream = new MediaStream();
newStream.addTrack(inputStream.getAudioTracks()[0]);
newStream.addTrack(canvasStream.getVideoTracks()[0]);
mediaRecorder = new MediaRecorder(newStream, options);
mediaRecorder.ondataavailable = function (event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}
mediaRecorder.start(1000);

请查看我的演示。