github地址: https://github.com/mebjas/html5-qrcode
官网:https://scanapp.org/html5-qrcode-docs/
导入链接:https://unpkg.com/html5-qrcode

github上有详细的介绍,在框架支持中也有一些案例,可以点击链接去看不同的框架中,怎么去使用
在这里插入图片描述
上面的这些demo都是不能自定义的,使用的是Html5QrcodeScanner,在这里,想要自定义的话,使用的是Html5Qrcode
在开始之前,需要注意的是,你的访问链接需要是https开头,如果不是的话,是不能使用webRTC的,也就没有获取摄像头的权限了。(ps:如果没有自己的服务器,vue项目配置devserve里的https=true,访问链接也可以使用https开头了,这时候,也可以在手机上使用了)
我这里的demo并没有使用任何的框架,但其实大多数都是一个操作,变通一下就可以了。
html

    <p id="nihao"></p>
    <button onclick="getCameras()">扫码</button>
    <div class="qrcode">
        <div id="reader"></div>
    </div>

js

	let html5QrCode = null;
	// 获取摄像头权限
	const getCameras = () => {
        Html5Qrcode.getCameras()
            .then((devices) => {
            	// 返回的是你的摄像设备列表,手机有两个摄像头,电脑返回一个摄像头
            	// 初始化扫描程序,在这里需要传递标签的id,第二个参数用来控制识别类型(没用过)
                html5QrCode = new Html5Qrcode("reader");
                start();
            })
            .catch((err) => {
                html5QrCode = new Html5Qrcode("reader")
            })
    }
    // 开始扫描相机给的二维码
    const start = () => {
        document.querySelector('button').style.display = 'none';
        html5QrCode.start(
            // environment后置摄像头 user前置摄像头 也可以传递获取摄像头时的id
            // 也可以是这样的{ deviceId: { exact: cameraId} }
            { facingMode: "environment" },
            {
                fps: 20, // 可选,每秒帧扫描二维码
                qrbox: { width: 250, height: 250 }, // 可选,如果你想要有界框UI
                aspectRatio: 1.777778 // 可选,视频馈送需要的纵横比,(4:3--1.333334, 16:9--1.777778, 1:1--1.0)传递错误的纵横比会导致视频不显示
            },
            (decodedText, decodedResult) => {
            	// 成功的回调函数
                document.getElementById('msg').innerText = decodedText;
                stop();
            })
            // 这里应该还有一个错误回调函数(没有识别到的时候会执行,太频繁了,没写)
    }
    // 停止摄像头
    const stop = () => {
        html5QrCode.stop()
        	.then((suc) => {
            	console.log("关闭摄像头")
        	})
	        .catch((err) => {
	            console.log("关闭摄像头的时候报错了")
	        })
    }

css

    * {
        padding: 0;
        margin: 0;
    }
    html,
    body {
        height: 100%;
    }
    p {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 4;
    }
    button {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .qrcode {
        display: flex;
        top: 0;
        left: 0;
        height: 100vh;
    }

    #reader {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    #reader video {
        height: 100%;
        width: 100%;
        display: block;
        object-fit: cover;
    }
下面是官网对Html5Qrcode的方法介绍

constructor:https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode#constructor
start:https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode#start
stop:https://scanapp.org/html5-qrcode-docs/docs/apis/classes/Html5Qrcode#stop

中途遇到了一个小错误(关于IOS和Android)

在使用的时候,我把js下载下来,放到服务器了,这里我的html导入包的链接是 http://~~~/html5-qrcode.js,然后发现Android可以用,IOS不能用,IOS不会弹出要获取摄像头的提示,这时候,只要把导入的js文件改成https开头就好了

更多推荐