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

要在前端 Vue 3 + TypeScript 中调用摄像头，可以使用 WebRTC 技术。WebRTC 是一种网页实时通信技术，可以在不需要插件或其他软件的情况下，实现浏览器之间的音视频通信和数据传输。

以下是基本的步骤：

1. 在 Vue 3 中安装 WebRTC 库，例如 `vue-webrtc`。

2. 在页面中添加一个 video 标签，用于显示摄像头画面。

3. 在 TypeScript 中使用 navigator.mediaDevices.getUserMedia() 方法获取摄像头的视频流。

4. 将视频流绑定到 video 标签上。

以下是简单的示例代码：

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

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

export default defineComponent({
  name: 'Camera',
  components: { WebRTC },
  mounted() {
    // 获取摄像头视频流
    navigator.mediaDevices.getUserMedia({ video: true })
      .then((stream) => {
        // 将视频流绑定到 video 标签上
        const video = this.$refs.video as HTMLVideoElement;
        video.srcObject = stream;
      })
      .catch((err) => {
        console.log(err);
      });
  },
});
</script>

这只是一个简单的示例，实际上还需要处理一些错误和兼容性问题。同时，还可以通过 WebRTC 实现更多的功能，例如音频通信、屏幕共享等。