javascript - 使用 MediaRecorder 将音频和视频流合并到一个文件中

Question

我正在制作一个小型交互式动画/游戏（使用 PixiJS 在画布上），并希望为用户提供保存渲染动画的选项。经过研究，MediaRecorder似乎是我应该用来录制和渲染视频的 API。但是 MediaRecorder 构造函数只允许将一个流用作源。

如何合并其他流（音频效果），以​​便录制的视频文件中也有声音？

Answer 1

使用视频流的轨道和音频流的轨道创建一个新的（组合的）媒体流。为此，请使用MediaStream构造函数：

let combined = new MediaStream([...videoStream.getTracks(), ...audioStream.getTracks()]);
let recorder = new MediaRecorder(combined);

即使每个流中可能只有一个轨道，但如果每个流中有多个轨道，这也将起作用。

选择某些频道

当然，如果你想丢弃视频流的所有音轨和音频流的视频轨道，

let combined = new MediaStream([...videoStream.getVideoTracks(), ...audioStream.getAudioTracks()]);