媒体流图像捕获 API

检索图像或视频流的过程如下所述。示例代码改编自 Chrome 的图像捕获示例。

首先，通过调用 MediaDevices.getUserMedia() 获取对设备的引用。下面的示例表示获取任何可用的视频设备，尽管 getUserMedia() 方法允许请求更具体的功能。此方法返回一个 Promise 对象，它会解析为一个 MediaStream 对象。

navigator.mediaDevices.getUserMedia({ video: true }).then((mediaStream) => {
  // Do something with the stream.
});

接下来，隔离媒体流的视觉部分。通过调用 MediaStream.getVideoTracks() 来实现。这将返回一个 MediaStreamTrack 对象数组。下面的代码假设 MediaStreamTrack 数组中的第一个项目是我们要使用的项目。您可以使用 MediaStreamTrack 对象的属性来选择您需要的项目。

const track = mediaStream.getVideoTracks()[0];

在这一点上，您可能希望在捕获图像之前配置设备功能。您可以在执行任何其他操作之前，通过在轨道对象上调用 applyConstraints() 来完成此操作。

let zoom = document.querySelector("#zoom");
const capabilities = track.getCapabilities();
// Check whether zoom is supported or not.
if (!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced: [{ zoom: zoom.value }] });

最后，将 MediaStreamTrack 对象传递给 ImageCapture() 构造函数。尽管 MediaStream 包含多种类型的轨道，并提供多种方法来检索它们，但如果 MediaStreamTrack.kind 不是 "video"，则 ImageCapture 构造函数将抛出一个类型为 NotSupportedError 的 DOMException。

let imageCapture = new ImageCapture(track);

ImageCapture 实验性

用于从通过有效的 MediaStreamTrack 引用的照相机设备捕获图像的接口。

• 媒体流
• 媒体流轨道