useCamera

访问和控制设备摄像头，支持前置/后置摄像头切换和分辨率设置。

前置依赖

依赖参数

参数名	类型	说明
deps.vue.ref	<T>(value: T) => Ref<T>	Vue ref 函数
deps.vue.onUnmounted	(fn: () => void) => void	Vue onUnmounted 钩子
deps.mediaDevices	MediaDevices	媒体设备 API

环境要求

浏览器 API: MediaDevices API

需要在 HTTPS 环境下使用，或在 localhost 开发环境中测试。

函数签名

function useCamera(
  deps: UseCameraDeps
): UseCameraReturn

interface UseCameraDeps {
  vue: VueCompositionAPI
  mediaDevices: MediaDevices
}

interface UseCameraReturn {
  isSupported: Ref<boolean>
  stream: Ref<MediaStream | null>
  isStarting: Ref<boolean>
  error: Ref<string | null>
  start: (options?: CameraOptions) => Promise<void>
  stop: () => void
}

interface CameraOptions {
  facingMode?: 'user' | 'environment'
  width?: number
  height?: number
}

参数

参数名	类型	必填	说明
deps	UseCameraDeps	是	依赖注入对象

返回值

属性	类型	说明
isSupported	Ref<boolean>	是否支持摄像头 API
stream	Ref<MediaStream | null>	媒体流对象
isStarting	Ref<boolean>	是否正在启动
error	Ref<string | null>	错误信息
start	(options?: CameraOptions) => Promise<void>	启动摄像头
stop	() => void	停止摄像头

摄像头选项

facingMode（摄像头方向）

• user - 前置摄像头（自拍）
• environment - 后置摄像头（拍照）

分辨率

常用分辨率：

• 640×480 - 标清
• 1280×720 - 高清 (720p)
• 1920×1080 - 全高清 (1080p)

工作原理

1. 检查浏览器是否支持媒体设备 API
2. 调用 getUserMedia 请求摄像头权限
3. 根据配置选项（方向、分辨率）获取媒体流
4. 将媒体流绑定到 video 元素进行预览
5. 组件卸载时自动停止摄像头并释放资源

媒体流可用于：

• 视频预览
• 拍照截图
• 视频录制
• 实时视频处理