HTML 使用 MediaRecorder 记录 canvas 里面有视频

Question

我正在尝试从 canvas 中录制一段视频，其中包含一系列图片、gif 以及一些视频，甚至是随时间显示的歌曲（音频）。
现在我取得了：
- 使用 canvas.captureStream() 和 MediaRecorder
录制不带任何音频的带图片、gif 和视频的视频 我想知道的：
- 弄清楚为什么录制的视频在 canvas?
中没有视频的音频 - 有没有办法在特定时间戳将歌曲添加到录制的视频中？

我注意到一个关于如何同时录制 canvas 和音频的类似问题（下面的 link），但我不知道为什么视频的音频应该分开处理。如果这是唯一的解决方案，有没有办法在特定时间而不是录制视频的开头添加音轨？

谢谢！

Answer 1

Figure out why the recorded video has no audio of the video inside the canvas?

画布没有音频。

Is there a way to cancat songs into the recorded video at a specific timestamp?

除了自己重新制作所有内容，不是真的。但是，您可能不需要这样做。只需同时播放您的音频并同时录制。

创建一个新的 MediaStream，将来自 CanvasCaptureMediaStream 的视频轨道和来自任何你想要的音频轨道结合起来。您可以在其他流上使用 .getVideoTracks() 和 .getAudioTracks()，并使用轨道数组实例化新流。

const stream = new MediaStream([audioTrack, videoTrack]);

HTML 使用 MediaRecorder 记录 canvas 里面有视频

HTML using MediaRecorder record canvas with a video inside

javascript

audio

video

canvas

mediarecorder