Có thể sử dụng thư viện `html5-qrcode` với phiên bản của bạn. Dưới đây là các bước chi tiết để cài đặt và sử dụng `html5-qrcode` trong dự án của bạn.
### Bước 1: Cài đặt thư viện `html5-qrcode`
Thêm thư viện `html5-qrcode` vào dự án của bạn bằng cách chạy lệnh sau trong terminal:
```bash
npm install html5-qrcode
```
### Bước 2: Cập nhật component `SearchBar`
Sử dụng `html5-qrcode` để thay thế `react-qr-reader`. Dưới đây là cách bạn có thể cập nhật component `SearchBar` của mình:
```javascript
import React, { useState, useEffect, useRef } from 'react';
import { createClient } from '@supabase/supabase-js';
import ArtifactDetail from './ArtifactDetail';
import { Html5Qrcode } from 'html5-qrcode';
// Initialize Supabase client
const supabase = createClient(
process.env.REACT_APP_SUPABASE_URL,
process.env.REACT_APP_SUPABASE_ANON_KEY
);
const SearchBar = ({ onSearch }) => {
const [searchTerm, setSearchTerm] = useState('');
const [showScanner, setShowScanner] = useState(false);
const [selectedArtifact, setSelectedArtifact] = useState(null);
const scannerRef = useRef(null);
const handleSearch = () => {
onSearch(searchTerm);
};
const handleScan = async (decodedText, decodedResult) => {
if (decodedText) {
const scannedId = decodedText;
console.log("Đã quét mã QR, ID:", scannedId);
setSearchTerm(scannedId);
try {
const { data, error } = await supabase
.from('artifacts')
.select('*')
.eq('id', scannedId)
.single();
if (error) {
console.error('Lỗi khi tìm nạp chi tiết hiện vật:', error);
return;
}
setSelectedArtifact(data);
} catch (error) {
console.error('Lỗi không mong muốn:', error);
}
setShowScanner(false);
}
};
const handleScanError = (errorMessage) => {
console.error("Lỗi khi quét mã QR:", errorMessage);
};
const handleCloseDetail = () => {
setSelectedArtifact(null);
};
useEffect(() => {
if (showScanner && scannerRef.current) {
const scanner = new Html5Qrcode(scannerRef.current.id);
scanner.start(
{ facingMode: "environment" },
{ fps: 10, qrbox: 250 },
handleScan,
handleScanError
);
return () => {
scanner.stop().then(
() => {
console.log("Scanner stopped successfully");
},
(err) => {
console.error("Error stopping scanner:", err);
}
);
};
}
}, [showScanner]);
if (selectedArtifact) {
return (
setSearchTerm(e.target.value)}
placeholder="Tìm kiếm hiện vật..."
style={{
padding: '10px',
width: '300px',
borderRadius: '5px 0 0 5px',
border: '1px solid #ccc',
fontSize: '16px',
outline: 'none'
}}
/>
{showScanner && (
Đặt mã QR vào ô quét