MediaStream 图像捕获 API

在此页

MediaStream 图像捕获概念和用法
接口
规范
浏览器兼容性
另请参阅
相关话题

这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

MediaStream 图像捕获 API is an API for capturing images or videos from a photographic device. In addition to capturing data, it also allows you to retrieve information about device capabilities such as image size, red-eye reduction and whether or not there is a flash and what they are currently set to. Conversely, the API allows the capabilities to be configured within the constraints what the device allows.

MediaStream 图像捕获概念和用法

The process of retrieving an image or video stream happens as described below. The example code is adapted from Chrome's Image Capture examples .

First, get a reference to a device by calling MediaDevices.getUserMedia() . The example below simply says give me whatever video device is available, though the getUserMedia() method allows more specific capabilities to be requested. This method returns a Promise that resolves with a MediaStream 对象。

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

Next, isolate the visual part of the media stream. Do this by calling MediaStream.getVideoTracks() . This returns an array of MediaStreamTrack objects. The code below assumes that the first item in the MediaStreamTrack array is the one to use. You can use the properties of the MediaStreamTrack objects to select the one you need.

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

At this point, you might want to configure the device capabilities before capturing an image. You can do this by calling applyConstraints() on the track object before doing anything else.

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 }] });

Finally, pass the MediaStreamTrack 对象到 ImageCapture() constructor. Though a MediaStream holds several types of tracks and provides multiple methods for retrieving them, the ImageCapture constructor will throw a DOMException 类型 NotSupportedError if MediaStreamTrack.kind 不是 "video" .

let imageCapture = new ImageCapture(track);

接口

ImageCapture: An interface for capturing images from a photographic device referenced through a valid MediaStreamTrack .
PhotoCapabilities: Provides available configuration options for an attached photographic device. Retrieve a PhotoCapabilities object by calling ImageCapture.getPhotoCapabilities() .

规范

规范	状态	注释
MediaStream 图像捕获	工作草案	初始定义。

浏览器兼容性

`ImageCapture`

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`ImageCapture`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`ImageCapture()` 构造函数	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`getPhotoCapabilities`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`getPhotoSettings`	Chrome 61	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 61	Chrome Android 61	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 8.0
`grabFrame`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`takePhoto`	Chrome 60 60 59 — 60 注意事项 `photoSettings` argument not supported.	Edge ≤79	Firefox ?	IE ?	Opera 47 47 46 — 47 注意事项 `photoSettings` argument not supported.	Safari ?	WebView Android 60 60 59 — 60 注意事项 `photoSettings` argument not supported.	Chrome Android 60 60 59 — 60 注意事项 `photoSettings` argument not supported.	Firefox Android ?	Opera Android 44 44 43 — 44 注意事项 `photoSettings` argument not supported.	Safari iOS ?	Samsung Internet Android 8.0 8.0 7.0 — 8.0 注意事项 `photoSettings` argument not supported.
`track`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0

图例

完整支持
兼容性未知 ?
实验。期望将来行为有所改变。

`PhotoCapabilities`

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`PhotoCapabilities`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`fillLightMode`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`imageHeight`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`imageWidth`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0
`redEyeReduction`	Chrome 59	Edge ≤79	Firefox ?	IE ?	Opera 46	Safari ?	WebView Android 59	Chrome Android 59	Firefox Android ?	Opera Android 43	Safari iOS ?	Samsung Internet Android 7.0

图例

完整支持
兼容性未知 ?
实验。期望将来行为有所改变。

另请参阅

元数据

最后修改： 2020 年 7 月 29 日

MediaStream 图像捕获 API
接口
1. ImageCapture
2. PhotoCapabilities

在此页

MediaStream 图像捕获概念和用法

接口

规范

浏览器兼容性

ImageCapture

图例

PhotoCapabilities

图例

另请参阅

相关话题

`ImageCapture`

`PhotoCapabilities`