当前位置：首页 > React

react 实现扫码

2026-01-27 06:39:50React

React 实现扫码功能的方法

使用 `react-qr-reader` 库

安装 react-qr-reader 库：

npm install react-qr-reader

在组件中引入并使用：

import { QrReader } from 'react-qr-reader';

function ScanQRCode() {
  const [data, setData] = useState('');

  const handleScan = (result) => {
    if (result) {
      setData(result);
    }
  };

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

  return (
    <div>
      <QrReader
        delay={300}
        onError={handleError}
        onScan={handleScan}
        style={{ width: '100%' }}
      />
      <p>Scanned Data: {data}</p>
    </div>
  );
}

使用 `html5-qrcode` 库

安装 html5-qrcode：

npm install html5-qrcode

在组件中实现：

import { Html5QrcodeScanner } from 'html5-qrcode';

function ScanQRCode() {
  const [scanResult, setScanResult] = useState(null);

  useEffect(() => {
    const scanner = new Html5QrcodeScanner('reader', {
      qrbox: {
        width: 250,
        height: 250,
      },
      fps: 5,
    });

    scanner.render(success, error);

    function success(result) {
      scanner.clear();
      setScanResult(result);
    }

    function error(err) {
      console.warn(err);
    }
  }, []);

  return (
    <div>
      <div id="reader" style={{ width: '100%' }}></div>
      {scanResult && <p>Scanned Data: {scanResult}</p>}
    </div>
  );
}

使用原生 API 实现

通过浏览器的 getUserMedia API 访问摄像头：

function ScanQRCode() {
  const [scannedText, setScannedText] = useState('');

  const startScan = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const video = document.getElementById('video');
    video.srcObject = stream;
    video.play();

    // 使用第三方库如 `jsqr` 解析视频流中的二维码
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    setInterval(() => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      context.drawImage(video, 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) {
        setScannedText(code.data);
      }
    }, 100);
  };

  return (
    <div>
      <video id="video" style={{ width: '100%' }}></video>
      <button onClick={startScan}>Start Scan</button>
      <p>Scanned Data: {scannedText}</p>
    </div>
  );
}