将音频和视频轨道组合到新的 MediaStream 中
Combining audio and video tracks into new MediaStream
我需要使用来自不同 MediaStreams 的音频和视频创建一个 MediaStream。在 Firefox 中,我可以从轨道数组中实例化一个新的 MediaStream:
var outputTracks = [];
outputTracks = outputTracks.concat(outputAudioStream.getTracks());
outputTracks = outputTracks.concat(outputVideoStream.getTracks());
outputMediaStream = new MediaStream(outputTracks);
不幸的是,这在 Chrome 中不起作用:
ReferenceError: MediaStream is not defined
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;
})
上面的代码会提示用户访问 his/her 麦克风和摄像头,然后一旦用户授予权限,它就会 运行 回调给我们一个流,这是一个 MediaStream 对象。此 MediaStream 包含两个轨道,一个用于音频,一个用于视频。然后我们使用 addTrack 将每个单独的轨道添加到一个全新的 MediaStream 对象,最后,我们将新创建的流放在 HTML 元素中。
请注意,如果您将 CanvasCaptureMediaStreamTrack 传递给 addTrack 方法,它也会起作用。
我需要使用来自不同 MediaStreams 的音频和视频创建一个 MediaStream。在 Firefox 中,我可以从轨道数组中实例化一个新的 MediaStream:
var outputTracks = [];
outputTracks = outputTracks.concat(outputAudioStream.getTracks());
outputTracks = outputTracks.concat(outputVideoStream.getTracks());
outputMediaStream = new MediaStream(outputTracks);
不幸的是,这在 Chrome 中不起作用:
ReferenceError: MediaStream is not defined
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;
})
上面的代码会提示用户访问 his/her 麦克风和摄像头,然后一旦用户授予权限,它就会 运行 回调给我们一个流,这是一个 MediaStream 对象。此 MediaStream 包含两个轨道,一个用于音频,一个用于视频。然后我们使用 addTrack 将每个单独的轨道添加到一个全新的 MediaStream 对象,最后,我们将新创建的流放在 HTML 元素中。
请注意,如果您将 CanvasCaptureMediaStreamTrack 传递给 addTrack 方法,它也会起作用。