MediaStream 图像捕获 API

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

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 object to the ImageCapture() constructor. Though a MediaStream holds several types of tracks and provides multiple methods for retrieving them, the ImageCapture constructor will throw a DOMException of type 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() .

规范

规范 状态 Comment
MediaStream Image Capture 工作草案 初始定义。

浏览器兼容性

ImageCapture

更新 GitHub 上的兼容性数据
Desktop Mobile
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

更新 GitHub 上的兼容性数据
Desktop Mobile
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

图例

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

另请参阅