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。
