vue h5 浏览器 获取摄像头

在Vue.js中，要让H5页面在浏览器上获取摄像头，你可以使用HTML5的`<video>`标签和`getUserMedia`接口来实现。以下是简单的步骤：

1. **HTML部分**:

<!-- 使用Video标签 -->
<template>
  <div id="camera-container">
    <button @click="toggleCamera">Toggle Camera</button>
    <video id="video" width="300" height="200"></video>
  </div>
</template>

2. **JavaScript (Vue组件内)**:

<script>
export default {
  data() {
    return {
      isCameraOn: false,
    };
  },
  methods: {
    toggleCamera() {
      if (!this.isCameraOn) {
        this.getCamera();
      } else {
        this.stopCamera();
      }
    },
    getCamera() {
      // 调用getUserMedia
      const constraints = { video: true };
      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          this.video.srcObject = stream;
          this.isCameraOn = true;
        })
        .catch(error => console.error('Error accessing camera:', error));
    },
    stopCamera() {
      this.video.srcObject = null;
      this.isCameraOn = false;
    },
  },
};
</script>

3. **注意点**:
- 确保你的项目运行在HTTPS协议下，因为`getUserMedia`需要安全上下文（secure context）才能访问摄像头。
- 对于微信浏览器，可能需要额外集成微信JS-SDK来处理权限请求。