MediaStream Image Capture API

MediaStream 图像捕获的概念和用法

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

首先，通过调用 MediaDevices.getUserMedia() 来获取设备引用。下面的示例表示提供任何可用的视频设备，但 getUserMedia() 方法允许请求更具体的功能。此方法返回一个 Promise，该 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 引用从摄影设备捕获图像的接口。

规范

浏览器兼容性

另见

• MediaStream
• MediaStreamTrack