前端页面调用手机摄像头扫描二维码示例 | JavaScript Quagga.js 实现 - 常规

以下是一个使用前端页面调用手机摄像头扫描二维码的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>扫描二维码示例</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
    <script src='https://cdn.bootcdn.net/ajax/libs/quagga/0.12.1/quagga.min.js'></script>
</head>
<body>
    <h1>扫描二维码示例</h1>
    <div id='interactive' style='width: 300px; height: 200px;'></div>
    <div id='result'></div>
    
    <script>
        $(function() {
            Quagga.init({
                inputStream : {
                    name : 'Live',
                    type : 'LiveStream',
                    target: document.querySelector('#interactive'),
                    constraints: {
                        facingMode: 'environment' // 使用后置摄像头
                    },
                },
                decoder : {
                    readers : ['ean_reader'] // 只支持扫描 EAN 条形码
                }
            }, function(err) {
                if (err) {
                    console.error(err);
                    return;
                }
                console.log('Initialization finished. Ready to start');
                Quagga.start();
            });

            Quagga.onDetected(function(result) {
                var code = result.codeResult.code;
                console.log('Detected code: ' + code);
                $('#result').text('Detected code: ' + code);
                // 在这里可以对扫描到的二维码进行处理
            });
        });
    </script>
</body>
</html>

这个示例使用了 Quagga.js 库来实现前端页面调用手机摄像头扫描二维码的功能。在初始化 Quagga.js 时，设置了inputStream的type为LiveStream，并指定了一个target元素作为视频流显示区域。通过设置constraints的facingMode为environment，可以使用后置摄像头进行扫描。

在decoder中指定了readers为ean_reader，表示只支持扫描 EAN 条形码。你可以根据需要更换为其他类型的读取器。

在Quagga.onDetected回调函数中，可以对扫描到的二维码进行处理。在示例中，将扫描到的二维码显示在页面上的#result元素中。你可以根据自己的需求进行二维码的处理操作。

前端页面调用手机摄像头扫描二维码示例 | JavaScript Quagga.js 实现