BOM二维码扫描实现方法详解

想要在网页上实现二维码扫描功能吗？本文将解析如何利用浏览器对象模型（BOM）和mediaDevices API，配合jsQR等第三方库，轻松搞定二维码扫描。首先，通过`navigator.mediaDevices.getUserMedia`请求摄像头权限并获取视频流，将其显示在页面上的video元素中。接着，将视频帧绘制到Canvas上，提取图像数据并使用jsQR进行二维码解析。扫描成功后，即可将结果展示在页面或进行跳转等操作。了解浏览器的能力，巧妙运用mediaDevices API，你也能实现基本的二维码扫描功能！

1.使用mediaDevices API获取视频流并显示在页面上；2.使用第三方库解析二维码；3.处理扫描结果。首先，通过navigator.mediaDevices.getUserMedia请求摄像头权限并获取视频流，将其赋值给video元素的srcObject属性以显示画面。接着，引入jsQR等第三方库，将视频帧绘制到Canvas上并提取图像数据进行二维码解析。最后，当解析成功时，将结果展示在页面或弹窗中，可选择跳转链接或执行其他操作，并注意安全检查。

二维码扫描这件事，听起来高大上，其实用浏览器自带的BOM（浏览器对象模型）也能搞定个七七八八。关键不在于实现一个完美的扫描器，而在于理解浏览器能提供哪些能力，以及如何巧妙地利用它们。

mediaDevices API 提供了一种访问用户摄像头的方式，配合一些二维码解析库，就能在网页上实现基本的二维码扫描功能。

mediaDevices API的使用和权限请求 如何获取视频流并显示在页面上？ 使用第三方库解析二维码 如何处理扫描结果？

mediaDevices API的使用和权限请求

首先，mediaDevices API 是核心。它允许我们访问用户的摄像头。但要注意，访问摄像头需要用户授权。所以，第一步是检查浏览器是否支持 mediaDevices，然后发起权限请求。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    // 成功获取视频流
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    // 将视频流显示在页面上，例如添加到某个 div 中
    const videoContainer = document.getElementById('video-container');
    videoContainer.appendChild(video);

  })
  .catch(error => {
    // 用户拒绝授权或发生其他错误
    console.error("无法访问摄像头:", error);
    alert("请允许访问摄像头，才能使用二维码扫描功能。");
  });

这段代码首先尝试获取视频流。如果用户允许访问摄像头，getUserMedia 会返回一个 stream 对象，我们可以将这个 stream 赋值给一个 video 元素的 srcObject 属性，然后播放视频。如果用户拒绝授权，或者发生其他错误，catch 块会捕获错误并给出提示。

需要注意的是，不同浏览器对 getUserMedia 的实现可能略有差异，需要做一些兼容性处理。另外，权限请求通常只能在 HTTPS 环境下发起，否则浏览器会阻止。

如何获取视频流并显示在页面上？

上面已经展示了如何获取视频流并显示在页面上。但这里可以再展开一下。video 元素是关键，它负责显示摄像头的画面。我们可以通过 CSS 来控制 video 元素的大小和位置，使其适应页面布局。

另外，为了提高用户体验，可以添加一些控制按钮，例如暂停/播放、切换摄像头等。这些按钮可以通过 JavaScript 来控制 video 元素的 play() 和 pause() 方法，以及通过 getUserMedia 的 deviceId 选项来切换摄像头。

<div id="video-container">
  <video autoplay playsinline width="640" height="480"></video>
</div>
<button id="toggle-camera">切换摄像头</button>

<script>
  const video = document.querySelector('video');
  const toggleCameraBtn = document.getElementById('toggle-camera');

  let currentStream;
  let currentDeviceId;

  function startCamera(deviceId) {
    const constraints = {
      video: {
        deviceId: deviceId ? { exact: deviceId } : undefined
      }
    };

    navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => {
        if (currentStream) {
          currentStream.getTracks().forEach(track => track.stop());
        }
        currentStream = stream;
        video.srcObject = stream;
        currentDeviceId = deviceId;
      })
      .catch(err => console.error('Error accessing camera:', err));
  }

  navigator.mediaDevices.enumerateDevices()
    .then(devices => {
      const cameras = devices.filter(device => device.kind === 'videoinput');
      if (cameras.length > 0) {
        startCamera(cameras[0].deviceId); // 默认启动第一个摄像头
        if (cameras.length > 1) {
          toggleCameraBtn.addEventListener('click', () => {
            const nextCameraIndex = (cameras.findIndex(cam => cam.deviceId === currentDeviceId) + 1) % cameras.length;
            startCamera(cameras[nextCameraIndex].deviceId);
          });
        } else {
          toggleCameraBtn.disabled = true; // 只有一个摄像头，禁用切换按钮
        }
      } else {
        console.warn('No cameras found.');
      }
    })
    .catch(err => console.error('Error enumerating devices:', err));

</script>

使用第三方库解析二维码

有了视频流，接下来就是解析二维码了。浏览器本身没有提供二维码解析的功能，所以我们需要借助第三方库。比较流行的选择有 jsQR 和 zxing-js。这里以 jsQR 为例：

首先，引入 jsQR 库：

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>

然后，我们需要将视频帧转换为 jsQR 可以处理的格式。通常的做法是将视频帧绘制到 Canvas 上，然后从 Canvas 中提取图像数据。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

function scanQRCode() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  const code = jsQR(imageData.data, imageData.width, imageData.height);

  if (code) {
    console.log("Found QR code", code.data);
    // 处理扫描结果
  } else {
    // 没有找到二维码
    requestAnimationFrame(scanQRCode); // 继续扫描
  }
}

video.addEventListener('loadedmetadata', () => {
  scanQRCode(); // 开始扫描
});

这段代码首先创建一个 Canvas 元素，然后将视频帧绘制到 Canvas 上。接着，从 Canvas 中提取图像数据，并使用 jsQR 解析二维码。如果找到二维码，jsQR 会返回一个包含二维码数据的对象，否则返回 null。

为了持续扫描，我们使用 requestAnimationFrame 在每一帧都调用 scanQRCode 函数。当视频加载完成后，我们开始扫描。

如何处理扫描结果？

当 jsQR 成功解析二维码后，我们就可以处理扫描结果了。最常见的做法是将二维码数据展示给用户，或者根据二维码数据进行跳转或其他操作。

if (code) {
  console.log("Found QR code", code.data);
  alert("扫描结果: " + code.data);

  // 可以将扫描结果显示在页面上
  const resultDiv = document.getElementById('result');
  resultDiv.textContent = "扫描结果: " + code.data;

  // 或者根据扫描结果进行跳转
  // window.location.href = code.data;
}

这段代码首先将二维码数据打印到控制台，然后弹出一个提示框显示扫描结果。你也可以将扫描结果显示在页面上的某个元素中，或者根据扫描结果进行跳转。

需要注意的是，二维码数据可能包含恶意链接或代码，所以在进行跳转或其他操作时，一定要进行安全检查。

总的来说，用 BOM 实现二维码扫描并不复杂，关键在于理解浏览器提供的 API，以及如何巧妙地利用它们。当然，这种方式实现的二维码扫描功能比较基础，可能无法满足所有需求。如果需要更高级的功能，例如更快的扫描速度、更强的容错能力等，可能需要使用更专业的二维码扫描库或 Native API。

到这里，我们也就讲完了《BOM二维码扫描实现方法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于二维码扫描,视频流,mediaDevicesAPI,jsQR,浏览器对象模型的知识点！