将音频和视频轨道组合到新的媒体流中

Combining audio and video tracks into new MediaStream

本文关键字：媒体 组合 音频 视频 轨道      更新时间：2023-09-26

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

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

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

引用错误： 未定义媒体流

Chrome 中是否有替代方法可以合并来自不同流的曲目？

仍然以webkit为供应商前缀：

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

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

根据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 对象。此媒体流包含两个轨道，一个用于音频，一个用于视频。然后，我们使用addTrack将每个单独的轨道添加到全新的MediaStream对象中，最后，我们将新创建的流放在HTML元素中。

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

相关文章：