无需登录 数据私有 本地保存

Image Capture API 演示 - 拍照并获取原始帧

多媒体 开发工具 Image Capture 拍照 演示
9
0
0
0

📸 Image Capture API 演示

拍照 · 抓取原始帧 · 像素级预览 · 需HTTPS/localhost

🔍 检测中...
--

选择操作模式

📷 拍照
takePhoto()
高质量Blob
⚡ 抓帧
grabFrame()
原始ImageBitmap
📋 实时信息
视频分辨率--
帧率--
轨道状态未激活
ImageCapture检测中...
闪光灯--
📷 takePhoto 结果 --
等待拍照...
分辨率：-- 大小：-- 格式：--
⚡ grabFrame 结果 --
等待抓帧...
分辨率：-- 类型：-- 像素(x,y)：--
🔧 Photo Capabilities（设备能力）

启动摄像头后自动检测...

📖 常见问题与知识点

Image Capture API 是 W3C 规范的浏览器原生接口，允许网页从摄像头获取高质量照片（takePhoto()）和实时原始帧（grabFrame()）。相比传统的 Canvas 截图方案，它能直接访问相机的原生拍照管线，支持闪光灯控制、曝光调节、白平衡等高级功能，拍出的照片分辨率通常远高于视频流分辨率。

takePhoto()：触发相机的完整拍照流程（含自动对焦、曝光调整），返回高质量 JPEG Blob，分辨率可达设备相机最大像素（如 12MP、48MP），适合用于拍照存档。可能伴有快门声。

grabFrame()：从视频流中即时抓取当前帧，返回 ImageBitmap 对象，分辨率等于视频轨道分辨率（通常 720p~1080p），速度极快（毫秒级），适合实时处理、连续帧提取、计算机视觉等场景。不触发拍照流程。

Image Capture API 在 Chrome 59+（桌面&安卓）中完整支持 takePhoto；Chrome 61+ 支持 grabFrame；Chrome 64+ 支持 getPhotoCapabilities/getPhotoSettings。Firefox 部分支持（需开启 flag）。Safari（含iOS）目前不支持 Image Capture API，但可使用 Canvas fallback 方案。所有现代浏览器均支持 getUserMedia 获取摄像头流。注意：必须在 HTTPS 或 localhost 环境下使用。

通过 getPhotoCapabilities() 检查设备是否支持闪光灯（fillLightMode 字段包含 'auto'/'off'/'flash'），然后在 takePhoto({ fillLightMode: 'flash' }) 中传入参数即可控制。注意：前置摄像头通常不支持闪光灯，桌面摄像头也不具备此能力。

ImageBitmap 是未压缩的像素数据，可直接高效绘制到 Canvas 上，也可通过 ctx.getImageData() 读取每个像素的 RGBA 值。典型应用场景：实时人脸检测、二维码扫描、颜色分析、图像滤镜、机器学习推理（配合 TensorFlow.js 等）、帧差分运动检测等。由于抓取速度极快，非常适合需要低延迟的实时处理场景。

视频流为了保持流畅（30fps+），分辨率通常限制在 720p~1080p。而 takePhoto() 绕过了视频编码管线，直接调用相机传感器的全分辨率捕获能力，因此能获得设备相机的最大像素（如 4032×3024）。这就是 Image Capture API 相比 Canvas 截图方案的核心优势——它访问的是相机硬件拍照管线，而非视频流帧。

Android Chrome 完整支持 Image Capture API，可使用前后摄像头切换、闪光灯控制等功能。iOS Safari 不支持 Image Capture API，但支持 getUserMedia 获取摄像头流，可使用 Canvas fallback 方案（从 video 元素绘制帧到 canvas 再导出）。本工具会自动检测 API 可用性并在不支持时启用 fallback 模式。

该方法返回设备相机的能力范围，包括：支持的闪光灯模式（fillLightMode）、图像宽度/高度范围（imageWidth/imageHeight 含 min/max/step）、曝光补偿范围（exposureCompensation）、支持的曝光模式（exposureMode）、白平衡模式（whiteBalanceMode）、对焦模式（focusMode）、ISO 范围等。这些信息可用于判断设备能力并在 UI 中动态显示可用选项。
🔧 相关工具