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

Question

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

Answer 1

您需要使用输入流 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);

看我的demo.

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

webrtc captureStream from canvas and capture audio from video

html5-canvas

webrtc

mediarecorder