2.2.2 MediaStreamTrack方法

1. applyConstraints()方法

该方法为媒体轨道指定约束条件,如可以指定帧率、分辨率、回音消除等。

可以根据需要使用约束定制媒体流,比如在采集清晰度高的视频时,可以将帧率降低一些,这样就不至于占用太大的网络带宽。

const appliedPromise = track.applyConstraints([constraints])
  • 参数:constraints,可选参数,一个类型为MediaTrackConstraints的对象,包含了准备应用到媒体轨道里的所有约束需求,未在需求中指定的约束将使用默认值。如果constraints为空,则会清除当前轨道所有的自定义效果,全部使用默认值。
  • 返回值:appliedPromise是一个Promise值,决议失败时返回MediaStreamError。当指定的约束太严格时,可能会导致该方法调用失败。

如代码清单2-12所示,使用getUserMedia()方法获取视频流,并针对第一个视频轨道应用约束条件,约束指定了视频的宽、高和宽高比。

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

const constraints = {
  width: {min: 640, ideal: 1280},
  height: {min: 480, ideal: 720},
  aspectRatio: { ideal: 1.7777777778 }
};

navigator.mediaDevices.getUserMedia({ video: true })
.then(mediaStream => {
  const track = mediaStream.getVideoTracks()[0];
  track.applyConstraints(constraints)
  .then(() => {
    // 成功应用了约束条件
    console.log('successed!');
  })
  .catch(e => {
    // 不能满足约束条件
    console.log('applyConstraints error, error name: ' + e.name);
  });
});
2. clone()方法

获取媒体轨道的副本,新的轨道具有不同的ID值。

const newTrack = track.clone()
3. getCapabilities()方法

获取媒体轨道的能力集。

const capabilities = track.getCapabilities()
  • 参数:无。
  • 返回值:MediaTrackCapabilities对象,描述了媒体轨道的能力信息。

MediaTrackCapabilities的定义如代码清单2-13所示。

代码清单2-13 MediaTrackCapabilities的定义

dictionary MediaTrackCapabilities {
  ULongRange width;
  ULongRange height;
  DoubleRange aspectRatio;
  DoubleRange frameRate;
  sequence<DOMString> facingMode;
  sequence<DOMString> resizeMode;
  ULongRange sampleRate;
  ULongRange sampleSize;
  sequence<boolean> echoCancellation;
  sequence<boolean> autoGainControl;
  sequence<boolean> noiseSuppression;
  DoubleRange latency;
  ULongRange channelCount;
  DOMString deviceId;
  DOMString groupId;
};

代码清单2-14获取媒体轨道的能力集,并将媒体能力输出到日志。

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

const capabilities = track.getCapabilities()
// 遍历capabilities,将媒体能力输出到日志
Object.keys(capabilities).forEach(value => {
  console.log(value + '=>' + capabilities[value]);
})

媒体能力、约束、设定值的概念相近,有区别,也有联系,我们将在2.3节详细讨论。

4. getConstraints()方法

获取最近一次调用applyConstraints()传入的自定义约束。

const constraints = track.getConstraints()
  • 参数:无。
  • 返回值:MediaTrackConstraints对象,包含了媒体轨道的约束集。

代码清单2-15实现了摄像头的切换。

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

function switchCameras(track, camera) {
  const constraints = track.getConstraints();
  constraints.facingMode = camera;
  track.applyConstraints(constraints);
}
5. getSettings()方法

获取媒体轨道约束的当前值。

const settings = track.getSettings()
  • 输入:无。
  • 返回值:MediaTrackSettings对象,包含媒体轨道约束的当前值。

MediaTrackSettings的定义如代码清单2-16所示。

代码清单2-16 MediaTrackSettings的定义

dictionary MediaTrackSettings {
  long width;
  long height;
  double aspectRatio;
  double frameRate;
  DOMString facingMode;
  DOMString resizeMode;
  long sampleRate;
  long sampleSize;
  boolean echoCancellation;
  boolean autoGainControl;
  boolean noiseSuppression;
  double latency;
  long channelCount;
  DOMString deviceId;
  DOMString groupId;
};

获取当前使用的摄像头,如代码清单2-17所示。

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

function whichCamera(track) {
  return track.getSettings().facingMode;
}
6. stop()方法

用于停止播放当前媒体轨道。如果多个媒体轨道与同一个源相连,停止某个轨道不会导致源终止,只有当所有相连媒体轨道都停止时,媒体源才会停止。调用该方法后,属性readyState将被设置为ended。

track.stop()
  • 输入:无。
  • 返回值:无。

代码清单2-18从video元素的srcObject属性获取媒体流,然后调用getTracks()方法获取所有媒体轨道,遍历媒体轨道数组并调用stop()方法逐一停止播放。

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

function stopStreamedVideo(videoElem) {
  const stream = videoElem.srcObject;
  const tracks = stream.getTracks();
  tracks.forEach(track => {
    track.stop();
  });
  videoElem.srcObject = null;
}