webrtc captureStream来自画布并从视频中捕获音频

Question

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

Answer 1

您需要使用输入流AudioTrack和Canvas Video Track创建新的MediaStream 然后记录新的Stream，因此录音机输出（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。