\n \n \n \n\n",[19,101],"789e952e-3985-11f1-8b11-42b51c65c3df","favicon.svg","019d95fc-73ea-733f-8112-e4ead7373891",["D",1776338084214],"\n",[19,108],"e8f5ec1a-3984-11f1-ab80-42b51c65c3df","components","019d95fc-73ea-733f-8112-e3d675782b43",["D",1776337843007],"directory",[19,114],"e8f612a8-3984-11f1-ab80-42b51c65c3df",["D",1776337843007],[19],{"_36":119,"_13":19,"_68":71,"_70":-5,"_72":73,"_74":90,"_76":77,"_38":143,"_17":79,"_80":117,"_82":-5,"_84":51,"_85":-5,"_132":144,"_18":145},{"_36":135,"_13":136,"_68":137,"_70":-5,"_72":73,"_74":138,"_76":77,"_38":139,"_17":90,"_80":24,"_82":140,"_84":51,"_85":-5,"_132":141,"_18":142},{"_36":125,"_13":126,"_68":127,"_70":-5,"_72":73,"_74":128,"_76":77,"_38":129,"_17":90,"_80":130,"_82":131,"_84":51,"_85":-5,"_132":133,"_18":134},"51f2d606-3985-11f1-b5eb-42b51c65c3df","index.ts","019d95fc-73ea-733f-8112-fcfc6240c387",2,["D",1776338019322],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// ─── In-memory signaling state ───────────────────────────────────\n\ntype Client = {\n id: string;\n controller: ReadableStreamDefaultController;\n};\n\n// roomId -> list of connected SSE clients\nconst rooms = new Map();\n\nfunction sendToClient(client: Client, event: string, data: unknown) {\n try {\n client.controller.enqueue(\n new TextEncoder().encode(`event: ${event}\\ndata: ${JSON.stringify(data)}\\n\\n`),\n );\n } catch {\n // client disconnected\n }\n}\n\n// ─── API routes ──────────────────────────────────────────────────\n\n// SSE: join a room and listen for signaling messages\napp.get(\"/api/room/:roomId/events\", (c) => {\n const roomId = c.req.param(\"roomId\");\n const clientId = c.req.query(\"clientId\");\n if (!clientId) return c.text(\"clientId required\", 400);\n\n const stream = new ReadableStream({\n start(controller) {\n const client: Client = { id: clientId, controller };\n\n if (!rooms.has(roomId)) rooms.set(roomId, []);\n const room = rooms.get(roomId)!;\n\n // Tell the new peer about existing peers\n const existingPeerIds = room.map((c) => c.id);\n sendToClient(client, \"peers\", { peers: existingPeerIds });\n\n // Tell existing peers someone joined\n for (const peer of room) {\n sendToClient(peer, \"peer-joined\", { peerId: clientId });\n }\n\n room.push(client);\n console.log(`[room:${roomId}] ${clientId} joined (${room.length} peers)`);\n\n // Cleanup on disconnect — poll since we can't listen for abort\n const interval = setInterval(() => {\n try {\n // Try to send a comment (SSE keepalive)\n controller.enqueue(new TextEncoder().encode(\": keepalive\\n\\n\"));\n } catch {\n clearInterval(interval);\n const room = rooms.get(roomId);\n if (room) {\n const idx = room.findIndex((c) => c.id === clientId);\n if (idx !== -1) room.splice(idx, 1);\n for (const peer of room) {\n sendToClient(peer, \"peer-left\", { peerId: clientId });\n }\n if (room.length === 0) rooms.delete(roomId);\n console.log(`[room:${roomId}] ${clientId} left (${room.length} peers)`);\n }\n }\n }, 5000);\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n Connection: \"keep-alive\",\n },\n });\n});\n\n// POST signaling messages (offer, answer, ice-candidate) to a specific peer\napp.post(\"/api/room/:roomId/signal\", async (c) => {\n const roomId = c.req.param(\"roomId\");\n const body = await c.req.json();\n const { from, to, type, data } = body;\n\n const room = rooms.get(roomId);\n if (!room) return c.json({ error: \"room not found\" }, 404);\n\n const target = room.find((c) => c.id === to);\n if (!target) return c.json({ error: \"peer not found\" }, 404);\n\n sendToClient(target, \"signal\", { from, type, data });\n return c.json({ ok: true });\n});\n\n// Room info\napp.get(\"/api/room/:roomId/info\", (c) => {\n const roomId = c.req.param(\"roomId\");\n const room = rooms.get(roomId) || [];\n return c.json({ roomId, peers: room.length });\n});\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── Static files ────────────────────────────────────────────────\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[126],"859f584e-3985-11f1-ab17-42b51c65c3df","README.md","019d95fc-73ea-733f-8112-f8caa1731e61",7,["D",1776338106024],"# 📹 Web-Native Video Chat\n\nPeer-to-peer video calls with **zero npm dependencies** on the client. Just native browser APIs:\n\n- **WebRTC** — peer-to-peer video/audio streaming\n- **Server-Sent Events (SSE)** — real-time signaling\n- **`getUserMedia`** — camera/mic access\n\nVal Town acts as a lightweight signaling server to help browsers find each other. Once connected, all video flows directly between peers.\n\n## Architecture\n\n```mermaid\nsequenceDiagram\n participant A as Browser A\n participant S as Val Town (SSE Signaling)\n participant B as Browser B\n\n A->>S: GET /api/room/:id/events (SSE)\n B->>S: GET /api/room/:id/events (SSE)\n S-->>B: event: peer-joined\n B->>S: POST /api/room/:id/signal (offer)\n S-->>A: event: signal (offer)\n A->>S: POST /api/room/:id/signal (answer)\n S-->>B: event: signal (answer)\n Note over A,B: ICE candidates exchanged similarly\n A<-->B: WebRTC P2P video stream 🎥\n```\n\n## How it works\n\n1. **Lobby** — enter a room name (or get a random one) and click Join\n2. **Signaling** — the server brokers WebRTC offers/answers/ICE candidates via SSE\n3. **P2P connection** — once established, video streams directly between browsers\n4. **Share the link** — copy the invite URL for others to join the same room\n\n## Files\n\n- `index.ts` — Hono server with SSE signaling endpoints + static file serving\n- `frontend/webrtc.ts` — WebRTC + SSE signaling client (plain TypeScript, no framework)\n- `frontend/components/App.tsx` — React UI for lobby + video grid + controls\n",[],[136],["D",1776337843007],[146,147,148,149,150,151],[19],{"_36":113,"_13":114,"_68":115,"_70":71,"_72":73,"_74":90,"_76":77,"_38":167,"_17":79,"_80":117,"_82":-5,"_84":51,"_85":-5,"_132":168,"_18":169},{"_36":107,"_13":108,"_68":109,"_70":71,"_72":73,"_74":32,"_76":77,"_38":164,"_17":90,"_80":24,"_82":111,"_84":51,"_85":-5,"_132":165,"_18":166},{"_36":100,"_13":101,"_68":102,"_70":71,"_72":73,"_74":103,"_76":77,"_38":161,"_17":90,"_80":24,"_82":105,"_84":51,"_85":-5,"_132":162,"_18":163},{"_36":94,"_13":95,"_68":96,"_70":71,"_72":73,"_74":90,"_76":77,"_38":158,"_17":79,"_80":81,"_82":98,"_84":51,"_85":-5,"_132":159,"_18":160},{"_36":87,"_13":88,"_68":89,"_70":71,"_72":73,"_74":90,"_76":77,"_38":155,"_17":79,"_80":24,"_82":92,"_84":51,"_85":-5,"_132":156,"_18":157},{"_36":66,"_13":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_38":152,"_17":79,"_80":81,"_82":83,"_84":51,"_85":-5,"_132":153,"_18":154},["D",1776338046884],[],[19,67],["D",1776337843007],[],[19,88],["D",1776337843007],[],[19,95],["D",1776338024399],[],[19,101],["D",1776338084214],[],[19,108],["D",1776337843007],[170],[19,114],{"_36":171,"_13":172,"_68":173,"_70":115,"_72":73,"_74":174,"_76":77,"_38":175,"_17":90,"_80":81,"_82":176,"_84":51,"_85":-5,"_132":177,"_18":178},"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",[],[19,114,172],"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,"_223":219},"org",{"_11":12,"_217":-5,"_218":219,"_186":187,"_220":221,"_222":51},"branch",{"_17":138,"_13":16,"_36":73,"_42":179,"_45":37,"_46":213,"_214":53,"_215":43,"_216":57,"_58":14,"_54":12},72,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":179,"_13":14,"_38":302,"_49":-5,"_181":51,"_52":53,"_182":53,"_183":184,"_185":-5,"_186":187,"_188":127,"_189":77,"_190":-5,"_191":-5,"_192":79,"_56":193,"_194":-5,"_195":-5,"_196":-5,"_197":-5,"_198":199,"_200":199,"_201":202,"_203":202,"_204":202,"_205":199,"_206":199,"_207":303,"_209":304,"_211":305,"_50":51},[272,280,281],"files",[272,273,274,275,276,277,278,279,280,281],"counts",{"_263":79,"_264":90,"_265":79,"_35":266,"_267":268},[251,252,253,254,255,256],{"_36":119,"_13":19,"_68":71,"_70":-5,"_72":73,"_74":90,"_76":77,"_38":120,"_17":79,"_80":117,"_82":-5,"_84":51,"_85":-5,"_18":250},"upstreamProject",{"_36":43,"_13":59,"_183":184,"_185":247,"_52":53,"_207":248},"upstreamBranch",{"_36":37,"_38":245,"_40":246,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789698510&sig=a89db55c27f788524950f4fab475584ddf5d1ee2520c2d30308a6b0111f10507",{"_11":55,"_223":249},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789698510&sig=52b05374c39bed1413617477cc814f6f9ce50efaa2309f60e30cbc07b3064d80",[19],{"_36":113,"_13":114,"_68":115,"_70":71,"_72":73,"_74":90,"_76":77,"_38":116,"_17":79,"_80":117,"_82":-5,"_84":51,"_85":-5,"_18":262},{"_36":107,"_13":108,"_68":109,"_70":71,"_72":73,"_74":32,"_76":77,"_38":110,"_17":90,"_80":24,"_82":111,"_84":51,"_85":-5,"_18":261},{"_36":100,"_13":101,"_68":102,"_70":71,"_72":73,"_74":103,"_76":77,"_38":104,"_17":90,"_80":24,"_82":105,"_84":51,"_85":-5,"_18":260},{"_36":94,"_13":95,"_68":96,"_70":71,"_72":73,"_74":90,"_76":77,"_38":97,"_17":79,"_80":81,"_82":98,"_84":51,"_85":-5,"_18":259},{"_36":87,"_13":88,"_68":89,"_70":71,"_72":73,"_74":90,"_76":77,"_38":91,"_17":79,"_80":24,"_82":92,"_84":51,"_85":-5,"_18":258},{"_36":66,"_13":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_38":78,"_17":79,"_80":81,"_82":83,"_84":51,"_85":-5,"_18":257},[19,67],[19,88],[19,95],[19,101],[19,108],[19,114],"pulls","branches","forks",{"_269":79,"_271":79},"connections",{"_269":79,"_270":79},"count","unfilledCount","emptyCount",{"_36":119,"_13":19,"_68":71,"_70":-5,"_72":73,"_74":90,"_76":77,"_38":143,"_17":79,"_80":117,"_82":-5,"_84":51,"_85":-5,"_132":300,"_18":301},{"_36":113,"_13":114,"_68":115,"_70":71,"_72":73,"_74":90,"_76":77,"_38":167,"_17":79,"_80":117,"_82":-5,"_84":51,"_85":-5,"_132":298,"_18":299},{"_36":171,"_13":172,"_68":173,"_70":115,"_72":73,"_74":174,"_76":77,"_38":175,"_17":90,"_80":81,"_82":176,"_84":51,"_85":-5,"_132":296,"_18":297},{"_36":107,"_13":108,"_68":109,"_70":71,"_72":73,"_74":32,"_76":77,"_38":164,"_17":90,"_80":24,"_82":111,"_84":51,"_85":-5,"_132":294,"_18":295},{"_36":100,"_13":101,"_68":102,"_70":71,"_72":73,"_74":103,"_76":77,"_38":161,"_17":90,"_80":24,"_82":105,"_84":51,"_85":-5,"_132":292,"_18":293},{"_36":94,"_13":95,"_68":96,"_70":71,"_72":73,"_74":90,"_76":77,"_38":158,"_17":79,"_80":81,"_82":98,"_84":51,"_85":-5,"_132":290,"_18":291},{"_36":87,"_13":88,"_68":89,"_70":71,"_72":73,"_74":90,"_76":77,"_38":155,"_17":79,"_80":24,"_82":92,"_84":51,"_85":-5,"_132":288,"_18":289},{"_36":66,"_13":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_38":152,"_17":79,"_80":81,"_82":83,"_84":51,"_85":-5,"_132":286,"_18":287},{"_36":135,"_13":136,"_68":137,"_70":-5,"_72":73,"_74":138,"_76":77,"_38":139,"_17":90,"_80":24,"_82":140,"_84":51,"_85":-5,"_132":284,"_18":285},{"_36":125,"_13":126,"_68":127,"_70":-5,"_72":73,"_74":128,"_76":77,"_38":129,"_17":90,"_80":130,"_82":131,"_84":51,"_85":-5,"_132":282,"_18":283},[],[126],[],[136],[],[19,67],[],[19,88],[],[19,95],[],[19,101],[],[19,108],[],[19,114,172],[274],[19,114],[273,275,276,277,278,279],[19],["D",1776337843007],{"_11":12,"_223":219},{"_11":12,"_217":-5,"_218":219,"_186":187,"_220":221,"_222":51},{"_17":138,"_13":16,"_36":73,"_42":179,"_45":37,"_46":213,"_214":53,"_215":43,"_216":57,"_58":14,"_54":12},"ctx",{"_207":-5,"_242":339,"_340":341,"_342":343,"_344":51,"_345":51,"_346":51,"_347":77,"_348":-5,"_349":-7,"_350":-7,"_351":79,"_352":51,"_353":51,"_354":-5,"_355":51,"_356":51,"_357":51,"_358":-5},"ENV",{"_310":311,"_312":313,"_314":16,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]