如何将两个媒体流合并为一个MediaStream并在单个video元素播放

要合并两个MediaStream，核心是将两个流中的所有MediaStreamTrack（视频、音频轨道）整合到一个新的MediaStream实例中。浏览器原生API即可实现，无需额外依赖，以下是两种可行方案：

方法1：通过轨道数组直接创建新流 #

收集两个流的目标轨道，传入MediaStream构造函数生成合并后的流：

// 收集dummyStream和newStream的所有轨道
const allTracks = [...dummyStream.getTracks(), ...newStream.getTracks()];
const combinedStream = new MediaStream(allTracks);

考虑到你dummyStream中的音频轨道已设为enabled: false（静音状态），完全可以只保留canvas的视频轨道，再合并newStream的完整音视频轨道，减少冗余：

const tracksToCombine = [
  ...dummyStream.getVideoTracks(), // 仅保留canvas视频轨道
  ...newStream.getTracks()         // 保留摄像头+麦克风的音视频轨道
];
const combinedStream = new MediaStream(tracksToCombine);

方法2：使用addTrack逐个添加轨道 #

先创建空的MediaStream，再通过addTrack方法逐个添加两个流的轨道：

const combinedStream = new MediaStream();

// 添加dummyStream的所有轨道
dummyStream.getTracks().forEach(track => combinedStream.addTrack(track));
// 添加newStream的所有轨道
newStream.getTracks().forEach(track => combinedStream.addTrack(track));

适配你的代码示例 #

修改后的完整代码如下：

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(
  (newStream) => {
    let canvas = document.getElementById("threeCanvas")
    let stream = canvas.captureStream(240);
    const canvasStream = Object.assign(stream.getVideoTracks()[0]);

    let ctx = new AudioContext(),
      oscillator = ctx.createOscillator();
    let dst = oscillator.connect(ctx.createMediaStreamDestination());
    oscillator.start();
    const silience = Object.assign(dst.stream.getAudioTracks()[0], { enabled: false });
    
    let dummyStream = new MediaStream([canvasStream, silience]);

    // 合并轨道：保留canvas视频轨道 + newStream的音视频轨道
    const tracksToCombine = [
      ...dummyStream.getVideoTracks(),
      ...newStream.getTracks()
    ];
    const combinedStream = new MediaStream(tracksToCombine);

    if (userVideo.current) {
      userVideo.current.srcObject = combinedStream;
    }
  },
  // 补充错误处理
  (err) => {
    console.error("获取媒体流失败:", err);
  }
);

注意：如果合并后存在多个同类型轨道（比如两个视频轨道），video元素默认会播放第一个视频轨道；如需切换播放目标，可通过修改对应MediaStreamTrack的enabled属性实现。

内容的提问来源于stack exchange，提问作者Baraa Baba