ZXing库实现扫描二维码_js扫描二维码插件 zxing

为什么要使用ZXing？

因为在用uniapp的scan时扫描二维码在h5端不适用，因此h5端需要自己引入三方库，我这里用的是zxing完整代码在最后

一、引入ZXing

有两种引入方法，npm引入和js文件直接引入

npm add @zxing/library

import { BrowserMultiFormatReader } from '@zxing/library'

 js引入

地址：https://unpkg.com/@zxing/library@latest/umd/index.min.js

import { BrowserMultiFormatReader } from '@/utils/zxing.js'

二、功能实现

直接使用ZXing提供的方法就行，如果需要更改视频清晰度等等，请参考官方文档

1.获取摄像头

// 这里的处理是因为uniapp会对video标签进行二次封装，vue的话直接用ref获取dom就行
  var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0]
  video.setAttribute('id', 'video_id')
  video.setAttribute('class', 'video_calss')
  codeReader.value = new BrowserMultiFormatReader();
  codeReader.value.listVideoInputDevices().then(res => {
    if (res.length > 0) {
      videoInputDevices.value = res
      // 这里默认选择最后一个摄像头
      deviceId.value = res[res.length - 1].deviceId
    } else {
      // 没有可用的摄像头
      // todo
    }
  }).catch(err => {
    console.error(err)
  })

2.扫描

try {
    codeReader.value.decodeFromVideoDevice(deviceId.value, 'video_id', (res, err) => {
      if (res) handleScanningResult(res)
    })
  } catch (err) {
    uni.showToast({ title: `初始化失败${err}`, icon: 'none' });
  }

3.完整代码

<template>
  <view class="camera_page">
    <view class="camera_content">
      <view class="code_close" @click="closeClick()">
        <!-- <img src="../../static/close.png"> -->
      </view>
      <view class="loop_line"></view>
      <view class="video_nav">
        <video id="video_nav_id" autoplay :controls="false"></video>
      </view>
    </view>
  </view>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { BrowserMultiFormatReader } from '@zxing/library' //npm引入
// import { BrowserMultiFormatReader } from '@/utils/zxing.js' //直接引入js文件
const codeReader = ref(null)
const deviceId = ref(null)
const videoInputDevices = ref([])
const initEvent = () => {
  // 这里的处理是因为uniapp会对video标签进行二次封装，如果是Vue的话直接获取video标签
  var video = document.getElementById('video_nav_id').getElementsByTagName('video')[0] // uniapp
  // var video = document.getElementById('video_nav_id') //Vue
  video.setAttribute('id', 'video_id')
  video.setAttribute('class', 'video_calss')
  codeReader.value = new BrowserMultiFormatReader();
  codeReader.value.listVideoInputDevices().then(res => {
    if (res.length > 0) {
      videoInputDevices.value = res
      // 这里默认选择最后一个摄像头
      deviceId.value = res[res.length - 1].deviceId
    } else {
      // 没有可用的摄像头
      // todo
    }
  }).catch(err => {
    console.error(err)
  })
  startScanning()
}
onLoad(() => {
  setTimeout(() => {
    initEvent();
  }, 3000);
});
const startScanning = () => {
  try {
    codeReader.value.decodeFromVideoDevice(deviceId.value, 'video_id', (res, err) => {
      if (res) handleScanningResult(res)
    })
  } catch (err) {
    uni.showToast({ title: `初始化失败${err}`, icon: 'none' });
  }
}
const handleScanningResult = (res) => {
  // 这里处理扫描结果
  console.log(res.text)
}
// 停止扫描
const stopScanning = () => {
  codeReader.value.reset()
}
const closeClick = () => {
  // todo
}
</script>
<style scoped lang="scss">
.camera_page {
  height: 100vh;
  width: 100vw;
}
 
.camera_content {
  height: 100%;
  width: 100%;
  position: relative;
}
 
.code_close {
  height: 50rpx;
  width: 50rpx;
  position: absolute;
  left: 30rpx;
  top: 30rpx;
  z-index: 999999;
}
 
.code_close>img {
  height: 100%;
  width: 100%;
  display: block;
}
 
.loop_line {
  height: 3px;
  width: 80%;
  background-color: aliceblue;
  border-radius: 50%;
  box-shadow: 1px -4px 25px 7px rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  animation: myfirst 3s infinite;
  z-index: 999999;
}
 
@keyframes myfirst {
  from {
    top: 20%;
  }
 
  to {
    top: 80%;
  }
}
 
.video_nav {
  height: 100%;
  width: 100%;
}
 
#video_nav_id {
  height: 100%;
  width: 100%;
}
 
:deep(.uni-video-cover) {
  display: none;
}
</style>

注意

摄像头权限需要https协议才能调用