WebRTC技术详解:从0到1构建多人视频会议系统
上QQ阅读APP看书,第一时间看更新

2.1.3 MediaStream方法

1. addTrack()方法

该方法向媒体流中加入新的媒体轨道。

stream.addTrack(track);
  • 参数:Track,媒体轨道,类型为MediaStreamTrack。
  • 返回值:无。
2. clone()方法

返回当前媒体流的副本,副本具有不同且唯一的标识。

const newstream = stream.clone();
// sameId为false
const sameId = newstream.id === stream.id? true : false
  • 参数:无。
  • 返回值:一个新的媒体流对象。
3. getAudioTracks()方法

返回媒体种类为audio的媒体轨道对象数组,数组成员类型为MediaStreamTrack。

注意,数组的顺序是不确定的,每次调用都可能不同。

const mediaStreamTracks = mediaStream.getAudioTracks()
  • 参数:无。
  • 返回值:mediaStreamTracks,媒体轨道对象数组,如果当前媒体流没有音频轨道,则返回数组为空。

代码清单2-2使用getUserMedia()方法获取包含视频及音频轨道的媒体流,如果调用成功,则将媒体流附加到<video>元素,然后设置计时器,5s后调用getAudioTracks()方法获取所有音频轨道,最后停止播放第一个音频轨道。

代码清单2-2 getAudioTracks()方法示例

navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then(mediaStream => {
  document.querySelector('video').srcObject = mediaStream;
  // 5s后,停止播放第一个音频轨道
  setTimeout(() => {
    const tracks = mediaStream.getAudioTracks()
    tracks[0].stop()
  }, 5000)
})
4. getVideoTracks()方法

返回kind属性值为video的媒体轨道对象数组,媒体轨道对象类型为MediaStream Track。

注意,对象在数组中的顺序是不确定的,每次调用都可能不同。

const mediaStreamTracks = mediaStream.getVideoTracks()
  • 参数:无。
  • 返回值:mediaStreamTracks是媒体轨道对象数组。如果当前媒体流没有视频轨道,则返回数组为空。

代码清单2-3调用getUserMedia()方法获取视频流,如果调用成功,则将媒体流附加到<video>元素,之后获取第一个视频轨道并从视频轨道截取图片。

代码清单2-3 getVideoTracks()方法示例

navigator.mediaDevices.getUserMedia({video: true})
.then(mediaStream => {
  document.querySelector('video').srcObject = mediaStream;
  const track = mediaStream.getVideoTracks()[0];
  // 截取图片
  const imageCapture = new ImageCapture(track);
  return imageCapture;
})
5. getTrackById()方法

返回指定ID的轨道对象。如果未提供参数,或者未匹配ID值,则返回null;如果存在多个相同ID的轨道,该方法返回匹配到的第一个轨道。

const track = MediaStream.getTrackById(id);
  • 参数:id,类型为字符串。
  • 返回值:如果输入参数id与MediaStreamTrack.id匹配,则返回相应的MediaStream-Track对象,否则返回null。

代码清单2-4获取指定ID的媒体轨道并应用约束,将音量调整到0.5。

代码清单2-4 getTrackById()方法示例

stream.getTrackById("primary-audio-track").applyConstraints({ volume: 0.5 });
6. getTracks()方法

返回所有媒体轨道对象数组,包括所有视频及音频轨道。数组中对象的顺序不确定,每次调用都有可能不同。

const mediaStreamTracks = mediaStream.getTracks()
  • 参数:无。
  • 返回值:媒体轨道对象数组。

代码清单2-5使用getUserMedia()方法获取包含视频轨道的流,如果调用成功,则将流附加到<video>元素,然后设置计时器,5s后获取所有媒体轨道,并停止播放第一个媒体轨道(即视频轨道)。

代码清单2-5 getTracks()方法示例

navigator.mediaDevices.getUserMedia({audio: false, video: true})
.then(mediaStream => {
  document.querySelector('video').srcObject = mediaStream;
  // 5s后,停止播放第一个媒体轨道
  setTimeout(() => {
    const tracks = mediaStream.getTracks()
    tracks[0].stop()
  }, 5000)
})