ImageCapture API：静态照片拍摄与相机参数

---

title: ImageCapture API：静态照片拍摄与相机参数

keywords:

• ImageCapture
• photoCapabilities
• takePhoto
• getPhotoSettings
• 媒体约束

description: 介绍 ImageCapture 的静态拍摄能力与相机参数读取/设置，结合 getUserMedia 构建拍照功能与能力适配，提供示例与兼容建议。

categories:

• 应用软件
• 编程开发

---

概述

ImageCapture 允许对视频轨拍摄静态照片，读取 photoCapabilities 与设置参数（如闪光/曝光），适合作为拍照功能的基础。需在安全上下文并处理权限与设备差异。

示例

const stream = await navigator.mediaDevices.getUserMedia({ video: true })
const track = stream.getVideoTracks()[0]
const ic = new ImageCapture(track)
const caps = await ic.getPhotoCapabilities()
const blob = await ic.takePhoto({ imageHeight: 1080 })
// 保存
const url = URL.createObjectURL(blob)

工程建议

• 能力适配：根据 photoCapabilities 与 getPhotoSettings 调整参数；处理不支持的选项。
• 资源与权限：在用户手势下启动；妥善释放轨与对象 URL；保护隐私。
• 兼容：不支持时回退到 <video> + Canvas 截帧；评估图像质量与性能。

参考与验证

• MDN ImageCapture 文档：https://developer.mozilla.org/docs/Web/API/ImageCapture
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/imagecapture/