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

在 Vue3 + TypeScript 中调用摄像头可以使用 `navigator.mediaDevices.getUserMedia` 方法。这个方法会返回一个 Promise 对象，当用户允许使用摄像头时，它会返回一个 MediaStream 对象，你可以通过这个对象来操作摄像头。

下面是一个简单的示例代码：

async function startCamera() {
  // 获取视频流
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });

  // 获取视频元素
  const videoElement = document.getElementById('video') as HTMLVideoElement;

  // 将视频流绑定到视频元素上
  videoElement.srcObject = stream;

  // 播放视频
  videoElement.play();
}

在上面的代码中，我们首先使用 `navigator.mediaDevices.getUserMedia` 方法获取摄像头的视频流，然后将这个流绑定到一个视频元素上，最后播放视频。

注意：在使用摄像头之前，需要先获取用户的授权。在 Chrome 浏览器中，默认情况下只有在使用 HTTPS 协议或 localhost 时才能使用摄像头。如果你想在其他网站上使用摄像头，需要在浏览器地址栏中点击锁图标，然后选择“站点设置”，将摄像头权限设置为“允许”。