关于html5-qrcode在浏览器切换/后台时自动停止扫码的技术咨询

内置功能说明 #

html5-qrcode 目前没有内置监听页面状态变化并自动停止扫码的功能，需要结合浏览器原生API实现需求。

可行性说明 #

完全可以实现你描述场景下的自动停止扫码，借助浏览器提供的页面状态监听API，就能处理关闭浏览器、切换标签页、移动端后台运行等场景。

最佳实践方案 #

通过以下两种浏览器API结合html5-qrcode的stop()方法实现：

• 处理页面切换/后台运行场景：使用Page Visibility API监听visibilitychange事件，当页面变为隐藏状态时停止扫码
• 处理关闭浏览器/刷新场景：监听beforeunload事件，在页面卸载前停止扫码

示例代码：

// 初始化扫码实例
const html5QrCode = new Html5Qrcode("reader");

// 监听页面可见性变化
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    html5QrCode.stop().catch(err => {
      console.error("停止扫码失败:", err);
    });
  }
});

// 监听页面卸载事件
window.addEventListener("beforeunload", () => {
  html5QrCode.stop().catch(err => {
    console.error("停止扫码失败:", err);
  });
});

补充说明：

• stop()方法是异步操作，需通过catch捕获可能的错误（如扫码已提前停止）
• 移动端部分浏览器后台运行时可能限制JS执行，但visibilitychange事件通常能正常触发，可有效释放摄像头资源

另外，感谢你对html5-qrcode的认可，这款开源工具确实能帮助开发者降低成本。

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