\n \n \n \n\n",[],[90,139],"789e952e-3985-11f1-8b11-42b51c65c3df","favicon.svg","019d95fc-73ea-733f-8112-e4ead7373891",["D",1776338084214],"\n",[],[90,147],"e8f5ec1a-3984-11f1-ab80-42b51c65c3df","components","019d95fc-73ea-733f-8112-e3d675782b43",["D",1776337843007],[159],[90,154],{"_35":160,"_13":161,"_64":162,"_66":155,"_67":68,"_69":163,"_71":72,"_37":164,"_17":74,"_75":120,"_77":165,"_79":50,"_80":-5,"_100":166,"_18":167},"75f6069a-3985-11f1-b5eb-42b51c65c3df","App.tsx","019d95fc-73ea-733f-8112-de225c091646",5,["D",1776338079753],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { RoomClient } from \"../webrtc.ts\";\n\nfunction generateId() {\n return Math.random().toString(36).slice(2, 8);\n}\n\nfunction getRoomFromHash() {\n return location.hash.slice(1) || \"\";\n}\n\nexport function App() {\n const [roomId, setRoomId] = useState(getRoomFromHash);\n const [joined, setJoined] = useState(false);\n const [error, setError] = useState(\"\");\n const [peerStreams, setPeerStreams] = useState>(new Map());\n const [localStream, setLocalStream] = useState(null);\n const [muted, setMuted] = useState(false);\n const [videoOff, setVideoOff] = useState(false);\n\n const localVideoRef = useRef(null);\n const clientRef = useRef(null);\n const clientIdRef = useRef(generateId());\n\n // Create or join a room\n const joinRoom = useCallback(async () => {\n setError(\"\");\n const room = roomId.trim() || generateId();\n setRoomId(room);\n location.hash = room;\n\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: true,\n audio: true,\n });\n setLocalStream(stream);\n\n if (localVideoRef.current) {\n localVideoRef.current.srcObject = stream;\n }\n\n const client = new RoomClient(room, clientIdRef.current, stream, {\n onPeerStream: (peerId, peerStream) => {\n setPeerStreams((prev) => {\n const next = new Map(prev);\n next.set(peerId, peerStream);\n return next;\n });\n },\n onPeerLeft: (peerId) => {\n setPeerStreams((prev) => {\n const next = new Map(prev);\n next.delete(peerId);\n return next;\n });\n },\n onError: (msg) => setError(msg),\n });\n\n client.connect();\n clientRef.current = client;\n setJoined(true);\n } catch (err: any) {\n setError(err.message || \"Could not access camera/mic\");\n }\n }, [roomId]);\n\n const leaveRoom = useCallback(() => {\n clientRef.current?.disconnect();\n clientRef.current = null;\n localStream?.getTracks().forEach((t) => t.stop());\n setLocalStream(null);\n setPeerStreams(new Map());\n setJoined(false);\n location.hash = \"\";\n }, [localStream]);\n\n const toggleMute = () => {\n if (!localStream) return;\n const audioTrack = localStream.getAudioTracks()[0];\n if (audioTrack) {\n audioTrack.enabled = !audioTrack.enabled;\n setMuted(!audioTrack.enabled);\n }\n };\n\n const toggleVideo = () => {\n if (!localStream) return;\n const videoTrack = localStream.getVideoTracks()[0];\n if (videoTrack) {\n videoTrack.enabled = !videoTrack.enabled;\n setVideoOff(!videoTrack.enabled);\n }\n };\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n clientRef.current?.disconnect();\n localStream?.getTracks().forEach((t) => t.stop());\n };\n }, []);\n\n const totalVideos = 1 + peerStreams.size;\n const gridCols = totalVideos <= 1\n ? \"grid-cols-1\"\n : totalVideos <= 4\n ? \"grid-cols-2\"\n : \"grid-cols-3\";\n\n // ─── Lobby ──────────────────────────────────\n if (!joined) {\n return (\n

📹 Video Chat

\n Peer-to-peer video calls. No signups, no downloads, zero dependencies.\n WebRTC + SSE signaling on Val Town.\n

\n\n

\n setRoomId(e.target.value)}\n onKeyDown={(e: any) => e.key === \"Enter\" && joinRoom()}\n class=\"flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-blue-500\"\n />\n \n Join\n \n

\n\n {error &&

{error}

}\n\n \n view source\n \n

\n );\n }\n\n // ─── In-call ────────────────────────────────\n return (\n

\n {/* Header */}\n

