以vue3为例：

<template>
    <div class="bg">
        <div class="videoFather" ref="videoFatherRef">
            <video autoplay ref="videoRef" />
        </div>

        <canvas ref="canvasRef" style="display: none;"></canvas>
        <button type="primary" @click="handleJieTu">开始认证</button>
    </div>
</template>

<script setup>

const videoRef = ref(null)
const canvasRef = ref(null)
const videoFatherRef = ref(null)
const route = useRoute()


// 截取认证
const handleJieTu = () => {
    const video = videoRef.value
    const canvas = canvasRef.value
    const ctx = canvas.getContext('2d')

    // 获取videoRef宽高
    const videoWidth = videoRef.value.videoWidth
    const videoHeight = videoRef.value.videoHeight

    // 设置canvas宽高
    canvasRef.value.width = videoWidth
    canvasRef.value.height = videoHeight

    // 这个方法有坑，记住
    ctx.drawImage(video, 0, 0, videoWidth, videoHeight)
    const img = canvas.toDataURL("image/png")//函数将画布的内容转换为数据base64。

    // 接口逻辑...
}

const initMediaDevices = () => {
    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
        videoRef.value.srcObject = stream;
    }).catch(error => {
        console.log('摄像头调用失败', error);
    })
}

onMounted(() => {
    initMediaDevices()
})
</script>