当前位置：首页 > React

react实现扫码

2026-01-26 23:47:08React

React 实现扫码功能的方法

在 React 中实现扫码功能可以通过多种方式完成，以下是几种常见的方法：

使用第三方库 react-qr-reader

安装 react-qr-reader 库：

npm install react-qr-reader

在组件中使用：

import React, { useState } from 'react';
import QrReader from 'react-qr-reader';

const QRScanner = () => {
  const [result, setResult] = useState('');

  const handleScan = (data) => {
    if (data) {
      setResult(data);
    }
  };

  const handleError = (err) => {
    console.error(err);
  };

  return (
    <div>
      <QrReader
        delay={300}
        onError={handleError}
        onScan={handleScan}
        style={{ width: '100%' }}
      />
      <p>扫描结果: {result}</p>
    </div>
  );
};

export default QRScanner;

使用原生 HTML5 API

通过浏览器原生 API 实现扫码功能：

import React, { useRef, useState } from 'react';

const QRScanner = () => {
  const videoRef = useRef(null);
  const [result, setResult] = useState('');

  const startScan = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoRef.current.srcObject = stream;

    // 这里可以使用第三方库如 Instascan 或 jsQR 处理视频流
  };

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline />
      <button onClick={startScan}>开始扫描</button>
      <p>扫描结果: {result}</p>
    </div>
  );
};

export default QRScanner;

使用 jsQR 库处理二维码

安装 jsqr 库：

npm install jsqr

结合 jsQR 处理视频流：

import React, { useRef, useState, useEffect } from 'react';
import jsQR from 'jsqr';

const QRScanner = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const [result, setResult] = useState('');

  useEffect(() => {
    const startScan = async () => {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      videoRef.current.srcObject = stream;

      const canvas = canvasRef.current;
      const context = canvas.getContext('2d');

      const scanFrame = () => {
        if (videoRef.current.readyState === videoRef.current.HAVE_ENOUGH_DATA) {
          canvas.height = videoRef.current.videoHeight;
          canvas.width = videoRef.current.videoWidth;
          context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);

          const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
          const code = jsQR(imageData.data, imageData.width, imageData.height);

          if (code) {
            setResult(code.data);
          }
        }
        requestAnimationFrame(scanFrame);
      };
      scanFrame();
    };
    startScan();
  }, []);

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline style={{ display: 'none' }} />
      <canvas ref={canvasRef} />
      <p>扫描结果: {result}</p>
    </div>
  );
};

export default QRScanner;