vue在调用摄像头扫码(vue-qrcode-reader)

原创

已于 2025-02-28 19:10:13 修改 · 1.8w 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-09-12 22:59:48 首次发布

本文介绍了如何在Vue项目中使用vue-qrcode-reader组件进行二维码扫描。通过QrcodeStream、QrcodeDropZone和QrcodeCapture三种方式实现摄像头扫码、图片拖放识别和拍照识别二维码。在iOS设备上可能出现TypeError错误，但可以通过errorCaptured处理。QrcodeCapture提供了选择原生拍照或图片上传的选项，尽管图片识别的准确性可能较低。

1. vue-qrcode-reader

在浏览器端html中有一款依赖可以直接调用摄像头扫码，vue-qrcode-reader。
分别提供QrcodeStream、QrcodeDropZone、QrcodeCapture用来识别二维码。

QrcodeStream：调用摄像头扫码
QrcodeDropZone：将图片移到识别区域内识别二维码
QrcodeCapture：选择原生拍照或者图片到浏览器识别二维码。

2. 安装

npm install vue-qrcode-reader

3. QrcodeStream直接调用摄像头扫码

init方法是初始化调用摄像头，此时如果摄像头报错会有很多提示，请酌情处理
decode方法，当识别到二维码会把识别信息触发出来

<template>
  <div>
    <p class="error">{
  
  { error }}</p>

    <p class="decode-result">Last result: <b>{
  
  { result }}</b></p>

    <qrcode-stream @decode="onDecode" @init="onInit" />
  </div>
</template>

<script>
import {
     
      QrcodeStream } from 'vue-qrcode-reader'

export default {
     
     

  components: {
     
      QrcodeStream