TopDev
#ReactJS

Xây dựng chức năng quét QR code từ trình duyệt ở mobile

minhdev 📖 2 phút đọc

Để thực hiện việc bật camera điện thoại và quét mã QR khi người dùng nhấn vào một icon trong React.js, bạn có thể sử dụng thư viện như react-qr-reader hoặc html5-qrcode. Đây là các bước cơ bản để triển khai:

1. Cài đặt thư viện#

Bạn có thể cài đặt thư viện react-qr-reader hoặc html5-qrcode bằng npm hoặc yarn:

npm install react-qr-reader Hoặc: npm install html5-qrcode

2. Code cơ bản với react-qr-reader#

Dưới đây là cách sử dụng react-qr-reader:

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

const QRCodeScanner = () => { const [qrData, setQrData] = useState(null); const [showScanner, setShowScanner] = useState(false);

const handleScan = (data) => { if (data) { setQrData(data); setShowScanner(false); // Tắt camera sau khi quét } };

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

return (

<button onClick={() => setShowScanner(!showScanner)}> {showScanner ? 'Đóng camera' : 'Quét mã QR'} 

  {showScanner && (
    <QrReader
      onResult={(result, error) => {
        if (!!result) {
          handleScan(result?.text);
        }
        if (!!error) {
          handleError(error);
        }
      }}
      style={{ width: '100%' }}
    />
  )}

  {qrData && <p>Mã QR đã quét: {qrData}</p>}
</div>

); };

export default QRCodeScanner; `

3. Code cơ bản với html5-qrcode#

Nếu bạn muốn sử dụng html5-qrcode, dưới đây là ví dụ:

` import React, { useEffect, useRef, useState } from 'react'; import { Html5QrcodeScanner } from 'html5-qrcode';

const QRCodeScanner = () => { const [qrData, setQrData] = useState(null); const [showScanner, setShowScanner] = useState(false); const scannerRef = useRef(null);

useEffect(() => { if (showScanner) { const html5QrCodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, qrbox: { width: 250, height: 250 } } );

  html5QrCodeScanner.render(
    (text) => {
      setQrData(text);
      setShowScanner(false); // Tắt camera sau khi quét
      html5QrCodeScanner.clear();
    },
    (error) => {
      console.error(error);
    }
  );

  return () => {
    html5QrCodeScanner.clear(); // Dọn dẹp khi component bị unmount
  };
}

}, [showScanner]);

return (

<button onClick={() => setShowScanner(!showScanner)}> {showScanner ? 'Đóng camera' : 'Quét mã QR'} 

  {showScanner && <div id="reader" style={{ width: '100%' }}></div>}

  {qrData && <p>Mã QR đã quét: {qrData}</p>}
</div>

); };

export default QRCodeScanner; `

4. Các bước bổ sung#

  • Cấp quyền camera: Đảm bảo ứng dụng của bạn có quyền truy cập camera trên thiết bị.

  • Triển khai trên HTTPS: Trình duyệt chỉ cho phép truy cập camera khi trang web chạy trên HTTPS hoặc localhost.

  • Kiểm tra trên thiết bị di động: Đảm bảo kiểm tra trên điện thoại hoặc trình duyệt có hỗ trợ camera.

Nếu cần thêm chi tiết hoặc gặp lỗi, hãy cung cấp thêm thông tin để mình hỗ trợ nhé! 😊

Bài liên quan trong #ReactJS

✓ Đã sao chép link