📹 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",[181,86,69],"pulls","branches","forks","envVars",{"_194":26,"_196":26},"connections",{"_194":26,"_195":26},"count","unfilledCount","emptyCount",{"_34":267,"_13":181,"_67":174,"_44":-5,"_36":37,"_175":41,"_176":24,"_38":268,"_40":26,"_70":87,"_178":-5,"_72":30,"_179":-5,"_213":269,"_17":270},{"_34":173,"_13":86,"_67":85,"_44":174,"_36":37,"_175":41,"_176":24,"_38":264,"_40":26,"_70":87,"_178":-5,"_72":30,"_179":-5,"_213":265,"_17":266},{"_34":183,"_13":69,"_67":68,"_44":85,"_36":37,"_175":78,"_176":24,"_38":261,"_40":41,"_70":71,"_178":185,"_72":30,"_179":-5,"_213":262,"_17":263},{"_34":253,"_13":254,"_67":255,"_44":174,"_36":37,"_175":256,"_176":24,"_38":257,"_40":41,"_70":21,"_178":258,"_72":30,"_179":-5,"_213":259,"_17":260},{"_34":245,"_13":246,"_67":247,"_44":174,"_36":37,"_175":248,"_176":24,"_38":249,"_40":41,"_70":21,"_178":250,"_72":30,"_179":-5,"_213":251,"_17":252},{"_34":238,"_13":239,"_67":240,"_44":174,"_36":37,"_175":41,"_176":24,"_38":241,"_40":26,"_70":71,"_178":242,"_72":30,"_179":-5,"_213":243,"_17":244},{"_34":231,"_13":232,"_67":233,"_44":174,"_36":37,"_175":41,"_176":24,"_38":234,"_40":26,"_70":21,"_178":235,"_72":30,"_179":-5,"_213":236,"_17":237},{"_34":223,"_13":224,"_67":225,"_44":174,"_36":37,"_175":226,"_176":24,"_38":227,"_40":26,"_70":71,"_178":228,"_72":30,"_179":-5,"_213":229,"_17":230},{"_34":216,"_13":217,"_67":218,"_44":-5,"_36":37,"_175":123,"_176":24,"_38":219,"_40":41,"_70":21,"_178":220,"_72":30,"_179":-5,"_213":221,"_17":222},{"_34":207,"_13":208,"_67":99,"_44":-5,"_36":37,"_175":209,"_176":24,"_38":210,"_40":41,"_70":211,"_178":212,"_72":30,"_179":-5,"_213":214,"_17":215},"51f2d606-3985-11f1-b5eb-42b51c65c3df","index.ts",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",[],[208],"859f584e-3985-11f1-ab17-42b51c65c3df","README.md","019d95fc-73ea-733f-8112-f8caa1731e61",["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",[],[217],"62605d24-3985-11f1-b5eb-42b51c65c3df","webrtc.ts","62605e00-3985-11f1-b5eb-42b51c65c3df",4,["D",1776338046884],"// WebRTC + SSE signaling client — zero external dependencies\n// This is a plain-JS module (no React) so the logic is reusable.\n\nconst ICE_SERVERS = [\n { urls: \"stun:stun.l.google.com:19302\" },\n { urls: \"stun:stun1.l.google.com:19302\" },\n];\n\nexport type PeerState = {\n id: string;\n connection: RTCPeerConnection;\n stream: MediaStream | null;\n};\n\nexport type RoomCallbacks = {\n onPeerStream: (peerId: string, stream: MediaStream) => void;\n onPeerLeft: (peerId: string) => void;\n onError: (err: string) => void;\n};\n\nexport class RoomClient {\n roomId: string;\n clientId: string;\n localStream: MediaStream;\n peers: Map = new Map();\n eventSource: EventSource | null = null;\n callbacks: RoomCallbacks;\n\n constructor(\n roomId: string,\n clientId: string,\n localStream: MediaStream,\n callbacks: RoomCallbacks,\n ) {\n this.roomId = roomId;\n this.clientId = clientId;\n this.localStream = localStream;\n this.callbacks = callbacks;\n }\n\n connect() {\n const url = `/api/room/${this.roomId}/events?clientId=${this.clientId}`;\n this.eventSource = new EventSource(url);\n\n this.eventSource.addEventListener(\"peers\", (e) => {\n const { peers } = JSON.parse(e.data);\n // We are the new joiner — create offers to all existing peers\n for (const peerId of peers) {\n this.createPeerConnection(peerId, true);\n }\n });\n\n this.eventSource.addEventListener(\"peer-joined\", (e) => {\n const { peerId } = JSON.parse(e.data);\n // New peer joined — they will send us an offer, so just wait\n // (they got us in their \"peers\" list and will initiate)\n });\n\n this.eventSource.addEventListener(\"peer-left\", (e) => {\n const { peerId } = JSON.parse(e.data);\n this.removePeer(peerId);\n this.callbacks.onPeerLeft(peerId);\n });\n\n this.eventSource.addEventListener(\"signal\", (e) => {\n const { from, type, data } = JSON.parse(e.data);\n this.handleSignal(from, type, data);\n });\n\n this.eventSource.onerror = () => {\n this.callbacks.onError(\"SSE connection lost — try refreshing\");\n };\n }\n\n private createPeerConnection(peerId: string, initiator: boolean) {\n if (this.peers.has(peerId)) return;\n\n const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });\n this.peers.set(peerId, pc);\n\n // Add our local tracks\n for (const track of this.localStream.getTracks()) {\n pc.addTrack(track, this.localStream);\n }\n\n // When we get remote tracks\n pc.ontrack = (e) => {\n if (e.streams[0]) {\n this.callbacks.onPeerStream(peerId, e.streams[0]);\n }\n };\n\n // Send ICE candidates\n pc.onicecandidate = (e) => {\n if (e.candidate) {\n this.signal(peerId, \"ice-candidate\", e.candidate);\n }\n };\n\n pc.onconnectionstatechange = () => {\n if (pc.connectionState === \"failed\" || pc.connectionState === \"disconnected\") {\n this.removePeer(peerId);\n this.callbacks.onPeerLeft(peerId);\n }\n };\n\n // If we're the initiator, create and send an offer\n if (initiator) {\n pc.createOffer()\n .then((offer) => pc.setLocalDescription(offer))\n .then(() => {\n this.signal(peerId, \"offer\", pc.localDescription);\n })\n .catch((err) => this.callbacks.onError(`Offer failed: ${err.message}`));\n }\n\n return pc;\n }\n\n private async handleSignal(from: string, type: string, data: any) {\n if (type === \"offer\") {\n // Someone sent us an offer — create our side and send answer\n this.createPeerConnection(from, false);\n const pc = this.peers.get(from)!;\n await pc.setRemoteDescription(new RTCSessionDescription(data));\n const answer = await pc.createAnswer();\n await pc.setLocalDescription(answer);\n this.signal(from, \"answer\", pc.localDescription);\n } else if (type === \"answer\") {\n const pc = this.peers.get(from);\n if (pc) await pc.setRemoteDescription(new RTCSessionDescription(data));\n } else if (type === \"ice-candidate\") {\n const pc = this.peers.get(from);\n if (pc) {\n try {\n await pc.addIceCandidate(new RTCIceCandidate(data));\n } catch {\n // ignore late candidates\n }\n }\n }\n }\n\n private signal(to: string, type: string, data: any) {\n fetch(`/api/room/${this.roomId}/signal`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ from: this.clientId, to, type, data }),\n }).catch(() => {});\n }\n\n private removePeer(peerId: string) {\n const pc = this.peers.get(peerId);\n if (pc) {\n pc.close();\n this.peers.delete(peerId);\n }\n }\n\n disconnect() {\n this.eventSource?.close();\n for (const [id, pc] of this.peers) {\n pc.close();\n }\n this.peers.clear();\n }\n}\n",[],[181,224],"e8f60f1a-3984-11f1-ab80-42b51c65c3df","style.css","019d95fc-73ea-733f-8112-f0c196d5f37d",["D",1776337843007],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[181,232],"e8f60b46-3984-11f1-ab80-42b51c65c3df","index.tsx","019d95fc-73ea-733f-8112-ed6d6dacdef2",["D",1776337843007],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[181,239],"54f99452-3985-11f1-9b30-42b51c65c3df","index.html","019d95fc-73ea-733f-8112-eaed6e2c0d18",3,["D",1776338024399],"\n\n \n \n \n Video Chat — Zero Dependencies\n \n \n \n \n

\n \n \n \n\n",[],[181,246],"789e952e-3985-11f1-8b11-42b51c65c3df","favicon.svg","019d95fc-73ea-733f-8112-e4ead7373891",6,["D",1776338084214],"\n",[],[181,254],["D",1776338079753],[],[181,86,69],["D",1776337843007],[199],[181,86],"e8f612a8-3984-11f1-ab80-42b51c65c3df",["D",1776337843007],[198,200,201,202,203,204],[181],["D",1776337843007],{"_11":12,"_139":75},{"_11":12,"_135":-5,"_74":75,"_31":73,"_136":137,"_138":30},{"_40":123,"_13":16,"_34":37,"_124":89,"_125":64,"_126":127,"_128":93,"_129":130,"_131":132,"_133":14,"_134":12},"ctx",{"_53":-5,"_160":308,"_309":310,"_311":312,"_313":30,"_314":30,"_315":30,"_316":24,"_317":-5,"_318":-7,"_319":-7,"_320":26,"_321":30,"_322":30,"_323":-5,"_324":30,"_325":30,"_326":30,"_327":-5},"ENV",{"_279":280,"_281":282,"_283":16,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307},"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"]

History · components