福利视频1000,欧美成本人视频,国产免费无遮挡精品视频

前端使用 JavaScript 實現網頁掃碼功能

freeflydom

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

在數字化時代，二維碼已經滲透到我們生活的方方面面。從移動支付到產品溯源，二維碼憑借其便捷性和高效性，成為了信息傳遞的重要載體。而隨著前端技術的不斷發展，我們甚至可以使用 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() {
  // ...
});