将音频和视频轨道合并到新的 MediaStream 中

Posted 2023-02-22

【中文标题】将音频和视频轨道合并到新的 MediaStream 中

【英文标题】：Combining audio and video tracks into new MediaStream

【发布时间】：2016-07-05 17:43:45

【问题描述】：

我需要使用来自不同 MediaStreams 的音频和视频来创建一个 MediaStream。在 Firefox 中，我可以从轨道数组中实例化一个新的 MediaStream：

  var outputTracks = [];
  outputTracks = outputTracks.concat(outputAudiostream.getTracks());
  outputTracks = outputTracks.concat(outputVideoStream.getTracks());
  outputMediaStream = new MediaStream(outputTracks);

很遗憾，这在 Chrome 中不起作用：

ReferenceError: MediaStream 未定义

Chrome 中是否有其他方法可以组合来自不同流的曲目？

【参考方案1】：

仍然使用 webkit 以供应商为前缀：

  var outputTracks = [];
  outputTracks = outputTracks.concat(outputAudioStream.getTracks());
  outputTracks = outputTracks.concat(outputVideoStream.getTracks());
  outputMediaStream = new webkitMediaStream(outputTracks);

【讨论】：

现在已经不是这样了。你想更新你的答案吗？

我已经为此添加了一个更新的解决方案。

但是这个问题已经过时了，因为原来的问题现在才有效？

【参考方案2】：

这是针对此问题的更新解决方案，

根据MediaStream API，可以将多个轨道添加到同一个MediaStream中，如下所示：

假设您从 getUserMedia 获得了流：

const constraints = audio: true, video: true
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) 
   // stream is of MediaStream type
   let newStream = new MediaStream();

   // getTracks method returns an array of all stream inputs
   // within a MediaStream object, in this case we have
   // two tracks, an audio and a video track
   stream.getTracks().forEach(track => newStream.addTrack(track));

   // now play stream locally, or stream it with RTCPeerConnection or Peerjs
   let mediaPlayer = document.getElementById('player');
   mediaPlayer.srcObject = newStream;
)

上面的代码将提示用户访问他/她的麦克风和摄像头，然后一旦用户授予权限，它将运行回调给我们一个流，这是一个 MediaStream 对象。此 MediaStream 包含两个轨道，一个用于音频，一个用于视频。然后，我们使用addTrack 将每个单独的轨道添加到一个全新的 MediaStream 对象中，最后，我们将新创建的流放入一个 html 元素中。

请注意，如果您将 CanvasCaptureMediaStreamTrack 传递给 addTrack 方法，它也可以工作。