vue使用navigator.mediaDevices.getUserMedia调用相机功能

在Vue中使用navigator.mediaDevices.getUserMedia调用相机功能，你需要在组件的mounted生命周期钩子中获取相机流，并在beforeDestroy钩子中释放相机流。以下是一个简单的示例：

<template>
  <div>
    <video ref="video" autoplay></video>
  </div>
</template>
 
<script>
export default {
  name: 'CameraComponent',
  mounted() {
    this.startCamera();
  },
  beforeDestroy() {
    this.stopCamera();
  },
  methods: {
    startCamera() {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true })
          .then(stream => {
            this.$refs.video.srcObject = stream;
          })
          .catch(error => {
            console.error('Camera access error:', error);
          });
      }
    },
    stopCamera() {
      let stream = this.$refs.video.srcObject;
      if (stream) {
        stream.getTracks().forEach(track => {
          track.stop();
        });
      }
    }
  }
}
</script>

在这个例子中，<video>元素用于展示来自用户相机的实时视频流。当组件挂载时，startCamera方法会被调用，它尝试获取用户的相机，并将获取到的流赋值给<video>元素的srcObject属性。当组件销毁时，beforeDestroy钩子会被调用，stopCamera方法会释放相机流，以避免占用资源。