Question

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

nil

不幸的是，这在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 new_stream = 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
   let audio_track_from_stream = stream.getTracks()[0] 
   new_stream.addTrack(audio_track_from_stream)

   // now play stream locally, or stream it with RTCPeerConnection or Peerjs
   let speaker = document.getElementById('speaker')
   speaker.srcObject = new_stream;
})

上面的代码将提示用户访问他/她的麦克风和摄像头，然后一旦用户允许使用，它将运行回调，为我们提供一个流，该流是MediaStream对象。该mediaStream包含两个轨道，一个音频轨道和一个视频轨道。然后，我们选择其中一个轨道（我假设在0索引上检索到的轨道是音频轨道），并将该轨道添加到全新的MediaStream对象中，然后将该流放入HTML音频元素中。

您将执行类似的操作以将视频轨道添加到此新的MediaStream对象，只需检索位于stream.getTracks（）的索引1处的轨道即可。

请注意，如果您将CanvasCaptureMediaStreamTrack传递给addTrack方法，它也将起作用。

希望它可以帮助遇到类似问题的人

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

2 个答案: