公众号vue页面调用手机摄像头扫码

公众号vue页面调用手机摄像头扫码功能，需要使用vue的相关组件和插件。首先，需要使用vue-router进行路由控制，将扫码页面添加到路由中。在扫码页面中，需要使用Vue Quagga组件，该组件是基于QuaggaJS开发的二维码扫描器，能够轻松地在移动设备上运行。同时，还需要使用vue-web-cam组件实现调用手机摄像头的功能。该组件支持通过getUserMedia API调用前置或后置相机，并可以实时预览相机画面。具体实现过程如下：

1. 安装Vue Quagga和vue-web-cam插件

通过npm安装Vue Quagga和vue-web-cam插件：

npm install vue-quagga vue-web-cam

2. 在扫码页面中引入组件

在扫码页面的Vue组件中，引入Vue Quagga组件以及vue-web-cam组件：

import VueQuagga from 'vue-quagga'
import VueWebCam from 'vue-web-cam'

export default {
  components: {
    VueQuagga,
    VueWebCam
  }
  // ...
}

3. 在扫码页面中添加Quagga配置项

在扫码页面的Vue组件中，添加Quagga的配置项，并设置回调函数处理扫码结果。例如：

<template>
  <div>
    <vue-web-cam ref="webcam" width="100%" :videoConstraints="{facingMode:'environment'}"></vue-web-cam>
    <vue-quagga v-if="showCamera" :config="quaggaConfig" @detect="detectHandler"></vue-quagga>
  </div>
</template>

<script>
export default {
  data () {
    return {
      quaggaConfig: {
        inputStream: {
          name: "Live",
          type: "LiveStream",
          constraints: {
            width: {min: 640},
            height: {min: 480},
            facingMode: "environment"
          }
        },
        decoder: {
          readers: ['ean_reader', 'upc_reader']
        },
        locate: true
      },
      showCamera: true
    }
  },
  methods: {
    detectHandler (result) {
      console.log(result.codeResult.code)
    }
  }
}
</script>

4. 在扫码按钮点击事件中开始调用摄像头

在扫码按钮的点击事件中，使用Vue Web Cam组件的start()方法开始调用前置摄像头：

<template>
  <div>
    <button @click="startScan">开始扫码</button>
    <vue-web-cam ref="webcam" width="100%" :videoConstraints="{facingMode:'environment'}"></vue-web-cam>
    <vue-quagga v-if="showCamera" :config="quaggaConfig" @detect="detectHandler"></vue-quagga>
  </div>
</template>

<script>
export default {
  data () {
    return {
      quaggaConfig: {
        // ...
      },
      showCamera: false
    }
  },
  methods: {
    startScan () {
      this.showCamera = true
      this.$refs.webcam.start()
    },
    detectHandler (result) {
      console.log(result.codeResult.code)
    }
  }
}
</script>

至此，公众号vue页面调用手机摄像头扫码功能已经实现。用户在点击页面上的扫码按钮后，会弹出调用前置摄像头的提示框，扫码识别成功后会将结果输出到控制台上。