前端vue3+ts 怎么调用摄像头

要在Vue 3中使用摄像头，可以使用WebRTC API。以下是实现步骤：

1. 首先，我们需要使用`navigator.mediaDevices.getUserMedia`方法来请求用户的媒体设备访问权限。在这里，我们将请求访问摄像头。

2. 如果用户授予了权限，则可以使用`window.URL.createObjectURL`方法创建一个URL对象，该URL对象可以用于设置video元素的`srcObject`属性。

3. 最后，我们需要在Vue组件中使用video元素来显示摄像头的视频流。

下面是一个基本的Vue 3组件，用于显示摄像头视频流：

<template>
  <div>
    <video ref="video" autoplay></video>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  mounted() {
    this.setupCamera();
  },

  methods: {
    async setupCamera() {
      const video = this.$refs.video as HTMLVideoElement;
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = stream;
      } catch (error) {
        console.log(error);
      }
    }
  }
});
</script>

注意，上述代码中使用了`async/await`语法来异步获取用户媒体设备访问权限。如果用户拒绝了权限请求，将会抛出错误。因此，在上述代码中，我们使用了try-catch块来捕获这个错误。

还要注意的是，在使用`window.URL.createObjectURL`方法创建URL对象之后，我们需要在组件卸载时手动调用`window.URL.revokeObjectURL`方法来释放URL对象。这可以避免内存泄漏问题。