vue 调用手机摄像头

要调用手机摄像头，需要使用 HTML5 中的 getUserMedia API。在 Vue 中可以使用 vue-web-cam 插件来方便地调用摄像头。安装 vue-web-cam 插件后，可以在模板中使用以下代码调用摄像头：

<template>
  <div>
    <webcam :autoplay="true" :mirror="false" :playsinline="true"></webcam>
  </div>
</template>

其中，autoplay 表示是否自动播放视频，mirror 表示是否镜像显示摄像头画面，playsinline 表示是否在页面内播放视频。

在 JavaScript 中，可以使用以下代码获取摄像头视频流：

import Webcam from 'vue-web-cam';

// ...

export default {
  components: {
    Webcam
  },
  methods: {
    startCamera() {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then((stream) => {
          this.$refs.webcam.srcObject = stream;
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
}

// ...

<template>
  <div>
    <button @click="startCamera">Start Camera</button>
    <webcam ref="webcam"></webcam>
  </div>
</template>

在以上代码中，通过调用 getUserMedia 方法获取视频流并将其赋值给 Webcam 组件的 srcObject 属性。需要注意的是，在手机浏览器中，需要先触发用户的交互行为（如点击按钮）才能调用摄像头。