vue 调用本地摄像头

要在 Vue 中调用本地摄像头，可以使用 WebRTC 技术实现。WebRTC 是一个开放的项目，提供了一些 JavaScript API，可以在浏览器中实现实时通信，包括视频和音频通信。以下是基本的步骤：

1. 在 Vue 项目中引入 WebRTC 相关的 JavaScript 库，例如 webrtc-adapter 或 simplewebrtc。

2. 在 Vue 组件中创建一个 video 标签，用于展示摄像头捕捉的画面。

3. 使用 getUserMedia API 获取本地摄像头的权限，并将视频流绑定到 video 标签上。

4. 可以在 Vue 组件中添加一些控制按钮，例如开始、暂停、停止等，实现对摄像头的控制。

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

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

<script>
export default {
  data() {
    return {
      stream: null,
      video: null,
    }
  },
  mounted() {
    this.video = this.$refs.video
  },
  methods: {
    async start() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true })
        this.video.srcObject = this.stream
        this.video.play()
      } catch (error) {
        console.log('获取摄像头权限失败：', error)
      }
    },
    pause() {
      this.video.pause()
    },
    stop() {
      this.video.pause()
      this.video.srcObject = null
      this.stream.getTracks()[0].stop()
    },
  },
}
</script>

需要注意的是，getUserMedia API 可能会在不同的浏览器中有不同的兼容性问题，需要做好兼容性处理。