用途:该技能为前端项目添加网页摄像头访问能力,提供预制的 React hook 来接入摄像头。
主要能力:通过 useCamera hook 暴露摄像头状态与控制方法,支持启动、停止摄像头,拍照并返回 File,切换前后摄像头,以及重试。返回状态包括 isActive(是否正在流式传输)、isSupported(浏览器是否支持,检测期间为 null)、error、isLoading、currentFacingMode。配置项包括 facingMode(user 为前置,environment 为后置)、width、height、quality(0-1)、format(image/jpeg、image/png、image/webp)。错误类型包括 permission、not-supported、not-found、unknown、timeout。
使用方式:hook 位于 @caffeinelabs/camera/hooks/useCamera.ts,不可修改。使用时从 @caffeineai/camera 导入 useCamera,将返回的 videoRef 绑定到 video 元素用于预览,canvasRef 绑定到 canvas 元素用于拍照(可隐藏)。
界面要求:摄像头预览时始终放置拍照按钮,打开摄像头时始终显示预览;桌面端不可切换摄像头,仅 environment 可用;需正确展示错误信息;摄像头完全初始化前按钮不可点击;预览需设置明确非零尺寸(固定高度、min-height 或宽高比容器)避免塌陷,并在不同屏幕尺寸下保持响应式(如 width:100% 配合稳定宽高比)。
限制:hook 不可修改;桌面端摄像头不支持切换;平台兼容性、收费与价格信息暂未提供。