vue.js调用手机摄像头

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="startCamera">启动摄像头</button>
    <button @click="stopCamera">关闭摄像头</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stream: null
    };
  },
  methods: {
    async startCamera() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
        this.$refs.video.srcObject = this.stream;
      } catch (err) {
        console.error("无法访问摄像头", err);
      }
    },
    stopCamera() {
      if (this.stream) {
        const tracks = this.stream.getTracks();
        tracks.forEach(track => track.stop());
        this.$refs.video.srcObject = null;
      }
    }
  },
  beforeUnmount() {
    this.stopCamera();
  }
};
</script>