在HTML项目中，可以使用 `html5-qrcode` 调用手机摄像头并识别二维码。完成页面代码后，再通过HTML一键打包APK工具勾选相机权限，即可生成支持扫码的安卓APP。


## 创建扫码页面

在HTML项目入口目录中创建 `index.html`，写入以下代码。页面点击“开始扫码”后会申请摄像头权限，识别成功时停止摄像头并显示二维码内容。

```html
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
        <title>二维码扫码</title>
        <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
        <style>
            * {
                box-sizing: border-box;
            }

            body {
                min-height: 100vh;
                margin: 0;
                padding: 20px;
                display: grid;
                place-items: center;
                font-family: 'Microsoft YaHei', sans-serif;
                background: #f4f7f5;
                color: #17221c;
            }

            main {
                width: min(100%, 440px);
            }

            h1 {
                margin: 0 0 8px;
                font-size: 30px;
            }

            p {
                margin: 0 0 18px;
                color: #526159;
            }

            #reader {
                width: 100%;
                min-height: 280px;
                overflow: hidden;
                border: 1px solid #cad4ce;
                border-radius: 8px;
                background: #101511;
            }

            #reader video {
                object-fit: cover;
            }

            .actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-top: 14px;
            }

            button {
                min-height: 48px;
                border: 0;
                border-radius: 6px;
                padding: 0 16px;
                font: inherit;
                font-weight: 700;
            }

            #startButton {
                background: #197447;
                color: white;
            }

            #stopButton {
                background: #dfe6e2;
                color: #26352d;
            }

            button:disabled {
                opacity: 0.5;
            }

            #status {
                min-height: 24px;
                margin-top: 12px;
                font-size: 14px;
                color: #526159;
            }
        </style>
    </head>
    <body>
        <main>
            <h1>二维码扫码</h1>
            <p>点击开始后，将摄像头对准二维码。</p>
            <div id="reader" aria-label="摄像头扫码区域"></div>
            <div class="actions">
                <button id="startButton" type="button">开始扫码</button>
                <button id="stopButton" type="button" disabled>停止扫码</button>
            </div>
            <div id="status" role="status">等待开始</div>
        </main>

        <script>
            const reader = new Html5Qrcode('reader');
            const startButton = document.getElementById('startButton');
            const stopButton = document.getElementById('stopButton');
            const status = document.getElementById('status');
            let isScanning = false;
            let resultHandled = false;

            async function stopScanning() {
                if (!isScanning) return;

                await reader.stop();
                isScanning = false;
                startButton.disabled = false;
                stopButton.disabled = true;
                status.textContent = '扫码已停止';
            }

            async function startScanning() {
                startButton.disabled = true;
                status.textContent = '正在请求摄像头权限...';
                resultHandled = false;

                try {
                    await reader.start(
                        { facingMode: 'environment' },
                        { fps: 10, qrbox: { width: 240, height: 240 } },
                        async decodedText => {
                            if (resultHandled) return;
                            resultHandled = true;
                            await stopScanning();
                            alert(decodedText);
                        },
                        () => {}
                    );

                    isScanning = true;
                    stopButton.disabled = false;
                    status.textContent = '正在扫描...';
                } catch (error) {
                    startButton.disabled = false;
                    status.textContent = '无法打开摄像头，请检查相机权限。';
                    console.error(error);
                }
            }

            startButton.addEventListener('click', startScanning);
            stopButton.addEventListener('click', () => {
                stopScanning().catch(console.error);
            });

            window.addEventListener('pagehide', () => {
                if (isScanning) reader.stop().catch(() => {});
            });
        </script>
    </body>
</html>
```

示例通过 CDN 加载 `html5-qrcode`。如果APP需要完全离线运行，请提前下载 `html5-qrcode.min.js` 放入项目目录，并将页面中的脚本地址改为本地相对路径。

## 打包APK并勾选相机权限

打开HTML一键打包APK工具，选择包含 `index.html` 的项目目录，填写应用名称、包名等打包信息。在权限设置中勾选“相机权限”，否则APP无法调用手机摄像头。

![image.png](https://developer.qcloudimg.com/http-save/yehe-10280634/32ea7caf65f04b7b8293e7683460ee83.png)

![打包APK时勾选相机权限](https://developer.qcloudimg.com/http-save/yehe-10280634/5637ad8dfb3401530c7c4896a34c864d.png)

确认配置后开始打包，等待工具生成APK文件。

## 安装并测试扫码

将生成的APK安装到安卓手机。首次点击“开始扫码”时，系统会弹出相机授权提示，选择允许后，将摄像头对准二维码。识别成功后，页面会停止扫描并弹出二维码中的文字或链接。

![打包后的APP扫码运行效果](https://developer.qcloudimg.com/http-save/yehe-10280634/821ecdd3f801fe9933ca474b0ef55d10.png)

如果页面提示无法打开摄像头，请先在手机的应用权限设置中确认相机权限已经允许。扫码页面使用 CDN 脚本时，还需要确保手机能够正常访问网络；改用本地脚本后则不受此限制。

在HTML项目中，可以使用 html5-qrcode 调用手机摄像头并识别二维码。完成页面代码后，再通过HTML一键打包APK工具勾选相机权限，即可生成支持扫码的安卓APP。

HTML项目打包APK：实现二维码扫码功能详解

架构设计

使用html5-qrcode库在HTML中实现手机摄像头扫码功能，通过一键打包工具生成安卓APK。页面支持开始/停止扫码、自动识别二维码并弹出结果，需勾选相机权限。提供CDN与本地脚本两种部署方式，适配在线与离线场景。

代码解释

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

HTML项目打包APK：实现二维码扫码功能详解-腾讯云开发者社区-腾讯云

HTML项目打包APK：实现二维码扫码功能详解

HTML项目打包APK：实现二维码扫码功能详解

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