给我用Vue 用 写一段 调用PC 摄像头 的代码

由于Vue本身并不支持操作硬件设备，需要借助第三方库来实现调用PC摄像头的功能，例如WebRTC和getUserMedia API。

以下是一个基于WebRTC和Vue的调用PC摄像头的示例代码：

HTML模板：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="start">开始摄像</button>
    <button @click="stop">停止摄像</button>
  </div>
</template>

Vue组件代码：

<script>
export default {
  data() {
    return {
      stream: null,
    };
  },
  methods: {
    async start() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
        this.$refs.video.srcObject = this.stream;
      } catch (error) {
        console.error(error);
      }
    },
    stop() {
      this.$refs.video.pause();
      this.stream.getTracks().forEach(track => track.stop());
    },
  },
};
</script>

该示例中，我们在<video>标签中使用了autoplay属性，以便在调用摄像头后自动播放摄像头的数据流。使用navigator.mediaDevices.getUserMedia()方法获取用户媒体设备，其中{ video: true }表示获取视频流。通过将获取到的流传递给<video>标签的srcObject属性，即可将视频流绑定到该标签上。

在停止摄像时，我们需要暂停<video>标签的播放，同时关闭摄像头设备。我们可以通过遍历获取到的流中的tracks属性来获取所有轨道，并调用每个轨道的stop()方法来关闭设备。

需要注意的是，由于getUserMedia API需要获取用户权限，因此该代码需要在https协议下运行。如果需要在本地环境中测试，可以使用localhost作为域名