当前位置: 首页 > news >正文

html5-qrcode前端打开摄像头扫描二维码功能

实现的效果如图所示,全屏打开并且扫描到二维码后弹窗提醒,主要就是使用html5-qrcode这个依赖库,html5-qrcode开源地址:GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

使用文档:Getting started | ScanApp

安装依赖:

pnpm install --save-dev html5-qrcode

弹窗提示我用的vant这个ui库,开源地址:GitHub - youzan/vant: A lightweight, customizable Vue UI library for mobile web apps.

然后在项目中使用,我使用的是vue:

<template>
    <div class="scanCode">
        <div id="reader"></div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
import { Html5Qrcode } from 'html5-qrcode'

const codeContent = ref('1024')

// This method will trigger user permissions
Html5Qrcode.getCameras()
    .then((devices) => {
        // console.log(devices)
        const html5QrCode = new Html5Qrcode('reader')
        const width = window.innerWidth
        const height = window.innerHeight
        const aspectRatio = width / height
        const reverseAspectRatio = height / width

        const mobileAspectRatio =
            reverseAspectRatio > 1.5
                ? reverseAspectRatio + (reverseAspectRatio * 12) / 100
                : reverseAspectRatio
        if (devices && devices.length) {
            // .. use this to start scanning.
            html5QrCode
                .start(
                    { facingMode: { exact: 'environment' } },
                    {
                        fps: 10, // Optional, frame per seconds for qr code scanning
                        aspectRatio: aspectRatio + 1,
                        qrbox: { width: 250, height: 250 }, // Optional, if you want bounded box UI
                        videoConstraints: {
                            facingMode: 'environment',
                            aspectRatio:
                                width < 600 ? mobileAspectRatio : aspectRatio,
                        },
                    },
                    (decodedText, decodedResult) => {
                        // do something when code is read
                        console.log('decodedText', decodedText)
                        // console.log('decodedResult', decodedResult)
                        codeContent.value = decodedText
                        showToast(decodedText)
                    },
                    (errorMessage) => {
                        // parse error, ignore it.
                        // console.log('parse error, ignore it.', errorMessage)
                    }
                )
                .catch((err) => {
                    // Start failed, handle it.
                    console.log('Start failed, handle it.')
                })
        }
    })
    .catch((err) => {
        // handle err
        console.log(err)
    })
</script>

<style lang="scss" scoped>
.scanCode {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0);

    #reader {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
}
</style>

http://www.dtcms.com/a/80363.html

相关文章:

  • 【嵌入式学习】时钟 - 边缘触发锁存器
  • C# 零基础入门篇(19.DateTime 使用指南)
  • 【动态规划篇】91. 解码方法
  • Arduino示例代码讲解:Pitch follower 跟随
  • 舞狮表演(dp)
  • 基于32单片机的无人机直流电机闭环调速系统设计
  • xpath轴
  • git 子模块的使用
  • EMQX安装与配置
  • java项目之基于ssm的疫苗预约系统(源码+文档)
  • 基于分类算法的学习失败预警(上)
  • 力扣热题100(方便自己复习,自用)
  • 利用ffmpeg库实现音频Opus编解码
  • 车载以太网网络测试-18【传输层-DOIP协议-1】
  • PyTorch模型转ONNX例子
  • 深入探究 JVM 堆的垃圾回收机制(一)— 判活
  • python3 -m http.sever 8080加载不了解决办法
  • 6个常见的Python设计模式及应用场景
  • Python实战:开发经典猜拳游戏(石头剪刀布)
  • MySQL事务全解析:从概念到实战
  • 【CXX-Qt】2.1.1 为 WebAssembly 构建
  • 汽车免拆诊断案例 | 2024 款路虎发现运动版车无法正常识别智能钥匙
  • Java EE 进阶:MyBatis
  • 【NLP】 11. 神经网络,线性模型,非线性模型,激活函数,感知器优化,正则化学习方法
  • SpringBoot配置文件加载优先级
  • 最大公约数(GCD)和最小公倍数(LCM)专题练习 ——基于罗勇军老师的《蓝桥杯算法入门C/C++》
  • 蓝桥杯2023年第十四届省赛真题-接龙数列
  • Linux后门程序工作原理的详细解释,以及相应的防御措施
  • c语言数据结构 双循环链表设计(完整代码)
  • Ubuntu版免翻墙搭建BatteryHistorian