h5 前端扫描识别二维码 学不会你打我

环境

h5+vue3+js

功能描述

实现前端调起摄像头扫描二维码和条形码功能

工具

用到zxing/library插件

实现过程

一.安装

npm install @zxing/library
or
pnpm add  @zxing/library

二.html

    <button @click="openScan">扫描二维码</button>
    <video ref="video" id="video" class="scanVideo" autoplay></video> -->

一个按钮开启扫描功能 需要video来播放摄像头的画面

三.js

import { ref, onUnmounted, reactive } from 'vue'
import { BrowserMultiFormatReader } from '@zxing/library'
//引入zxing/library插件
const form = reactive({
  loadingShow: false,
  scanText: '',
  tipMsg: '尝试识别中...'
})
const codeReader = new BrowserMultiFormatReader() 
//实例化
const openScan = () => {
  //利用codeReader.getVideoInputDevices()的方法获取摄像头设备
  codeReader
    .getVideoInputDevices()
    .then(async (videoInputDevices) => {
      form.tipMsg = '正在调用摄像头...' // 提示信息
      // 默认获取第一个摄像头设备id
      let firstDeviceId = videoInputDevices[0].deviceId // 获取第一个摄像头设备的id
      // 获取第一个摄像头设备的名称
      const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label)// 获取第一个摄像头设备的名称
      if (videoInputDevices.length > 1) {
        // 判断是否后置摄像头
        if (videoInputDeviceslablestr.indexOf('back') > -1) {
          firstDeviceId = videoInputDevices[0].deviceId
        } else {
          firstDeviceId = videoInputDevices[1].deviceId
        }
      }
      decodeFromInputVideoFunc(firstDeviceId)//调用扫码方法传入摄像头设备的id
    })
    .catch((err) => {
      console.log(`失败出错： ${err}`)
    })
}

const decodeFromInputVideoFunc = (firstDeviceId) => {
  codeReader.reset() // 重置
  codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => { 
    //利用decodeFromInputVideoDeviceContinuously方法进行扫码video为video标签的id result为扫码结果 err为扫码失败的结果
    form.tipMsg = '正在尝试识别...' // 提示信息
    if (result) {
      console.log('扫描成功', result)
      form.scanText = result.text // 扫码结果
      codeReader.stopContinuousDecode() // 关闭扫码功能
    }
    if (err && !err) {
      form.tipMsg = '识别失败'
    }
  })
}
//销毁组件
onUnmounted(() => {
  codeReader.reset()
})

上图

样式什么的 我就不写了 功能可用亲测！！！