html5-canvas - 来自 Canvas 的 webrtc captureStream 并从视频中捕获音频

Question

在我的项目中，我显示了一个视频。在视频的顶部有一个 Canvas ，其中绘制了一些对象。因此视频上叠加了一些图画。现在我想下载包含图纸的视频文件。我正在使用 webrtc mediaRecorder。我正在将视频绘制到 window.requestAnimationFrame 上的 Canvas 上。我导出的视频看起来不错，但视频中没有音频，因为我捕获了 Canvas 。是否可以从视频中捕获音频并将其添加到 canvasStream 中？我还录制了包括音频在内的视频流，但我没有在上面画画。有什么建议吗？

Answer 1

您需要使用输入流 AudioTrack 和 Canvas Video Track 创建新的 MediaStream。
然后记录新的 Stream，因此记录器输出(blob)将同时包含音频和视频。

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

查看我的 demo .