Vue 前置摄像头拍照 - 使用 getUserMedia 和 canvas

要调用前置摄像头并拍照，可以使用navigator.mediaDevices.getUserMedia方法获取视频流，然后将视频流显示到<video>元素中，并使用<canvas>元素进行拍照：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="takePhoto">拍照</button>
    <canvas ref="canvas" style="display:none;"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.startCamera();
  },
  methods: {
    async startCamera() {
      try {
        const video = this.$refs.video;
        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
        video.srcObject = stream;
      } catch (error) {
        console.error('无法获取摄像头：', error);
      }
    },
    takePhoto() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      
      // 设置canvas的宽高与video一致
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      
      // 将video当前帧绘制到canvas
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      
      // 将canvas转为Base64格式的图像数据
      const photo = canvas.toDataURL('image/png');
      
      // 可以将photo传给后端保存或其他操作
      console.log(photo);
    }
  }
};
</script>

在上述代码中，navigator.mediaDevices.getUserMedia方法用于获取视频流，通过{ video: { facingMode: 'user' } }参数可以指定使用前置摄像头。获取到视频流后，将其赋值给<video>元素的srcObject属性，即可在页面上显示摄像头的实时画面。

点击拍照按钮时，调用takePhoto方法，该方法将视频当前帧绘制到<canvas>元素中，并使用toDataURL方法将<canvas>转为Base64格式的图像数据。你可以将该数据传给后端保存或进行其他操作。