音视频录制演示

说明

此实例用于演示如何将 canvas 动画录制为视频，并为其添加背景音乐。动画渲染使用了 three.js，仅是为了表现更直观的展示效果，将其当作一个 canvas 绘制过程即可。录制时可以使用鼠标操作动画窗口。

原理简介：

1. 使用 canvas 的 captureStream 方法捕获媒体流，取得其第一个视频轨道；
2. 创建一个 AudioContext，使用 createMediaStreamDestination 方法创建一个媒体流目的地，在此目的地上得到媒体流，取得其第一个音频轨道；
3. 创建一个用于录制的 MediaStream，将前面得到的视频轨道和音频轨道加入其中；
4. 创建一个 MediaRecorder 用于录制上一步创建的 MediaStream，录制结果为一个 Blob，播放它。

注：本实例仅用于演示，只在 Chrome 93 和 Firefox 91 进行了测试。Firefox 效果要明显优于 Chrome。