引言：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 扫描：
Html5Qrcode 摄像头检测与扫描
Html5Qrcode 摄像头检测与扫描示例
请将二维码或条形码放入扫描区域
开发注意事项
用户权限：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 库进行摄像头管理的关键。通过遵循本文提供的指南和示例代码，开发者可以有效地检测设备摄像头、处理权限问题并顺利启动二维码/条形码扫描功能。
