Vue3调取电脑摄像头，并完成拍照功能

<template>
  <!-- 主页面容器，红色背景，居中显示 -->
  <div ref="wrapper" class="w-full h-full bg-red flex flex-col items-center">
    <!-- 视频元素容器 -->
    <video ref="videoEl" />
    <!-- 拍摄按钮 -->
    <div
      @click="shoot"
      class="w-100px leading-100px text-center bg-black text-30px"
      style="cursor: pointer;"
    >
      拍摄
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";

//使用 ref 对象来获取 DOM 元素
const wrapper = ref<HTMLDivElement>();
const videoEl = ref<HTMLVideoElement>();

// 存储拍摄后的图片路径
const imageUrl = ref<string | null>(null);

// 检查摄像头并设置视频流
async function checkCamera() {
  // 获取媒体设备信息
  const navigator = window.navigator.mediaDevices;
  //判断用户是否拥有摄像头
  const devices = await navigator.enumerateDevices();

  // 如果存在媒体设备，获取摄像头视频流
  if (devices) {
    // 请求用户媒体设备（摄像头）
    const stream = await navigator.getUserMedia({
      audio: false,
      video: {
        width: 300, // 设置视频宽度
        height: 300, // 设置视频高度
        facingMode: "user", // 使用前置摄像头
      },
    });

    // 如果视频元素存在，将视频流绑定到视频元素上并开始播放
    if (videoEl.value) {
      videoEl.value.srcObject = stream;
      videoEl.value.play();
    }
  }
}

// 拍摄函数，截取摄像头当前帧并显示在页面上
// 拍摄函数，截取摄像头当前帧并显示在页面上
function shoot() {
  // 检查视频元素和页面容器是否存在
  if (!videoEl.value || !wrapper.value) return;

  // 创建一个画布元素，设置画布尺寸为视频流的尺寸
  const canvas = document.createElement("canvas");
  canvas.width = videoEl.value.videoWidth;
  canvas.height = videoEl.value.videoHeight;

  // 获取画布上下文对象
  const ctx = canvas.getContext("2d");

  // 绘制当前视频帧到画布上
  ctx?.drawImage(videoEl.value, 0, 0, canvas.width, canvas.height);

  // 将画布内容转为 Base64 数据
  const imageDataUrl = canvas.toDataURL("image/png");

  // 存储图片路径
  imageUrl.value = imageDataUrl;

  // 创建一个图片元素
  const imageElement = new Image();
  
  // 将 Base64 数据设置为图片的 src 属性
  imageElement.src = imageDataUrl;

  console.log(imageElement,'图片路径');

  // 将图片元素添加到页面容器中
  wrapper.value.appendChild(imageElement);
}



// 在组件挂载后执行检查摄像头的操作
onMounted(() => {
  checkCamera();
});
</script>

代码注释写的都比较详细，下面是展示图片