H5调用摄像头扫码识别（html5-qrcode）

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开头就好了