Spaces:
Sleeping
Sleeping
| import { useRef, useState, useCallback, useEffect } from "react"; | |
| import { Camera, CameraOff, Aperture, X } from "lucide-react"; | |
| export default function CameraPanel({ onCapture, previewUrl, onReset }) { | |
| const videoRef = useRef(null); | |
| const canvasRef = useRef(null); | |
| const streamRef = useRef(null); | |
| const [isCameraOn, setIsCameraOn] = useState(false); | |
| const [cameraError, setCameraError] = useState(""); | |
| const [isVideoReady, setIsVideoReady] = useState(false); | |
| // Cleanup saat unmount | |
| useEffect(() => { | |
| return () => { | |
| stopCamera(); | |
| }; | |
| }, []); | |
| // Assign stream ke video element setelah state berubah dan element ter-render | |
| useEffect(() => { | |
| if (isCameraOn && videoRef.current && streamRef.current) { | |
| const video = videoRef.current; | |
| video.srcObject = streamRef.current; | |
| video.onloadedmetadata = () => { | |
| video.play() | |
| .then(() => setIsVideoReady(true)) | |
| .catch((err) => console.error("Video play error:", err)); | |
| }; | |
| } | |
| }, [isCameraOn]); | |
| async function startCamera() { | |
| setCameraError(""); | |
| setIsVideoReady(false); | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ | |
| video: { | |
| facingMode: "environment", | |
| width: { ideal: 1280 }, | |
| height: { ideal: 720 }, | |
| }, | |
| }); | |
| streamRef.current = stream; | |
| // Set state dulu agar video element di-render, | |
| // lalu useEffect di atas akan assign stream | |
| setIsCameraOn(true); | |
| } catch (err) { | |
| console.error("Camera error:", err); | |
| if (err.name === "NotAllowedError") { | |
| setCameraError("Izin kamera ditolak. Aktifkan izin kamera pada browser."); | |
| } else if (err.name === "NotFoundError") { | |
| setCameraError("Kamera tidak ditemukan pada perangkat ini."); | |
| } else { | |
| setCameraError("Gagal mengaktifkan kamera. Coba lagi."); | |
| } | |
| } | |
| } | |
| function stopCamera() { | |
| if (streamRef.current) { | |
| streamRef.current.getTracks().forEach((track) => track.stop()); | |
| streamRef.current = null; | |
| } | |
| if (videoRef.current) { | |
| videoRef.current.srcObject = null; | |
| } | |
| setIsCameraOn(false); | |
| setIsVideoReady(false); | |
| } | |
| const captureImage = useCallback(() => { | |
| if (!videoRef.current || !canvasRef.current) return; | |
| const video = videoRef.current; | |
| const canvas = canvasRef.current; | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| const ctx = canvas.getContext("2d"); | |
| ctx.drawImage(video, 0, 0); | |
| canvas.toBlob( | |
| (blob) => { | |
| if (blob) { | |
| const file = new File([blob], `capture_${Date.now()}.jpg`, { | |
| type: "image/jpeg", | |
| }); | |
| onCapture(file); | |
| stopCamera(); | |
| } | |
| }, | |
| "image/jpeg", | |
| 0.9 | |
| ); | |
| }, [onCapture]); | |
| return ( | |
| <div className="space-y-4"> | |
| {cameraError && ( | |
| <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-3 text-sm text-red-700"> | |
| {cameraError} | |
| </div> | |
| )} | |
| {previewUrl ? ( | |
| <div className="relative"> | |
| <img | |
| src={previewUrl} | |
| alt="Captured" | |
| className="w-full rounded-xl border border-slate-200 object-contain max-h-72" | |
| /> | |
| <button | |
| onClick={() => { | |
| onReset(); | |
| }} | |
| className="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5 shadow-md transition-colors cursor-pointer" | |
| > | |
| <X className="w-4 h-4" /> | |
| </button> | |
| </div> | |
| ) : isCameraOn ? ( | |
| <div className="relative rounded-xl overflow-hidden border border-slate-200 bg-slate-900"> | |
| {/* Loading indicator sebelum video ready */} | |
| {!isVideoReady && ( | |
| <div className="absolute inset-0 flex items-center justify-center z-10"> | |
| <div className="text-center"> | |
| <div className="w-8 h-8 border-3 border-white border-t-transparent rounded-full animate-spin mx-auto mb-2"></div> | |
| <p className="text-xs text-white/70">Memuat kamera...</p> | |
| </div> | |
| </div> | |
| )} | |
| <video | |
| ref={videoRef} | |
| autoPlay | |
| playsInline | |
| muted | |
| className="w-full object-cover" | |
| style={{ minHeight: "280px", maxHeight: "400px" }} | |
| /> | |
| {isVideoReady && ( | |
| <div className="absolute bottom-3 left-0 right-0 flex justify-center gap-3"> | |
| <button | |
| onClick={captureImage} | |
| className="bg-white hover:bg-slate-100 text-slate-800 rounded-full p-3 shadow-lg transition-colors cursor-pointer" | |
| title="Ambil Gambar" | |
| > | |
| <Aperture className="w-6 h-6" /> | |
| </button> | |
| <button | |
| onClick={stopCamera} | |
| className="bg-red-500 hover:bg-red-600 text-white rounded-full p-3 shadow-lg transition-colors cursor-pointer" | |
| title="Matikan Kamera" | |
| > | |
| <CameraOff className="w-6 h-6" /> | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| ) : ( | |
| <div className="border-2 border-dashed border-slate-300 rounded-xl p-8 md:p-12 text-center"> | |
| <Camera className="w-10 h-10 text-slate-400 mx-auto mb-3" /> | |
| <p className="text-sm text-slate-600 mb-4"> | |
| Gunakan kamera untuk mengambil gambar kendaraan | |
| </p> | |
| <button | |
| onClick={startCamera} | |
| className="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors cursor-pointer" | |
| > | |
| <Camera className="w-4 h-4" /> | |
| Aktifkan Kamera | |
| </button> | |
| </div> | |
| )} | |
| <canvas ref={canvasRef} className="hidden" /> | |
| </div> | |
| ); | |
| } | |