如何用html5-qrcode.min.js修改相机尺寸、自动请求权限及启用后置相机

针对你的需求，我们可以通过直接使用Html5Qrcode核心类（而非封装了UI的Html5QrcodeScanner）来实现自动请求权限、默认启用后置相机，同时配置相机的分辨率参数。以下是修改后的完整代码：

<body>
<script src="Scripts/html5-qrcode.min.js"></script>
<style>
    .result {
        background-color: green;
        color: #fff;
        padding: 20px;
    }

    .row {
        display: flex;
    }
</style>

<div class="row">
    <div class="col">
        <div style="width: 100%; height: 400px;" id="reader"></div>
    </div>
    <div class="col" style="padding: 30px;">
        <h4>SCAN RESULT</h4>
        <div id="result">Result Here</div>
    </div>
</div>

<script type="text/javascript">
    function onScanSuccess(qrCodeMessage) {
        document.getElementById('result').innerHTML = '<span class="result">' + qrCodeMessage + '</span>';
    }

    function onScanError(errorMessage) {
        // 处理扫描错误，比如权限被拒绝时提示用户
        if (errorMessage.includes("Permission denied")) {
            document.getElementById('result').innerHTML = '<span style="color:red;">相机权限被拒绝，请在浏览器设置中开启</span>';
        }
    }
    
    let qrboxFunction = function (viewfinderWidth, viewfinderHeight) {
        let minEdgePercentage = 1; // 保持原有的qrbox尺寸设置
        let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
        let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
        return {
            width: qrboxSize,
            height: qrboxSize
        };
    }

    // 初始化Html5Qrcode实例，而非Scanner
    const html5QrCode = new Html5Qrcode("reader");

    // 页面加载完成后自动执行权限请求和相机启动
    window.addEventListener('load', async () => {
        try {
            // 请求后置相机权限，"environment"代表后置相机
            const cameraId = await html5QrCode.requestPermission({ facingMode: "environment" });
            
            // 配置相机参数，指定分辨率（浏览器会根据设备支持情况适配）
            const cameraConfig = {
                fps: 30,
                qrbox: qrboxFunction,
                cameraConstraints: {
                    width: { ideal: 1280 }, // 理想宽度
                    height: { ideal: 720 }, // 理想高度
                    facingMode: "environment" // 强制使用后置相机
                }
            };

            // 启动扫描
            await html5QrCode.start(
                cameraId,
                cameraConfig,
                onScanSuccess,
                onScanError
            );
        } catch (err) {
            onScanError(err.message);
        }
    });
</script>
</body>

关键修改说明： #

• 替换Html5QrcodeScanner为Html5Qrcode：Scanner类默认自带权限请求按钮，使用核心类可以完全手动控制流程，实现自动请求权限。
• 页面加载后自动触发权限请求：通过window.addEventListener('load', ...)在页面加载完成后立即执行requestPermission，并指定facingMode: "environment"直接请求后置相机权限。
• 配置相机分辨率：在cameraConstraints中设置width和height的理想值，浏览器会优先选择接近该值的可用分辨率（注：最终实际分辨率取决于设备硬件和浏览器支持，无法强制固定到某个值）。
• 权限错误处理：在onScanError中增加了权限被拒绝的提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Huy Hoang Nguyen