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。
暂无评论内容