\n Room:\n {roomId}\n \n {peerStreams.size} peer{peerStreams.size !== 1 ? \"s\" : \"\"} connected\n \n

\n \n

\n\n {error && (\n

{error}

\n )}\n\n {/* Video grid */}\n

\n {/* Local video */}\n

\n \n \n You {muted ? \"🔇\" : \"\"} {videoOff ? \"📷❌\" : \"\"}\n \n

\n\n {/* Remote videos */}\n {[...peerStreams.entries()].map(([peerId, stream]) => (\n \n ))}\n

\n\n {/* Controls */}\n

\n \n {muted ? \"🔇 Unmute\" : \"🎤 Mute\"}\n \n \n {videoOff ? \"📷 Start Video\" : \"📹 Stop Video\"}\n \n \n ✋ Leave\n \n

\n );\n}\n\n// ─── Sub-components ────────────────────────────\n\nfunction RemoteVideo({ peerId, stream }: { peerId: string; stream: MediaStream }) {\n const videoRef = useRef(null);\n\n useEffect(() => {\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n }\n }, [stream]);\n\n return (\n

\n );\n}\n\nfunction CopyLink({ roomId }: { roomId: string }) {\n const [copied, setCopied] = useState(false);\n\n const copy = async () => {\n const url = `${location.origin}${location.pathname}#${roomId}`;\n await navigator.clipboard.writeText(url);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n return (\n \n {copied ? \"✅ Copied!\" : \"📋 Copy invite link\"}\n \n );\n}\n",[],[90,154,161],"e8df5482-3984-11f1-ab80-42b51c65c3df",["D",1776337843007],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_212":208},"org",{"_11":12,"_206":-5,"_207":208,"_175":176,"_209":210,"_211":50},"branch",{"_17":85,"_13":16,"_35":68,"_41":168,"_44":36,"_45":202,"_203":52,"_204":42,"_205":56,"_57":14,"_53":12},72,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":168,"_13":14,"_37":283,"_48":-5,"_170":50,"_51":52,"_171":52,"_172":173,"_174":-5,"_175":176,"_177":65,"_178":72,"_179":-5,"_180":-5,"_181":93,"_55":182,"_183":-5,"_184":-5,"_185":-5,"_186":-5,"_187":188,"_189":188,"_190":191,"_192":191,"_193":191,"_194":188,"_195":188,"_196":284,"_198":285,"_200":286,"_49":50},[253,261,262],"files",[253,254,255,256,257,258,259,260,261,262],"counts",{"_244":93,"_245":74,"_246":93,"_34":247,"_248":249},[238,239,240],"upstreamProject",{"_35":42,"_13":58,"_172":173,"_174":235,"_51":52,"_196":236},"upstreamBranch",{"_35":36,"_37":233,"_39":234,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789703844&sig=bdf767709e40ba1b9e613ffe6993e9dbbc6a1ac55ed3cde5409063e74a2d7a2b",{"_11":54,"_212":237},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789703844&sig=6be8e4d7c5309345a7db4e21c417465aa9ad015fadd14cd52e38683324f24b7f",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":74,"_71":72,"_37":92,"_17":93,"_75":94,"_77":-5,"_79":50,"_80":-5,"_18":243},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":86,"_17":74,"_75":24,"_77":87,"_79":50,"_80":-5,"_18":242},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":241},[63],[83],[90],"pulls","branches","forks",{"_250":93,"_252":93},"connections",{"_250":93,"_251":93},"count","unfilledCount","emptyCount",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":74,"_71":72,"_37":106,"_17":93,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":281,"_18":282},{"_35":153,"_13":154,"_64":155,"_66":91,"_67":68,"_69":74,"_71":72,"_37":156,"_17":93,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":279,"_18":280},{"_35":160,"_13":161,"_64":162,"_66":155,"_67":68,"_69":163,"_71":72,"_37":164,"_17":74,"_75":120,"_77":165,"_79":50,"_80":-5,"_100":277,"_18":278},{"_35":146,"_13":147,"_64":148,"_66":91,"_67":68,"_69":31,"_71":72,"_37":149,"_17":74,"_75":24,"_77":150,"_79":50,"_80":-5,"_100":275,"_18":276},{"_35":138,"_13":139,"_64":140,"_66":91,"_67":68,"_69":141,"_71":72,"_37":142,"_17":74,"_75":24,"_77":143,"_79":50,"_80":-5,"_100":273,"_18":274},{"_35":131,"_13":132,"_64":133,"_66":91,"_67":68,"_69":74,"_71":72,"_37":134,"_17":93,"_75":120,"_77":135,"_79":50,"_80":-5,"_100":271,"_18":272},{"_35":124,"_13":125,"_64":126,"_66":91,"_67":68,"_69":74,"_71":72,"_37":127,"_17":93,"_75":24,"_77":128,"_79":50,"_80":-5,"_100":269,"_18":270},{"_35":115,"_13":116,"_64":117,"_66":91,"_67":68,"_69":118,"_71":72,"_37":119,"_17":93,"_75":120,"_77":121,"_79":50,"_80":-5,"_100":267,"_18":268},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":103,"_17":74,"_75":24,"_77":87,"_79":50,"_80":-5,"_100":265,"_18":266},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":99,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_100":263,"_18":264},[],[63],[],[83],[],[90,116],[],[90,125],[],[90,132],[],[90,139],[],[90,147],[],[90,154,161],[255],[90,154],[254,256,257,258,259,260],[90],["D",1776337843007],{"_11":12,"_212":208},{"_11":12,"_206":-5,"_207":208,"_175":176,"_209":210,"_211":50},{"_17":85,"_13":16,"_35":68,"_41":168,"_44":36,"_45":202,"_203":52,"_204":42,"_205":56,"_57":14,"_53":12},"ctx",{"_196":-5,"_230":320,"_321":322,"_323":324,"_325":50,"_326":50,"_327":50,"_328":72,"_329":-5,"_330":-7,"_331":-7,"_332":93,"_333":50,"_334":50,"_335":-5,"_336":50,"_337":50,"_338":50,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":16,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Code