如何将JSFiddle代码转换为可运行HTML文件？附Quagga初始化代码

嘿，我来帮你把JSFiddle里的Quagga条码识别代码转成可直接运行的HTML文件，跟着下面的步骤来就行：

JSFiddle里的代码一般拆成HTML结构、CSS样式、JavaScript逻辑三块，另外还要注意你代码里用到的外部依赖——比如jQuery（你用了$(function(){})）和QuaggaJS条码识别库，这些都要在HTML里引入。

把所有内容整合到一个.html文件里，顺序不能乱，我给你写好了完整的可运行版本，你可以直接用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quagga Barcode Scanner</title>
    <!-- 先引入依赖库：jQuery + QuaggaJS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
    <!-- 内嵌CSS样式，保证摄像头画面正常显示 -->
    <style>
        #interactive.viewport {
            position: relative;
            width: 100%;
            height: auto;
            overflow: hidden;
            text-align: center;
        }
        #interactive.viewport > canvas, #interactive.viewport > video {
            max-width: 100%;
            width: 100%;
        }
        .scanner-container {
            margin: 20px auto;
            max-width: 600px;
        }
        #result {
            font-size: 1.2em;
            margin-top: 20px;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <!-- HTML结构：Quagga需要的视频容器 + 结果展示区 -->
    <div class="scanner-container">
        <h1>条码扫描器</h1>
        <div id="interactive" class="viewport"></div>
        <p id="result">等待识别条码...</p>
    </div>

    <!-- 内嵌你的JavaScript逻辑，我补全了缺失的部分 -->
    <script>
        /**Quagga initialiser starts here*/ 
        $(function() { 
            var value; 
            var App = { 
                // 补全Quagga必需的初始化配置
                state: {
                    inputStream: {
                        name: "Live",
                        type: "LiveStream",
                        target: document.querySelector('#interactive'), // 绑定到页面的视频容器
                        constraints: {
                            width: 640,
                            height: 480,
                            facingMode: "environment" // 优先用后置摄像头（移动端有效）
                        }
                    },
                    decoder: {
                        readers: ["code_128_reader", "ean_reader", "ean_8_reader", "upc_reader"] // 支持的条码类型
                    }
                },
                init: function() { 
                    Quagga.init(this.state, function(err) { 
                        if (err) { 
                            console.log(err); 
                            return; 
                        } 
                        App.attachListeners(); 
                        Quagga.start(); 
                    }); 
                }, 
                initCameraSelection: function() { 
                    var streamLabel = Quagga.CameraAccess.getActiveStreamLabel(); 
                    return Quagga.CameraAccess.enumerateVideoDevices() 
                        .then(function(devices) { 
                            function pruneText(text) { 
                                // 补全你没写完的字符串截断逻辑
                                return text.length > 30 ? text.substr(0, 30) + '...' : text; 
                            }
                            // 这里可以扩展成摄像头选择下拉菜单，现在先打印到控制台
                            devices.forEach(function(device) {
                                console.log('可用摄像头:', pruneText(device.label));
                            });
                        });
                },
                // 补全条码识别的监听逻辑
                attachListeners: function() {
                    Quagga.onDetected(function(result) {
                        var code = result.codeResult.code;
                        // 避免重复输出相同结果
                        if (value !== code) {
                            value = code;
                            document.querySelector('#result').textContent = '识别到条码: ' + code;
                            console.log('识别结果:', code);
                        }
                    });
                }
            };

            // 启动扫描器
            App.init();
            // 可选：初始化摄像头列表（控制台可查看）
            App.initCameraSelection();
        });
    </script>
</body>
</html>

1. 把上面的代码复制到文本编辑器（比如VS Code、Notepad++），保存为barcode-scanner.html。
2. 用浏览器打开它就行，但要注意：
   • Chrome、Edge这类浏览器要求HTTPS环境或者本地服务器才能访问摄像头，如果你直接双击打开文件，可能需要在浏览器设置里手动允许摄像头权限。
   • 要是用VS Code的话，可以装个Live Server插件，右键选择“Open with Live Server”，这样就能正常调用摄像头了。
3. 如果你的JSFiddle里还有自定义的CSS或者其他依赖，记得一并加到这个HTML里。

内容的提问来源于stack exchange，提问作者Mark