H5调用摄像头扫码识别（html5-qrcode）

HTML5提供了一种方法来调用摄像头进行扫描，你可以使用第三方库html5-qrcode来简化这个过程。以下是如何使用html5-qrcode在HTML5页面上调用摄像头进行扫码识别的示例代码：

首先，你需要在你的HTML页面中引入html5-qrcode库：

<script src="https://html5qrcode.github.io/html5-qrcode/dist/html5-qrcode.min.js"></script>

然后，你可以使用以下JavaScript代码来启动摄像头，并处理扫码结果：

function startScan() {
  const html5QrCode = new Html5QrcodeScanner(
    "qr-reader", { fps: 10, qrbox: 250 });
  
  html5QrCode.render(
    {
      width: 300, // 扫描框的宽度
      height: 200, // 扫描框的高度
      qrbox: { width: 250, height: 250 } // 二维码框的大小
    },
    qrCode => {
      console.log(`Scanned QR Code: ${qrCode}`);
      html5QrCode.stop().then(() => {
        // 扫码停止后的操作
      }).catch(err => {
        console.error(err);
      });
    },
    error => {
      console.error(error);
    }
  );
}
 
// 在页面加载完成后绑定扫描功能
document.addEventListener('DOMContentLoaded', function () {
  const startButton = document.getElementById('start-scan');
  startButton.addEventListener('click', startScan);
});

在HTML部分，你需要有一个元素来放置扫描框和控制按钮：

<div id="qr-reader"></div>
<button id="start-scan">开始扫描</button>

确保你的网页在HTTPS环境下运行，因为大部分现代浏览器都要求摄像头和麦克风等媒体设备在安全的连接下使用。此外，用户可能需要授权网站访问摄像头。