引言：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()。
以下是修正后的代码示例：
// 假设已引入 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 库进行摄像头管理的关键。通过遵循本文提供的指南和示例代码，开发者可以有效地检测设备摄像头、处理权限问题并顺利启动二维码/条形码扫描功能。
