,,

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

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

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

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

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

一、項(xiàng)目概述

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

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

二、實(shí)現(xiàn)步驟

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

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

<video> 標(biāo)簽：用于展示攝像頭捕獲的實(shí)時(shí)視頻流。
<canvas> 標(biāo)簽：用于繪制視頻幀和掃描區(qū)域，并從中獲取圖像數(shù)據(jù)。
<div> 標(biāo)簽：用于創(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">手動(dòng)輸入</button>
    <button id="flashBtn">閃光燈</button>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

2. CSS 樣式

為了提升用戶(hù)體驗(yàn)，我們需要為頁(yè)面元素添加一些樣式：

/* 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 代碼是實(shí)現(xiàn)掃碼功能的核心部分，主要包括以下幾個(gè)步驟：

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


    // 開(kāi)始掃描
    scanning = true;
    requestAnimationFrame(scan);
  })
  .catch(err => {
    console.error("無(wú)法訪(fǎng)問(wèn)攝像頭：", err);
  });


// 掃描二維碼
function scan() {
  if (scanning) {
    const canvas = overlay.getContext('2d');
    const videoWidth = video.videoWidth;
    const videoHeight = video.videoHeight;


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


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


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


    // 使用 jsQR 庫(kù)解碼二維碼
    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é)果進(jìn)行相應(yīng)的操作，例如跳轉(zhuǎn)到鏈接或顯示信息
}


// 手動(dòng)輸入按鈕點(diǎn)擊事件
manualInputBtn.addEventListener('click', function() {
  // ...
});


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