Html5Qrcode 摄像头访问：getCameras() 方法的正确用法-html教程-PHP中文网

Html5Qrcode 摄像头访问：getCameras() 方法的正确用法

本文旨在解决在使用 Html5Qrcode 库时，调用 getCameras() 方法出现 TypeError 的问题。核心原因在于 getCameras() 是 Html5Qrcode 类的一个静态方法，而非其实例方法。教程将详细阐述如何正确调用此方法以获取设备摄像头列表，确保应用程序能够顺利检测并启动摄像头，避免常见的初始化错误，提升用户体验。

引言：Html5Qrcode 与摄像头管理

html5qrcode 是一个功能强大的 javascript 库，专为网页端的二维码和条形码扫描而设计。它利用现代浏览器提供的 mediadevices api 来访问设备摄像头，从而实现实时扫描。在开发基于 html5qrcode 的应用时，一个常见的需求是在启动扫描之前，检测设备是否存在可用的摄像头，并可能根据摄像头数量或类型进行选择。getcameras() 方法正是为此目的而生，它用于获取当前设备上所有可用的视频输入设备（摄像头）列表。

问题剖析：TypeError 的根源

许多开发者在初次使用 Html5Qrcode 库时，可能会遇到 Uncaught TypeError: html5QrCode.getCameras is not a function 这样的错误。这个错误通常出现在尝试通过 html5QrCode.getCameras() 这种方式调用 getCameras() 方法时，如下面的代码片段所示：

// 假设已引入 html5-qrcode.min.js
var html5QrCode = new Html5Qrcode("scanner-container");
// ... 其他配置和回调函数 ...

// 错误调用示例
html5QrCode.getCameras().then(devices => {
    // ... 处理摄像头列表 ...
}).catch(err => {
    console.log("No Camera Found", err);
});

登录后复制

这个错误发生的根本原因在于，getCameras() 方法并非 Html5Qrcode 类实例（即 html5QrCode 对象）的方法，而是 Html5Qrcode 类本身的静态方法。这意味着它不依赖于任何特定的 Html5Qrcode 实例来执行，而是直接通过类名来调用。

核心概念：静态方法与实例方法

在 JavaScript 的类（Class）中，方法可以分为两种主要类型：

实例方法 (Instance Methods)：这些方法属于类的实例（对象）。它们需要先创建一个类的对象，然后通过该对象来调用。实例方法通常操作实例的属性或执行与特定实例相关的行为。例如，html5QrCode.start() 和 html5QrCode.stop() 就是 Html5Qrcode 实例的方法，它们操作的是 html5QrCode 这个具体的扫描器实例。

立即学习“前端免费学习笔记（深入）”；
静态方法 (Static Methods)：这些方法属于类本身，而不是类的任何实例。它们可以直接通过类名来调用，无需创建类的对象。静态方法通常用于执行与类相关但不依赖于特定实例的操作，例如工具函数、工厂方法或全局配置获取。在 Html5Qrcode 库中，getCameras() 被设计为静态方法，因为它用于获取设备上的所有摄像头，这是一个独立于任何特定扫描器实例的全局操作。

因此，尝试在 html5QrCode 实例上调用 getCameras() 就会导致 TypeError，因为该实例上并没有定义这个方法。

解决方案：正确调用 getCameras()

解决 TypeError 的方法非常直接：将 getCameras() 作为 Html5Qrcode 类的一个静态方法来调用。即，使用 Html5Qrcode.getCameras() 而不是 html5QrCode.getCameras()。

以下是修正后的代码示例：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

// 假设已引入 html5-qrcode.min.js
var html5QrCode = new Html5Qrcode("scanner-container");
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    html5QrCode.stop().then((ignore) => {
        // QR Code scanning is stopped.
    }).catch((err) => {
        console.log("停止扫描失败", err);
    });
};
const config = { fps: 10, qrbox: 250 };

// 正确调用方式：通过类名 Html5Qrcode 调用静态方法 getCameras()
Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length > 0) {
        // 找到摄像头，可以进行扫描
        console.log(`找到 ${devices.length} 个摄像头`, devices);
        // 显示扫描界面
        if ($(".scan-dom").hasClass("notVisible")) {
            $(".scan-dom").removeClass("notVisible");
        }
        // 选择第一个摄像头或指定环境摄像头
        html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
            .catch(err => {
                console.error("启动扫描失败", err);
                // 处理启动失败的情况，例如权限问题
            });
    } else {
        // 没有找到摄像头
        console.log("未找到任何摄像头");
        if (!$(".scan-dom").hasClass("notVisible")) {
            $(".scan-dom").addClass("notVisible");
        }
        $(".noCameraMessage").removeClass("hide");
    }
}).catch(err => {
    // 处理获取摄像头列表失败的情况，例如权限被拒绝
    console.error("获取摄像头列表失败", err);
    if (!$(".scan-dom").hasClass("notVisible")) {
        $(".scan-dom").addClass("notVisible");
    }
    $(".noCameraMessage").removeClass("hide");
});

登录后复制

完整示例代码

