如何在ReactJS中使用zxing实现二维码扫描？

Question

我尝试使用多种方式扫描二维码，例如react-qr-reader、react-qr-scanner，但所有这些都与最新的react版本存在依赖问题。 因此我尝试了 zxing ，它正在工作，但它无法识别 QR，我不确定此代码中是否缺少任何内容。

import React,{ useState } from 'react'
import AdminNavBar from './AdminNavBar'
import { useZxing } from "react-zxing"

const ScanQR = () => {

    const [result, setResult] = useState("");
    const { ref } = useZxing({
      onDecodeResult(result) {
        setResult(result.getText());
        console.log(result)
      },
    });

  return (
    <div>
        
        <AdminNavBar/>
        <div className="container">
            <div className="row">
                <div className="col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    
                <>
                <video ref={ref} />
                <p>
                    <span>Last result:</span>
                    <span>{result}</span>
                </p>
                </>                  

                </div>
            </div>
        </div>

    </div>
  )
}

export default ScanQR

Answer 1

看来您可能缺少一些重要的部分，例如（初始化相机流）和（处理错误）。

import { BrowserBarcodeReader } from '@zxing/library';

const ScanQR = () => {
    const [result, setResult] = useState('');
    
    useEffect(() => {
        const codeReader = new BrowserBarcodeReader();
        codeReader
            .decodeOnceFromStream(undefined, 'video')
            .then(result => {
                setResult(result.text);
                console.log(result.text);
            })
            .catch(error => {
                console.error(error);
            });

        return () => {
            codeReader.reset();
        };
    }, []);

    return (
    //...
    )
}

export default ScanQR