/** * This val creates a QR code scanner using the device's camera. * It uses the jsQR library to decode QR codes from video frames. * The app displays the scanned QR code content and additional information. * * We'll use the following approach: * 1. Set up a video element to capture camera feed * 2. Use canvas to process video frames * 3. Use jsQR to decode QR codes from the frames * 4. Display the QR code content and additional information * 5. Add extensive debugging to identify issues */ /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import jsQR from "https://esm.sh/jsqr"; function App() { const videoRef = useRef(null); const canvasRef = useRef(null); const [qrCode, setQrCode] = useState(null); const [qrInfo, setQrInfo] = useState(null); const [error, setError] = useState(null); const [debug, setDebug] = useState([]); const addDebug = (message: string) => { setDebug(prev => [...prev, `${new Date().toISOString()}: ${message}`]); }; useEffect(() => { const startCamera = async () => { try { addDebug("Attempting to access camera..."); const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }); addDebug("Camera access granted."); if (videoRef.current) { videoRef.current.srcObject = stream; addDebug("Video source set."); videoRef.current.onloadedmetadata = () => { addDebug(`Video dimensions: ${videoRef.current!.videoWidth}x${videoRef.current!.videoHeight}`); }; } else { addDebug("Video ref is null."); } } catch (error) { console.error("Error accessing camera:", error); setError(`Error accessing camera: ${error}`); addDebug(`Camera access error: ${error}`); } }; startCamera(); return () => { if (videoRef.current && videoRef.current.srcObject) { const tracks = (videoRef.current.srcObject as MediaStream).getTracks(); tracks.forEach(track => track.stop()); addDebug("Camera stopped."); } }; }, []); useEffect(() => { const scanQRCode = () => { if (videoRef.current && canvasRef.current) { const video = videoRef.current; const canvas = canvasRef.current; const context = canvas.getContext('2d'); if (context && video.readyState === video.HAVE_ENOUGH_DATA) { canvas.height = video.videoHeight; canvas.width = video.videoWidth; context.drawImage(video, 0, 0, canvas.width, canvas.height); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); addDebug(`Scanning frame: ${canvas.width}x${canvas.height}`); const code = jsQR(imageData.data, imageData.width, imageData.height); if (code) { setQrCode(code.data); setQrInfo({ location: code.location, version: code.version, moduleSize: code.moduleSize, }); addDebug(`QR Code found: ${code.data}`); } } else { addDebug(`Video not ready. ReadyState: ${video.readyState}`); } } else { addDebug("Video or canvas ref is null."); } requestAnimationFrame(scanQRCode); }; scanQRCode(); }, []); return (

QR Code Scanner

{error &&

{error}

} {qrCode && (

Scanned QR Code:

{qrCode}

Additional Information:

{JSON.stringify(qrInfo, null, 2)}

)}

Debug Log:

        {debug.join('\n')}

View Source

); } function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` QR Code Scanner

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } h1 { color: #333; } canvas { border: 2px solid #333; margin-bottom: 20px; } pre { background-color: #e0e0e0; padding: 10px; border-radius: 5px; overflow-x: auto; } `; export default server;

QRCodeScanner