为了提供一个更完整的上下文，下面是一个包含 HTML 结构和 JavaScript 逻辑的示例，演示如何正确检测摄像头并启动 Html5Qrcode 扫描：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html5Qrcode 摄像头检测与扫描</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
        #scanner-container { width: 300px; height: 300px; border: 1px solid #ccc; }
        .notVisible { display: none; }
        .hide { display: none; }
        .message { margin-top: 20px; padding: 10px; border-radius: 5px; }
        .error-message { background-color: #ffe0e0; border: 1px solid #ff0000; color: #ff0000; }
        .success-message { background-color: #e0ffe0; border: 1px solid #00ff00; color: #008000; }
    </style>
</head>
<body>
    <h1>Html5Qrcode 摄像头检测与扫描示例</h1>

    <div class="scan-dom">
        <p>请将二维码或条形码放入扫描区域</p>
        <div id="scanner-container"></div>
    </div>

    <div class="noCameraMessage message error-message hide">
        <p>抱歉，未检测到可用摄像头或摄像头权限被拒绝。</p>
    </div>

    <div id="result-container" class="message success-message hide">
        <p>扫描结果: <span id="decoded-text"></span></p>
    </div>

    <!-- 引入 Html5Qrcode 库 -->
    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <!-- 引入 jQuery (用于示例中的 DOM 操作) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            var html5QrCode = new Html5Qrcode("scanner-container");
            const config = { fps: 10, qrbox: 250 }; // 扫描配置

            const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                console.log(`扫描成功: ${decodedText}`, decodedResult);
                $("#decoded-text").text(decodedText);
                $("#result-container").removeClass("hide");

                html5QrCode.stop().then((ignore) => {
                    console.log("QR Code scanning stopped.");
                    // 可以在这里进行其他操作，例如提交扫描结果
                }).catch((err) => {
                    console.error("停止扫描失败:", err);
                });
            };

            // 1. 尝试获取摄像头列表
            Html5Qrcode.getCameras().then(devices => {
                if (devices && devices.length > 0) {
                    // 找到至少一个摄像头
                    console.log(`检测到 ${devices.length} 个摄像头:`, devices);

                    // 隐藏无摄像头消息，显示扫描区域
                    $(".noCameraMessage").addClass("hide");
                    $(".scan-dom").removeClass("notVisible");

                    // 2. 启动扫描
                    // 可以选择 devices[0].id 来指定特定摄像头
                    // 或者使用 facingMode: "environment" (后置摄像头) 或 "user" (前置摄像头)
                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                        .catch(err => {
                            console.error("Html5Qrcode 启动失败:", err);
                            // 如果启动失败（例如，用户拒绝权限或摄像头被占用），显示错误信息
                            $(".scan-dom").addClass("notVisible");
                            $(".noCameraMessage").removeClass("hide").find("p").text("摄像头启动失败，请检查权限或重试。");
                        });
                } else {
                    // 未找到任何摄像头
                    console.warn("未检测到任何可用摄像头。");
                    $(".scan-dom").addClass("notVisible");
                    $(".noCameraMessage").removeClass("hide");
                }
            }).catch(err => {
                // 获取摄像头列表本身失败，可能是权限问题
                console.error("获取摄像头列表失败 (可能权限被拒绝):", err);
                $(".scan-dom").addClass("notVisible");
                $(".noCameraMessage").removeClass("hide").find("p").text("获取摄像头列表失败，请确保已授予摄像头访问权限。");
            });
        });
    </script>
</body>
</html>

登录后复制

开发注意事项

用户权限：Html5Qrcode 访问摄像头需要用户的明确许可。当浏览器首次尝试访问摄像头时，会弹出一个权限请求。如果用户拒绝，getCameras() 或 start() 方法的 Promise 将会被拒绝，进入 .catch() 块。务必在代码中处理这些情况，并向用户提供友好的提示。
异步操作：Html5Qrcode.getCameras() 返回一个 Promise，这意味着它是一个异步操作。你需要使用 .then() 来处理成功获取摄像头列表的情况，并使用 .catch() 来处理任何潜在的错误（例如权限拒绝）。
错误处理：在实际应用中，对 getCameras() 和 start() 方法的错误处理至关重要。一个健壮的错误处理机制可以提升用户体验，例如，当没有摄像头或权限被拒绝时，显示一个提示信息而不是一个空白页面或崩溃。
多摄像头处理：getCameras() 返回的 devices 数组可能包含多个摄像头对象。每个对象都有一个 id 和 label。你可以根据 label（例如 "front camera", "back camera"）或 id 来指定 start() 方法要使用的摄像头，而不是简单地使用 facingMode。
库版本：虽然 getCameras() 作为静态方法是 Html5Qrcode 的核心设计，但随着库的更新，API 的细节可能会有微小变化。始终建议查阅你所使用的 Html5Qrcode 版本的官方文档，以获取最准确的信息。

总结

Uncaught TypeError: html5QrCode.getCameras is not a function 错误是由于混淆了 Html5Qrcode 库中静态方法和实例方法的调用方式。getCameras() 是一个静态方法，应通过类名 Html5Qrcode 直接调用，即 Html5Qrcode.getCameras()。理解并正确区分这两种方法是使用 Html5Qrcode 库进行摄像头管理的关键。通过遵循本文提供的指南和示例代码，开发者可以有效地检测设备摄像头、处理权限问题并顺利启动二维码/条形码扫描功能。

以上就是Html5Qrcode 摄像头访问：getCameras() 方法的正确用法的详细内容，更多请关注php中文网其它相关文章！