MediaStream Image Capture API - 用于从摄影设备捕获图像或视频的 API

实验中

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

MediaStream Image Capture API 是一个用于从摄影设备捕获图像或视频的 API。除了捕获数据，它还允许您检索有关设备功能的信息，例如图像大小、防红眼以及是否有闪光灯以及它们当前的设置。相反，API 允许在设备允许的范围内配置功能。

图像捕获概念和用法

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

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

navigator.mediaDevices.getUserMedia({ video: true })
  .then(mediaStream => {
    // 对流做一些事情。
  })

接下来，获取媒体流的可视部分。通过调用 MediaStream.getVideoTracks() 来执行此操作。这将返回一个 MediaStreamTrack 对象数组。下面的代码假设 MediaStreamTrack 数组中的第一项是要使用的项。您可以使用 MediaStreamTrack 对象的属性来选择您需要的对象。

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

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

let zoom = document.querySelector('#zoom');
const capabilities = track.getCapabilities();
// 检查是否支持缩放。
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 引用的摄影设备捕获图像的接口。

PhotoCapabilities

为连接的摄影设备提供可用的配置选项。通过调用 ImageCapture.getPhotoCapabilities() 检索 PhotoCapabilities 对象。

规范

规范	状态	备注
MediaStream Image Capture	Working Draft	初始定义。

浏览器兼容性

ImageCapture

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	59	79	不支持1	不支持	46	不支持
ImageCapture() 构造函数	59	79	不支持1	不支持	46	不支持
getPhotoCapabilities	59	79	不支持1	不支持	46	不支持
getPhotoSettings	61	79	不支持1	不支持	46	不支持
grabFrame	59	79	不支持1	不支持	46	不支持
takePhoto	60 59 — 602	79	不支持1	不支持	47 46 — 472	不支持
track	59	79	不支持1	不支持	46	不支持

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	59	59	未知	不支持1	未知	43	不支持
ImageCapture() 构造函数	59	59	未知	不支持1	未知	43	不支持
getPhotoCapabilities	59	59	未知	不支持1	未知	43	不支持
getPhotoSettings	61	61	未知	不支持1	未知	43	不支持
grabFrame	59	59	未知	不支持1	未知	43	不支持
takePhoto	60 59 — 602	60 59 — 602	未知	不支持1	未知	44 43 — 442	不支持
track	59	59	未知	不支持1	未知	43	不支持

1. See bug 888177.

2. photoSettings parameter not supported.

PhotoCapabilities

桌面浏览器兼容性

暂无兼容数据

相关链接

• MediaStream
• MediaStreamTrack