前端黑科技：使用 JavaScript 实现网页扫码功能

来源：cnblogs　　作者：geekcjj　　时间：2024/8/19 17:03:35　　对本文有异议

在数字化时代，二维码已经渗透到我们生活的方方面面。从移动支付到产品溯源，二维码凭借其便捷性和高效性，成为了信息传递的重要载体。而随着前端技术的不断发展，我们甚至可以使用 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 id="video" autoplay></video>
  <canvas id="overlay" hidden></canvas>
  <div class="scan-area"></div>
  <div class="btn-group">
    <button id="manualInputBtn">手动输入</button>
    <button id="flashBtn">闪光灯</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 样式

为了提升用户体验，我们需要为页面元素添加一些样式：

/* style.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.js
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(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 id="video" autoplay></video>
<canvas id="overlay" hidden></canvas>
 
<div class="scan-area"></div>
 
<div class="btn-group">
  <button id="manualInputBtn">手动输入</button>
  <button id="flashBtn">闪光灯</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>