&

前端使用 JavaScript 實現(xiàn)網(wǎng)頁掃碼功能

freeflydom

2024年8月12日 9:38 本文熱度 1541

在數(shù)字化時代，二維碼已經(jīng)滲透到我們生活的方方面面。從移動支付到產(chǎn)品溯源，二維碼憑借其便捷性和高效性，成為了信息傳遞的重要載體。而隨著前端技術(shù)的不斷發(fā)展，我們甚至可以使用 JavaScript 在網(wǎng)頁端實現(xiàn)二維碼掃描功能，為用戶提供更加便捷的操作體驗。

本文將帶您深入了解如何使用 JavaScript 調(diào)用攝像頭，結(jié)合 jsQR 庫，以及如何控制閃光燈，最終實現(xiàn)一個功能完善的網(wǎng)頁掃碼應(yīng)用。

一、項目概述

我們將創(chuàng)建一個簡單的網(wǎng)頁應(yīng)用，該應(yīng)用能夠：

調(diào)用設(shè)備攝像頭，獲取實時視頻流。
在網(wǎng)頁上創(chuàng)建一個掃描區(qū)域，用戶可以將二維碼放置在該區(qū)域內(nèi)進行掃描。
使用 jsQR 庫解碼掃描區(qū)域內(nèi)的二維碼圖像數(shù)據(jù)，獲取二維碼內(nèi)容。
提供手動輸入二維碼內(nèi)容的功能。
如果設(shè)備支持，還可以控制閃光燈的開關(guān)，以便在光線不足的情況下進行掃描。

二、實現(xiàn)步驟

1. HTML 結(jié)構(gòu)

首先，我們需要構(gòu)建基本的 HTML 結(jié)構(gòu)，包括：

<video> 標簽：用于展示攝像頭捕獲的實時視頻流。
<canvas> 標簽：用于繪制視頻幀和掃描區(qū)域，并從中獲取圖像數(shù)據(jù)。
<div> 標簽：用于創(chuàng)建掃描區(qū)域、按鈕組等 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 代碼是實現(xiàn)掃碼功能的核心部分，主要包括以下幾個步驟：

獲取攝像頭權(quán)限: 使用 navigator.mediaDevices.getUserMedia() 方法請求訪問用戶的攝像頭。
播放視頻流: 將獲取到的視頻流賦值給 <video> 標簽的 srcObject 屬性，并調(diào)用 video.play() 方法開始播放。
創(chuàng)建掃描循環(huán): 使用 requestAnimationFrame() 方法創(chuàng)建一個循環(huán)，不斷地從視頻流中獲取幀圖像，并進行二維碼解碼。
繪制視頻幀: 在每一幀中，使用 canvas.drawImage() 方法將視頻幀繪制到 <canvas> 元素上。
獲取掃描區(qū)域圖像數(shù)據(jù): 使用 canvas.getImageData() 方法獲取掃描區(qū)域的圖像數(shù)據(jù)。
解碼二維碼: 使用 jsQR 庫的 jsQR() 方法解碼圖像數(shù)據(jù)，如果解碼成功，則獲取二維碼內(nèi)容。
處理掃描結(jié)果: 對解碼后的二維碼內(nèi)容進行處理，例如跳轉(zhuǎn)到鏈接、顯示信息等。
實現(xiàn)其他功能: 實現(xiàn)手動輸入二維碼內(nèi)容和控制閃光燈等功能。

// 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;


// 獲取攝像頭權(quán)限并開始播放視頻流
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;


    // 設(shè)置畫布大小
    overlay.width = videoWidth;
    overlay.height = videoHeight;


    // 將視頻幀繪制到畫布上
    canvas.drawImage(video, 0, 0, videoWidth, videoHeight);


    // ...獲取掃描區(qū)域圖像數(shù)據(jù)


    // 使用 jsQR 庫解碼二維碼
    const code = jsQR(imageData.data, imageData.width, imageData.height);


    // 如果成功解碼，則停止掃描并處理結(jié)果
    if (code) {
      scanning = false;
      handleScanResult(code.data);
    } else {
      requestAnimationFrame(scan);
    }
  }
}


// 處理掃描結(jié)果
function handleScanResult(data) {
  alert("掃描結(jié)果：" + data);


  // 這里可以根據(jù)掃描結(jié)果進行相應(yīng)的操作，例如跳轉(zhuǎn)到鏈接或顯示信息
}


// 手動輸入按鈕點擊事件
manualInputBtn.addEventListener('click', function() {
  // ...
});


// 閃光燈按鈕點擊事件
flashBtn.addEventListener('click', function() {
  // ...
});