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)
})
上一章目录下一章