在数字化时代，二维码已经渗透到我们生活的方方面面。从移动支付到产品溯源，二维码凭借其便捷性和高效性，成为了信息传递的重要载体。而随着前端技术的不断发展，我们甚至可以使用 JavaScript 在网页端实现二维码扫描功能，为用户提供更加便捷的操作体验。
本文将带您深入了解如何使用 JavaScript 调用摄像头，结合 jsQR 库，以及如何控制闪光灯，最终实现一个功能完善的网页扫码应用。
一、 项目概述
我们将创建一个简单的网页应用，该应用能够：
- 调用设备摄像头，获取实时视频流。
- 在网页上创建一个扫描区域，用户可以将二维码放置在该区域内进行扫描。
- 使用
jsQR库解码扫描区域内的二维码图像数据，获取二维码内容。 - 提供手动输入二维码内容的功能。
- 如果设备支持，还可以控制闪光灯的开关，以便在光线不足的情况下进行扫描。
二、 实现步骤
1. HTML 结构
首先，我们需要构建基本的 HTML 结构，包括：
<video>标签：用于展示摄像头捕获的实时视频流。<canvas>标签：用于绘制视频帧和扫描区域，并从中获取图像数据。<div>标签：用于创建扫描区域、按钮组等 UI 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫一扫</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video autoplay></video>
<canvas hidden></canvas>
<div></div>
<div>
<button>手动输入</button>
<button>闪光灯</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. CSS 样式
为了提升用户体验，我们需要为页面元素添加一些样式：
body { margin: 0; overflow: hidden;}#video { width: 100%; height: auto; display: block;}#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}.scan-area { border: 3px solid yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 30%;}3. JavaScript 交互
JavaScript 代码是实现扫码功能的核心部分，主要包括以下几个步骤：
获取摄像头权限: 使用
navigator.mediaDevices.getUserMedia()方法请求访问用户的摄像头。播放视频流: 将获取到的视频流赋值给
<video>标签的srcObject属性，并调用video.play()方法开始播放。创建扫描循环: 使用
requestAnimationFrame()方法创建一个循环，不断地从视频流中获取帧图像，并进行二维码解码。绘制视频帧: 在每一帧中，使用
canvas.drawImage()方法将视频帧绘制到<canvas>元素上。获取扫描区域图像数据: 使用
canvas.getImageData()方法获取扫描区域的图像数据。解码二维码: 使用
jsQR库的jsQR()方法解码图像数据，如果解码成功，则获取二维码内容。处理扫描结果: 对解码后的二维码内容进行处理，例如跳转到链接、显示信息等。
实现其他功能: 实现手动输入二维码内容和控制闪光灯等功能。
// script.jsconst video = document.getElementById('video');const overlay = document.getElementById('overlay');const manualInputBtn = document.getElementById('manualInputBtn');const flashBtn = document.getElementById('flashBtn');const scanArea = document.querySelector('.scan-area');let stream;let scanning = false;let flashEnabled = false;// 获取摄像头权限并开始播放视频流navigator.mediaDevices.getUserMedia({ video: { facingMode:"environment" } }) .then(s => { stream = s; video.srcObject = stream; video.play(); // 开始扫描 scanning = true; requestAnimationFrame(scan); }) .catch(err => { console.error("无法访问摄像头：", err); });// 扫描二维码function scan() { if (scanning) { const canvas = overlay.getContext('2d'); const videoWidth = video.videoWidth; const videoHeight = video.videoHeight; // 设置画布大小 overlay.width = videoWidth; overlay.height = videoHeight; // 将视频帧绘制到画布上 canvas.drawImage(video, 0, 0, videoWidth, videoHeight); // ...获取扫描区域图像数据 // 使用 jsQR 库解码二维码 const code = jsQR(imageData.data, imageData.width, imageData.height); // 如果成功解码，则停止扫描并处理结果 if (code) { scanning = false; handleScanResult(code.data); } else { requestAnimationFrame(scan); } }}// 处理扫描结果function handleScanResult(data) { alert("扫描结果：" + data); // 这里可以根据扫描结果进行相应的操作，例如跳转到链接或显示信息}// 手动输入按钮点击事件manualInputBtn.addEventListener('click', function() { // ...});// 闪光灯按钮点击事件flashBtn.addEventListener('click', function() { // ...});三、完整代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>扫一扫</title> <style> body { margin: 0; overflow: hidden; } #video { width: 100%; height: auto; display: block; } #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .scan-area { border: 3px solid yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 30%; } .btn-group { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } button { background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px 20px; margin: 0 10px; border-radius: 5px; font-size: 16px; cursor: pointer; } </style></head><body><video autoplay></video><canvas hidden></canvas><div></div><div> <button>手动输入</button> <button>闪光灯</button></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script><script> const video = document.getElementById('video'); const overlay = document.getElementById('overlay'); const manualInputBtn = document.getElementById('manualInputBtn'); const flashBtn = document.getElementById('flashBtn'); const scanArea = document.querySelector('.scan-area'); let stream; let scanning = false; let flashEnabled = false; // 获取摄像头权限并开始播放视频流 navigator.mediaDevices.getUserMedia({ video: { facingMode:"environment" } }) .then(function(s) { stream = s; video.srcObject = stream; video.play(); // 开始扫描 requestAnimationFrame(scan); }) .catch(function(err) { console.error("无法访问摄像头：", err); }); // 扫描二维码 function scan() { if (scanning) { const canvas = overlay.getContext('2d'); const videoWidth = video.videoWidth; const videoHeight = video.videoHeight; // 设置画布大小 overlay.width = videoWidth; overlay.height = videoHeight; // 将视频帧绘制到画布上 canvas.drawImage(video, 0, 0, videoWidth, videoHeight); // 获取扫描区域的坐标和尺寸 const scanAreaRect = scanArea.getBoundingClientRect(); const scanAreaX = scanAreaRect.left; const scanAreaY = scanAreaRect.top; const scanAreaWidth = scanAreaRect.width; const scanAreaHeight = scanAreaRect.height; // 获取扫描区域的图像数据 const imageData = canvas.getImageData(scanAreaX, scanAreaY, scanAreaWidth, scanAreaHeight); // 使用 jsQR 库解码二维码 const code = jsQR(imageData.data, imageData.width, imageData.height); // 如果成功解码，则停止扫描并处理结果 if (code) { scanning = false; handleScanResult(code.data); } else { requestAnimationFrame(scan); } } } // 处理扫描结果 function handleScanResult(data) { alert("扫描结果：" + data); // 这里可以根据扫描结果进行相应的操作，例如跳转到链接或显示信息 } // 手动输入按钮点击事件 manualInputBtn.addEventListener('click', function() { const input = prompt("请输入二维码内容："); if (input) { handleScanResult(input); } }); // 闪光灯按钮点击事件 flashBtn.addEventListener('click', function() { if ('torch' in navigator.mediaDevices.getUserMedia({ video: true })) { flashEnabled = !flashEnabled; stream.getVideoTracks()[0].applyConstraints({ advanced: [{ torch: flashEnabled }] }); // 更新按钮文本 flashBtn.textContent = flashEnabled ? '关闭闪光灯' : '闪光灯'; } else { alert('您的设备不支持闪光灯功能。'); } }); // 开始扫描 scanning = true;</script></body></html> 四、 总结
通过以上步骤，我们成功地使用 JavaScript 在网页端实现了二维码扫描功能。该功能可以广泛应用于各种场景，例如：
- 移动支付: 用户可以使用手机扫描网页上的二维码完成支付。
- 产品溯源: 用户可以扫描产品上的二维码，查看产品信息、生产日期、物流信息等。
- 活动签到: 用户可以使用手机扫描二维码完成活动签到。
随着 Web 技术的不断发展，相信未来会有更多创新的应用场景出现。
希望本文能够帮助您了解网页扫码功能的实现原理，并激发您探索更多前端黑科技的兴趣。