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:

javascript 复制代码
<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>
相关推荐
DoraBigHead3 分钟前
闭包全解与 V8 深潜
前端·javascript·面试
然我5 分钟前
浏览器是如何 “多开” 的?从进程到线程,拆解浏览器的并发逻辑
前端·javascript·面试
山河木马11 分钟前
前端学C++可太简单了:引用
前端·javascript·c++
江城开朗的豌豆13 分钟前
Vue 祖孙组件通信:3种实用方案,轻松搞定跨代传值!
前端·javascript·vue.js
独立开阀者_FwtCoder13 分钟前
Nginx 正式拥抱现代 JavaScript
前端·javascript·架构
独立开阀者_FwtCoder14 分钟前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js
江城开朗的豌豆19 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js
全宝21 分钟前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光26 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript
csj5029 分钟前
前端基础之《Vue(22)—安装MongoDB》
前端·vue