用预制 React hook 在网页中接入摄像头（拍照…

当需要在 React 应用中快速加入 Web 摄像头预览与拍照能力时，直接使用不可修改的预制 useCamera hook 并按其约束组织 UI。

适用场景

解决思路

1. 直接引入并调用预制 hook：从 `@caffeineai/camera` 导入 `useCamera`（其实现文件为 `@caffeinelabs/camera/hooks/useCamera.ts`，不可修改），不要自己重写相机逻辑。
2. 通过 `useCamera(config)` 传入 `CameraConfig` 配置：`facingMode`（'user' 前置 / 'environment' 后置）、`width`、`height`、`quality`（0-1，1 最高）、`format`（'image/jpeg' | 'image/png' | 'image/webp'）。
3. 在需要自动开启时传入 `autoStart: true`。
4. 从 hook 返回值中取用：`isActive`（是否正在推流）、`isSupported`（浏览器是否支持，检查中为 null）、`error`、`isLoading`、`currentFacingMode`、`startCamera`、`stopCamera`、`capturePhoto`、`switchCamera`、`retry`、`videoRef`、`canvasRef`。
5. 把 `videoRef` 绑定到 `<video>` 元素上作为预览，并设置 `playsInline` 和 `muted`。
6. 把 `canvasRef` 绑定到一个 `<canvas>` 元素用于拍照，并用 `style={{ display: 'none' }}` 隐藏它。
7. 渲染 `<video>` 时设置样式如 `style={{ width: '100%', height: 'auto' }}`。
8. 当 `isSupported === false` 时，渲染「Camera not supported」之类的提示而不是相机界面。
9. 当 `error` 不为空时，把 `error.message` 显示在界面上；hook 的错误类型包括 'permission' | 'not-supported' | 'not-found' | 'unknown' | 'timeout'，需在应用里妥善呈现。
10. 为各按钮设置 disabled 条件：Start Camera 用 `isLoading || isActive`；Stop Camera 用 `isLoading || !isActive`；Switch Camera 用 `isLoading || !isActive`；Take Photo 用 `!isActive`。
11. 在相机完全初始化、准备就绪之前，不要让相机相关按钮可点击。
12. 始终在相机预览区放置一个拍照（capture）按钮。
13. 用户打开相机时始终显示相机预览。
14. 在桌面端不要提供切换摄像头的功能，桌面端只有 'environment' 模式可用。
15. 保证预览有明确且非零的尺寸（固定高度、min-height，或外层 aspect-ratio 容器），避免布局塌陷导致预览不可见。
16. 让预览在不同屏幕尺寸下自适应，例如 `width: 100%` 配合稳定的宽高比。

适用边界 · 注意事项

• 项目未安装或无法使用 `@caffeineai/camera` / `@caffeinelabs/camera` 这套预制 hook 时，本做法不适用（需改为自行封装 getUserMedia）。
• 场景不需要真实摄像头采集（如仅上传本地图片、纯展示）时不要引入相机逻辑。
• 桌面端不要把切换前后摄像头当作可用能力暴露给用户，桌面端仅 'environment' 可用。