拍摄照片和控制相机设置

Miguel Casas-Sanchez
Twitter GitHub
萨姆·达顿
弗朗索瓦·博福
François Beaufort
GitHub

Image Capture 是一个用于拍摄静态图像和配置相机硬件设置的 API。Android 版和桌面版 Chrome 59 中提供此 API。我们还发布了 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);
}

您可以从开发者工具控制台中试用此代码。

捕获

可以通过两种方式拍摄：全帧拍摄和快速拍摄。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));

正在配置

您可以通过预览 MediaStreamTrack 的 applyConstraints() 限制条件来配置“实时”相机设置，例如：

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.imageHeight 和 imageWidth 的 MediaSettingsRange 值来获取和设置静态图片的所有可用相机分辨率。请注意，getUserMedia() 的最小和最大宽度和高度限制是针对视频的，其（如前所述）可能与静态图片的摄像头功能不同。换言之，从 getUserMedia() 保存到画布时，您可能无法使用设备的完整分辨率功能。WebRTC 分辨率限制演示展示了如何为分辨率设置 getUserMedia() 约束条件。

想执行其他步骤吗？

  • Shape Detection API 可与图片拍摄功能完美配合：您可以重复调用 grabFrame()，以将 ImageBitmap 馈送给 FaceDetector 或 BarcodeDetector。如需详细了解该 API，请参阅 Paul Kinlan 的博文。

  • 相机闪光灯（设备指示灯）可通过 PhotoCapabilities 中的 FillLightMode 进行访问，但您可以在 MediaTrackCapabilities 中找到手电筒模式（闪光灯始终开启）。

演示和代码示例

支持

  • Android 和桌面设备上的 Chrome 59。
  • 版本 59 之前的 Android 版和桌面设备版 Chrome Canary 版，启用了实验性网络平台功能。

了解详情