首页 前端知识 create-react-app依赖html5-qrcode实现打包apk调用手机摄像头进行扫码(二维码、条形码)

create-react-app依赖html5-qrcode实现打包apk调用手机摄像头进行扫码(二维码、条形码)

2024-08-14 22:08:59 前端知识 前端哥 412 520 我要收藏

一、引入依赖(我的版本^2.3.8)

npm i html5-qrcode

二、编写扫码组件

import React, {useEffect, useState} from "react";
import {Html5Qrcode} from "html5-qrcode";
import {Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";

const BarcodeScanner = () => {
    const navigate = useNavigate();
    const [barCode,setBarCode] = useState(null)
    useEffect(() => {
        //如果状态有值,返回上一页面,防止触发重复扫描的bug
        if (barCode){
            sessionStorage.setItem("barCode",JSON.stringify(barCode))
            navigate(-1)
            return
        }
        sessionStorage.removeItem("barCode")//每次进入扫码组件清空一次临时缓存
        const html5QrCode = new Html5Qrcode('reader');//渲染容器
        const timer2 = setInterval(()=>{
            html5QrCode.start(
                // { facingMode: "user" }, //前置摄像头
                {
                    facingMode: "environment" //后置摄像头
                },
                {
                    fps: 10,
                    qrbox: 250,
                    torch: true // 设置允许开启手机手电筒,貌似没用
                },
                qrCodeMessage => {
                    if (qrCodeMessage) {
                        //扫描成功,记录到临时缓存中。因为设置状态会有状态更新问题,导致返回上一级页面无数据
                        setBarCode(barCode)//扫描成功,设置状态值
                        Toast.show({content: "扫描成功!"})
                        sessionStorage.setItem("barCode",JSON.stringify(qrCodeMessage))
                        navigate(-1)//返回上一页面,从哪里来,回哪里去
                    }
                },
                errorMessage => {
                    //错误->提示
                    Toast.show({content: "提示:请对准二维码/条形码!", position: "bottom"})
                }
            );
        },500)
        return () => {
            html5QrCode.stop();//停止扫描
            clearInterval(timer2)
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return <div id="reader"></div>;//创建一个容器
};

export default BarcodeScanner;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15633.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!