python & flask 的 web 手机二维码扫描（htm5-qrCode）

风尘无名

于 2024-05-25 10:41:04 发布

阅读量194

点赞数 4

分类专栏： Python & flask 文章标签： python flask 前端

本文链接：https://blog.csdn.net/zhouwuhua/article/details/139193863

版权

Python & flask 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注：此 web必须是 https 运行环境下，所以，可以先阅读 “python & flask 下的https实现 ” 一文；

mai.py
'''
登录主页;
'''
@app.route('/')
def index():
    # return render_template("index.html")
    return render_template("user_dataVisual.html")   // 临时测试；

if __name__ == "__main__":
    server = pywsgi.WSGIServer(('192.168.0.101',8080),app,keyfile='./static/cert/server.key',certfile='./static/cert/server.crt')
    server.serve_forever()

user_dataVisual.html （此html在template文件夹下，template与static、main.py在同一目录下，如下：

如下 ===》：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scan</title>
    <!-- <script src="https://unpkg.com/html5-qrcode"></script>   这种方式可以，但必须能上外网！！ -->
    <script  src="{{ url_for('static', filename = 'html5-qrcode.min.js') }}"></script>
    <!-- <script src="../static/html5-qrcode.min.js"></script>    ！！！这种导入方式没有用！！！ -->
    <style type="text/javascript">
        button {
            display: block;
            width: 100%;
            margin: 6px;
            outline: none;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: #26a2ff;
            text-align: center;
            border-radius: 4px;
            border: none;
            cursor: pointer;
        }

        #upload-input {
            opacity: 0;
            filter: alpha(opacity=0);
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        #upload-text {
            position: relative;
            bottom: 40px;
            user-select: none;
        }
    </style>
</head>

<body>
    <!-- 相机、文件方式同时只能使用一个,可根据自己需求修改,如:1.改成下拉框;2.改成tab;3.改成radio等等控制显示隐藏和相应逻辑 -->
    <button onclick="useCamera()">使用相机扫一扫方式</button>
    <button onclick="useLocal()">
        <input type="file" id="upload-input" accept="image/*" value="使用文件方式">
        <span id="upload-text">使用文件方式</span>
    </button>
    <div id="reader"></div>
    <h3 id="qr-reader-results"></h3>
    <script>


        //1.Html5QrcodeScanner是js提供的ui; 2.Html5Qrcode是自定义面板
        let html5QrCode = new Html5Qrcode("reader"); 
        let reader = document.getElementById("reader");
        let res = document.getElementById('qr-reader-results');
        let uploadInput = document.getElementById('upload-input');
        let config = { fps: 10, qrbox: { width: 300, height: 280 } }; //扫一扫相关设置

        var front = 1;

        //使用本地文件
        function useLocal() {
            reader.style.display = "none";
            res.innerText = "";
            uploadInput.addEventListener("change", (e) => {
                if (e.target.files.length == 0) {
                    return;
                }
                const imageFile = e.target.files[0];
                html5QrCode
                    .scanFile(imageFile, true)
                    .then((decodedText) => {
                        res.innerText = "扫码成功结果:\n" + decodedText;
                    })
                    .catch((err) => {
                        res.innerText = "扫码失败:\n" + error;
                    });
            });
        }

       //相机授权
        function useCamera() {
            reader.style.display = "block";
            res.innerText = "";
            Html5Qrcode.getCameras()
                .then((devices) => {
                    if (devices && devices.length) {
                        let cameraId = ""; 
                        alert('counts=>'+devices.length +', devices=> '+ JSON.stringify(devices))
                        for(var i=0;i<devices.length;i++){
                          var camera = devices[i];
                          if (camera["label"].toUpperCase().includes('BACK')){
                            cameraId = camera.id; //后置摄像头
                            break;
                          }
                        }
                        
                        if (cameraId) {
                            startWithCameraId(cameraId);
                        }
                    } else {
                        startWithoutCameraId();
                    }
                })
                .catch((err) => {
                    console.log("没有获取摄像头设备...");
                });
        }

        //带相机ID扫描
        function startWithCameraId(cameraId) {
            html5QrCode
                .start(
                    { deviceId: { exact: cameraId } },
                    config,
                    onScanSuccess,
                    onScanFailure
                )
                .catch((err) => {
                    console.log("通过摄像头扫码异常....", err);
                });
        }

        //不带相机ID扫描,允许传递约束来代替相机设备 ID
        function startWithoutCameraId() {
            //environment 表示后置摄像头  换成user则表示前置摄像头
            html5QrCode.start(
                { facingMode: "environment" } || {
                    facingMode: { exact: "environment" },
                },
                config,
                onScanSuccess,
                onScanFailure
            );
        }

        //扫码解析成功后按照自己的需求做后续的操作
        function onScanSuccess(decodedText, decodedResult) {
            res.innerText = "扫码成功结果:\n" + decodedText;
            alert(decodedText);
        }

        //扫码解析失败后按照自己的需求做后续的操作
        function onScanFailure(error) {
            res.innerText = "扫码失败:\n" + error;
        }
    </script>

</body>

</html>

注意：不是所有的浏览器都支持它，但safi 与 chrome是一定支持的！

而且扫描代码必须在

中, 在中无响应；

效果：