将音频和视频轨道组合到新的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

仍然以webkit为前缀的供应商:

  var outputTracks = [];
  outputTracks = outputTracks.concat(outputAudioStream.getTracks());
  outputTracks = outputTracks.concat(outputVideoStream.getTracks());
  outputMediaStream = new webkitMediaStream(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 方法，它也可以工作。