【问题标题】:Combine audio and video streams into one file with MediaRecorder [duplicate]使用 MediaRecorder 将音频和视频流合并为一个文件 [重复]
【发布时间】:2019-03-17 00:34:51
【问题描述】:

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

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

【问题讨论】:

    标签: javascript html html5-canvas web-mediarecorder


    【解决方案1】:

    使用视频流的轨道和音频流的轨道创建一个新的(组合的)媒体流。为此,请使用MediaStream constructor:

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

    即使每个流中可能只有一个轨道,但如果每个流中有多个轨道,这也可以。

    选择某些频道

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

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

    【讨论】:

    • 这不起作用。它将只播放第一首曲目,如下所示:stackoverflow.com/questions/42138545/…
    • @iwaduarte 你能解释一下你链接的问题与这个答案有什么相似之处吗?它的 OP 没有将流与 MediaStream API 混合,甚至在声明后也没有使用第二个流
    • 看答案。你也在你的构造函数上混合。我没有看到你的困惑
    猜你喜欢
    • 1970-01-01
    • 2016-05-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多