h5调用摄像头拍照与二维码扫描

技术概述

• 请求权限: 请求用户授权访问摄像头。
• 访问媒体: 使用 getUserMedia 获取摄像头视频流。
• 显示视频流: 将视频流绑定到 <video> 元素中。
• 拍照: 使用 <canvas> 捕获视频帧并生成图片。
• 扫码: 使用 jsQR 库扫描二维码内容。

拍摄功能

HTML 结构

<video id="video" width="300" height="200" autoplay></video>
<button id="capture">拍照</button>
<canvas id="canvas" style="display:none;"></canvas>
<img id="photo" alt="拍摄照片">

JavaScript 代码

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');
const captureButton = document.getElementById('capture');

async function initCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
  } catch (error) {
    console.error('访问摄像头失败:', error);
  }
}

captureButton.addEventListener('click', function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  photo.src = canvas.toDataURL('image/png');
});

initCamera();

扫码功能

引入 jsQR 库

<script src="https://unpkg.com/jsqr@1.4.0/dist/jsQR.min.js"></script>

HTML 结构

<video id="video" width="300" height="200" autoplay></video>
<button id="scan">开始扫码</button>
<div id="result"></div>

JavaScript 代码

const video = document.getElementById('video');
const scanButton = document.getElementById('scan');
const resultDiv = document.getElementById('result');

async function initCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
  } catch (error) {
    console.error('访问摄像头失败:', error);
  }
}

function scanQRCode() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const video = document.getElementById('video');
  const scanner = new JsQR('#video', (code) => {
    if (code) {
      resultDiv.textContent = '二维码内容: ' + code.data;
    }
  }, video, canvas, context);
  scanner.start();
}

scanButton.addEventListener('click', function() {
  if (this.textContent === '开始扫码') {
    this.textContent = '停止扫码';
    initCamera();
  } else {
    this.textContent = '开始扫码';
    // 停止摄像头流
  }
});

initCamera();

使用方法

1. 初始化摄像头: 调用 initCamera() 函数以访问摄像头并显示视频流。
2. 拍照: 点击“拍照”按钮，使用 <canvas> 捕获当前视频帧并生成图片。
3. 扫码: 点击“开始扫码”按钮，使用 jsQR 库检测视频流中的二维码内容，并显示结果。

注意事项

• 确保浏览器支持 getUserMedia API。
• 用户需授权摄像头访问权限。
• 使用 jsQR 库扫描二维码需确保网络可访问其 CDN 资源。