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

Question

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

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

不幸的是，这在 Chrome 中不起作用：

ReferenceError：未定义 MediaStream

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

Answer 1

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

Answer 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 方法，它也可以工作。