使用MediaRecorder将音频和视频流合并为一个文件 [英] Combine audio and video streams into one file with MediaRecorder

问题描述

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

I am making a small interactive animation/game (on canvas with PixiJS) and wish to give users an option to save the rendered animation. After doing my research, MediaRecorder appears to be the API that I should use to record and render the video. However the MediaRecorder constructor only allows one stream to be used as source.

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

How can I merge additional streams (audio effects) so that the recorded video file will also have sounds in it?

推荐答案

使用视频流的轨道和音频流的轨道创建新的(组合的)媒体流.为此，请使用 MediaStream 构造函数:

Create a new (combined) media stream with the track(s) of the video stream and the track(s) of the audio stream. To do this, use the MediaStream constructor:

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

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

Even though you will probably have only a single track in each stream, this will also work if you have multiple tracks in each.

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

Of course, if you want to discard all the audio tracks of the video stream and the video tracks of the audio stream,

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

这篇关于使用MediaRecorder将音频和视频流合并为一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！