[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_93":92,"_32":44,"_101":83,"_27":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":48,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":48,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",5,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","f6d4d582-27a9-11f0-9edc-569c3dd06744","name","fileType","http","content","/**\n * This val creates a QR code scanner using the device's camera.\n * It uses the jsQR library to decode QR codes from video frames.\n * The app displays the scanned QR code content and additional information.\n * \n * We'll use the following approach:\n * 1. Set up a video element to capture camera feed\n * 2. Use canvas to process video frames\n * 3. Use jsQR to decode QR codes from the frames\n * 4. Display the QR code content and additional information\n * 5. Add extensive debugging to identify issues\n */\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport jsQR from \"https://esm.sh/jsqr\";\n\nfunction App() {\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n const [qrCode, setQrCode] = useState(null);\n const [qrInfo, setQrInfo] = useState(null);\n const [error, setError] = useState(null);\n const [debug, setDebug] = useState([]);\n\n const addDebug = (message: string) => {\n setDebug(prev => [...prev, `${new Date().toISOString()}: ${message}`]);\n };\n\n useEffect(() => {\n const startCamera = async () => {\n try {\n addDebug(\"Attempting to access camera...\");\n const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\" } });\n addDebug(\"Camera access granted.\");\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n addDebug(\"Video source set.\");\n videoRef.current.onloadedmetadata = () => {\n addDebug(`Video dimensions: ${videoRef.current!.videoWidth}x${videoRef.current!.videoHeight}`);\n };\n } else {\n addDebug(\"Video ref is null.\");\n }\n } catch (error) {\n console.error(\"Error accessing camera:\", error);\n setError(`Error accessing camera: ${error}`);\n addDebug(`Camera access error: ${error}`);\n }\n };\n\n startCamera();\n return () => {\n if (videoRef.current && videoRef.current.srcObject) {\n const tracks = (videoRef.current.srcObject as MediaStream).getTracks();\n tracks.forEach(track => track.stop());\n addDebug(\"Camera stopped.\");\n }\n };\n }, []);\n\n useEffect(() => {\n const scanQRCode = () => {\n if (videoRef.current && canvasRef.current) {\n const video = videoRef.current;\n const canvas = canvasRef.current;\n const context = canvas.getContext('2d');\n\n if (context && video.readyState === video.HAVE_ENOUGH_DATA) {\n canvas.height = video.videoHeight;\n canvas.width = video.videoWidth;\n context.drawImage(video, 0, 0, canvas.width, canvas.height);\n const imageData = context.getImageData(0, 0, canvas.width, canvas.height);\n addDebug(`Scanning frame: ${canvas.width}x${canvas.height}`);\n const code = jsQR(imageData.data, imageData.width, imageData.height);\n\n if (code) {\n setQrCode(code.data);\n setQrInfo({\n location: code.location,\n version: code.version,\n moduleSize: code.moduleSize,\n });\n addDebug(`QR Code found: ${code.data}`);\n }\n } else {\n addDebug(`Video not ready. ReadyState: ${video.readyState}`);\n }\n } else {\n addDebug(\"Video or canvas ref is null.\");\n }\n requestAnimationFrame(scanQRCode);\n };\n\n scanQRCode();\n }, []);\n\n return (\n

QR Code Scanner

\n {error &&

{error}

}\n {qrCode && (\n

Scanned QR Code:

{qrCode}

Additional Information:

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

\n )}\n

Debug Log:

\n        {debug.join('\\n')}\n

\n \n View Source\n \n

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

\n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f0f0f0;\n }\n h1 {\n color: #333;\n }\n canvas {\n border: 2px solid #333;\n margin-bottom: 20px;\n }\n pre {\n background-color: #e0e0e0;\n padding: 10px;\n border-radius: 5px;\n overflow-x: auto;\n }\n`;\n\nexport default server;","createdAt",["D",1724427874094],"branchVersion","branchId","f6d274fe-27a9-11f0-9edc-569c3dd06744","id","f6d22e0e-27a9-11f0-9edc-569c3dd06744","QRCodeScanner",["D",1746227139237],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","d94f277a-b37f-4f26-9abc-7694e9eb756e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","f5b49853-c2ee-4295-85e9-f0a0c32af35f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},"branch",{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","curtcox","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlhYcFBTUEY0bVhuenlHd1pCbmpYckRLZlEifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":147,"_46":-5,"_47":48,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":48,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":148,"_78":149,"_80":150,"_82":25},"tree",[142],"files",[142],"counts",{"_131":60,"_132":133,"_134":60,"_135":136,"_137":138},"contents",[123],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":124,"_32":28,"_30":31,"_125":-5,"_40":41,"_39":14,"_126":48,"_37":127,"_13":128,"_33":34,"_35":36,"_24":25,"_129":-5,"_27":130},"f6ed860e-27a9-11f0-9edc-569c3dd06744","parentId","latest",["D",1724427874094],4,"label",[28],"pulls","branches",1,"forks","envVars",{"_139":60,"_141":60},"connections",{"_139":60,"_140":60},"count","unfilledCount","emptyCount",{"_42":124,"_32":28,"_30":31,"_125":-5,"_40":41,"_39":14,"_126":48,"_37":143,"_13":128,"_33":34,"_35":36,"_24":25,"_129":-5,"_144":145,"_27":146},["D",1724427874094],"children",[],[28],["D",1746227139237],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":54,"_97":98,"_99":25},{"_13":14,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_76":-5,"_120":184,"_185":186,"_187":188,"_189":25,"_190":25,"_191":25,"_192":48,"_193":-5,"_194":-7,"_195":-7,"_196":60,"_197":25,"_198":25,"_199":-5,"_200":25,"_201":25,"_202":25,"_203":-5},"ENV",{"_155":156,"_157":158,"_159":83,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v5