拍摄照片和控制相机设置

Miguel Casas-Sanchez
François Beaufort
François Beaufort

Image Capture API 可以捕捉静态图片,以及配置相机硬件设置。此 API 在 Android 和桌面设备上的 Chrome 59 中提供。我们还发布了 ImageCapture polyfill 库

该 API 可用于控制变焦、亮度、对比度、ISO 和白平衡等相机功能。最棒的是,借助图片抓取功能,您可以使用任何可用的设备相机或摄像头来拍摄高分辨率图片。以前在网络上拍照的技术使用的是视频快照,分辨率低于静态图片。

ImageCapture 对象是使用 MediaStreamTrack 作为来源构建的。然后,该 API 将具有两个拍摄方法 takePhoto()grabFrame(),以及用于检索相机功能和设置以及更改这些设置的方法。

施工

Image Capture API 通过从 getUserMedia() 获取的 MediaStreamTrack 获取对相机的访问权限:

navigator.mediaDevices.getUserMedia({video: true})
    .then(gotMedia)
    .catch(error => console.error('getUserMedia() error:', error));

function gotMedia(mediaStream) {
    const mediaStreamTrack = mediaStream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(mediaStreamTrack);
    console.log(imageCapture);
}

您可以在 DevTools 控制台中试用此代码。

截图

拍摄可通过两种方式完成:全帧和快速快照。takePhoto() 会返回 Blob,即单次曝光的结果,可供浏览器下载、存储或在 <img> 元素中显示。此方法使用可用的最高摄像头分辨率。例如:

const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('takePhoto() error:', error));

grabFrame() 会返回一个 ImageBitmap 对象,即实时视频的快照,该对象可以(例如)绘制在 <canvas 上,然后进行后处理以选择性更改颜色值。请注意,ImageBitmap 仅具有视频源的分辨率,该分辨率通常低于相机的静态图片功能。例如:

const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
    .then(imageBitmap => {
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    })
    .catch(error => console.error('grabFrame() error:', error));

功能和设置

您可以通过多种方式操控拍摄设置,具体取决于更改是否会反映在 MediaStreamTrack 中,还是仅在 takePhoto() 之后才会显示。例如,zoom 级别的更改会立即传播到 MediaStreamTrack,而红眼减少功能(如果已设置)仅在拍摄照片时应用。

“实时”摄像头功能和设置通过预览 MediaStreamTrack 进行操作:MediaStreamTrack.getCapabilities() 会返回一个 MediaTrackCapabilities 字典,其中包含具体支持的功能以及范围或允许的值,例如支持的缩放范围或允许的白平衡模式。相应地,MediaStreamTrack.getSettings() 会返回包含具体当前设置的 MediaTrackSettings。缩放、亮度和手电筒模式属于此类别,例如:

var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
    zoomSlider.min = capabilities.zoom.min;
    zoomSlider.max = capabilities.zoom.max;
    zoomSlider.step = capabilities.zoom.step;
    zoomSlider.value = settings.zoom;
}

通过 ImageCapture 对象操控“非实时”相机功能和设置:ImageCapture.getPhotoCapabilities() 会返回一个 PhotoCapabilities 对象,该对象可提供对“非实时”可用相机功能的访问权限。相应地,从 Chrome 61 开始,ImageCapture.getPhotoSettings() 会返回包含具体当前设置的 PhotoSettings 对象。照片分辨率、红眼减少和闪光灯模式(手电筒除外)属于此部分,例如:

var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
    .then(function(photoCapabilities) {
    widthSlider.min = photoCapabilities.imageWidth.min;
    widthSlider.max = photoCapabilities.imageWidth.max;
    widthSlider.step = photoCapabilities.imageWidth.step;
    return imageCapture.getPhotoSettings();
    })
    .then(function(photoSettings) {
    widthSlider.value = photoSettings.imageWidth;
    })
    .catch(error => console.error('Error getting camera capabilities and settings:', error));

正在配置

您可以通过预览 MediaStreamTrackapplyConstraints() 约束条件来配置“实时”摄像头设置,例如:

var zoomSlider = document.querySelector('input[type=range]');

mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
    .catch(error => console.error('Uh, oh, applyConstraints() error:', error));

“非实时”相机设置是使用 takePhoto() 的可选 PhotoSettings 字典进行配置的,例如:

var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('Uh, oh, takePhoto() error:', error));

相机功能

如果您运行上述代码,会发现 grabFrame()takePhoto() 结果在维度方面存在差异。

takePhoto() 方法可访问相机的最大分辨率。

grabFrame() 只会在渲染程序内的 MediaStreamTrack 中获取下一个可用的 VideoFrame,而 takePhoto() 会中断 MediaStream、重新配置相机、拍摄照片(通常采用压缩格式,因此需要 Blob),然后恢复 MediaStreamTrack。从本质上讲,这意味着 takePhoto() 可使用相机的完整静态图片分辨率功能。以前,您只能通过对 canvas 元素调用 drawImage() 并使用视频作为来源来“拍照”(如此处的示例所示)。

如需了解详情,请参阅 README.md 部分

在此演示中,<canvas> 尺寸设置为视频流的分辨率,而 <img> 的自然大小为相机的最大静态图片分辨率。当然,CSS 用于设置这两者的显示大小。

您可以使用 PhotoCapabilities.imageHeightimageWidthMediaSettingsRange 值获取和设置静态图片的所有可用相机分辨率。请注意,getUserMedia() 的最小和最大宽度和高度约束条件适用于视频,这可能与静态图片的相机功能不同(如前所述)。换句话说,从 getUserMedia() 保存到画布时,您可能无法使用设备的完整分辨率功能。WebRTC 分辨率约束条件演示展示了如何为分辨率设置 getUserMedia() 约束条件。

还想执行任何其他步骤吗?

  • Shape Detection API 与 Image Capture 搭配使用效果出色:可以重复调用 grabFrame(),将 ImageBitmap 馈送到 FaceDetectorBarcodeDetector。如需详细了解该 API,请参阅 Paul Kinlan 的博文

  • PhotoCapabilities 中的 FillLightMode 可用于访问相机闪光灯(设备灯),但MediaTrackCapabilities 中则包含手电筒模式(闪光灯常亮)。

演示和代码示例

支持

  • Android 和桌面设备上的 Chrome 59。
  • 搭载 Android 和桌面版 Chrome Canary 59 之前的版本,且已启用实验性 Web 平台功能。

了解详情