在现代Web开发中，利用JavaScript和HTML可以实现许多丰富的交互功能，其中之一就是调用摄像头进行实时扫码。这个功能常用于移动应用或者网页上的快速信息录入，例如登录验证、支付确认等场景。本项目通过简单的JS和HTML代码，实现了调用用户设备的摄像头，捕获静态图片，然后对图片中的二维码进行解析，最终获取到二维码携带的数据。在这个过程中，还特别关注了解决中文乱码的问题。
我们需要在HTML页面中设置一个视频元素来显示摄像头的实时预览，并且提供一个按钮供用户触发拍照功能。HTML代码可能如下：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>扫码功能</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" style="display:none;"></canvas>
<script src="main.js"></script>
</body>
</html>
```
在JavaScript（如`main.js`）中，我们需要获取视频元素并请求访问用户的媒体设备，通常包括摄像头：
```javascript
const video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
video.srcObject = stream;
});
```
当用户点击“拍照”按钮时，我们可以使用canvas元素来捕获当前视频帧，并将其转换为图片，以便后续处理：
```javascript
document.getElementById('snap').addEventListener('click', () => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgData = canvas.toDataURL();
// 这里可以将imgData发送到服务器，或者继续在本地处理
});
```
接下来，我们使用JavaScript的二维码解码库，例如`qrcode-decoder-js`，来解析图片中的二维码。需要引入该库，可以通过CDN或npm安装后引入：
```javascript
<script src="https://cdn.jsdelivr.net/npm/qrcode-decoder-js@latest"></script>
```
然后，我们创建一个解码函数，处理图片数据并获取二维码内容：
```javascript
function decodeQRCode(imgData) {
const decoder = new QRCodeDecoder();
const img = new Image();
img.src = imgData;
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
const imageData = ctx.getImageData(0, 0, img.width, img.height);
try {
const result = decoder.decodeFromImageData(imageData);
console.log('二维码数据:', result.text);
// 处理解码后的数据，如解决中文乱码
} catch (err) {
console.error('解码失败:', err);
}
};
}
```
在处理中文乱码问题时，通常是因为编码不匹配导致的。确保服务器和客户端都使用相同的字符集（如UTF-8），并且在获取数据后进行正确的解码。如果解码后的文本仍然存在乱码，可以尝试在解码前添加指定的字符集：
```javascript
let decodedText = atob(result.text.split(',')[1]); // base64解码
decodedText = new TextDecoder('utf-8').decode(new Uint8Array(decodedText)); // 使用utf-8解码
```
以上就是利用JavaScript和HTML实现调用摄像头扫码功能并解析二维码的全过程，包括解决可能出现的中文乱码问题。这种技术在前端开发中非常实用，可以帮助提升用户体验，使得Web应用能够更便捷地获取和处理信息。
js实现扫码功能-js解析二维码.zip （4个子文件） 
js实现扫码功能-js解析二维码 
测试.png 3KB
webqr.js 6KB
saoma.html 6KB
我和我的蓝天白云2022-11-13不能在线识别，要先拍照，再识别照片图像
