Video 摄像头

avue-video 获取本机摄像头流，支持录像和截取当前画面。摄像头需要浏览器许可与可用的安全上下文，首次连接可能失败，业务应处理错误状态。

效果预览可直接操作下方示例

示例关闭自动连接，点击“开始录制”后才请求摄像头；成功停止后提供本地视频预览。此页面不会上传录制内容。

正在加载示例…

<template>
  <el-space wrap>
    <el-button type="primary" :loading="connecting" :disabled="recording" @click="start">开始录制</el-button>
    <el-button type="danger" :disabled="!recording" @click="video?.stopRecord()">停止录制</el-button>
    <el-button :disabled="!ready" @click="photo = video?.takePhoto() || ''">截取画面</el-button>
  </el-space>
  <avue-video ref="video" width="100%" :auto-start="false" :audio="false"
              @ready="ready = true" @record-start="recording = true" @record-stop="recording = false"
              @video-error="handleError" @data-change="handleData" />
  <el-alert v-if="error" :title="error" type="error" :closable="false" />
  <p v-if="result">录制结果（{{ size }} 字节）：</p>
  <video v-if="result" :src="result" controls class="video-demo-result" />
  <img v-if="photo" :src="photo" class="video-demo-result" alt="摄像头当前画面截图" />
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue'
const video = ref(null)
const connecting = ref(false)
const recording = ref(false)
const ready = ref(false)
const error = ref('')
const result = ref('')
const photo = ref('')
const size = ref(0)
let disposed = false
onBeforeUnmount(() => { disposed = true })
async function start() {
  connecting.value = true
  error.value = ''
  try { await video.value?.startRecord() }
  catch (cause) { if (!disposed) handleError(cause) }
  finally { if (!disposed) connecting.value = false }
}
function handleError(cause) {
  error.value = cause.message || '摄像头连接失败'
  ready.value = false
  recording.value = false
}
function handleData(data, blob) {
  result.value = data
  size.value = blob.size
}
</script>

<style scoped>
.video-demo-result { display: block; width: 100%; max-width: 520px; margin-top: 12px; border-radius: 8px; }
</style>

Props

参数	说明	类型	默认值
width / height	显示尺寸，推荐数字或百分比；未设高度时按比例	number / string	500 / ''
aspectRatio	宽高比	number / string	16 / 9
autoStart	挂载后自动初始化摄像头，初始化并不等于开始录像	boolean	true
autoplay / muted	自动播放摄像头流 / 本地播放静音	boolean	true
video / audio	传给 getUserMedia 的视频 / 音频约束	boolean / object	true / false
mimeType	录制格式，需浏览器 MediaRecorder 支持	string	自动选择
mirror	镜像显示预览	boolean	false
background	显示在视频上方的引导图片	string	—
showBorder / showStatus	显示四角边框 / 状态提示	boolean	true

muted 只控制预览静音，录音需另设 audio。mirror 是显示效果，不改变实际拍照或录像数据。修改采集约束后可调用 retry() 重新连接。

Events

事件	参数	说明
ready	MediaStream	摄像头和录像实例就绪
video-error	Error	初始化或视频流播放失败
record-start / record-stop	无	录像开始 / 结束
status-change	loading / ready / recording / error	当前状态
data-change	dataUrl, blob	停止录像后异步取得录制结果
photo-change	图片 Data URL	拍照成功

stopRecord 返回后文件读取仍可能进行中，应在 data-change 处理完整视频结果，不要在点击停止时立即假定数据已就绪。

Methods 与 Slots

方法	返回值	说明
init() / retry()	Promise<boolean>	初始化或重连，成功返回 true
startRecord()	boolean 或 Promise<boolean>	未就绪时先初始化，推荐统一 await
stopRecord()	boolean	请求停止当前录制
getData()	Promise<string 或 null>	读取已有视频 Blob 为 Data URL；停止后已自动调用
takePhoto(type?, quality?)	string 或 null	截取当前帧，默认 image/png
getRecord()	string 或 null	旧方法名，等同于 PNG 拍照，不是获取录像
destroyVideo()	无	停止并释放摄像头资源；组件卸载时自动执行

overlay 插槽参数为 { ready, recording, error }，用于视频上层提示或业务控件。