🎥 WebCall

\n {!isInCall\n ? (\n

\n setRoomId(e.target.value)}\n placeholder=\"Enter Room ID\"\n />\n

\n \n \n

\n )\n : (\n

\n \n \n

\n \n

\n )}\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"wetalk\";\n const SCHEMA_VERSION = 1;\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_calls_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n room_id TEXT NOT NULL,\n signal_data TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Signaling endpoint\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/signal\") {\n const { roomId, type, sdp } = await request.json();\n\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_calls_${SCHEMA_VERSION} (room_id, signal_data) \n VALUES (?, ?)\n `,\n [roomId, JSON.stringify({ type, sdp })],\n );\n\n return new Response(\"Signal received\", { status: 200 });\n }\n\n // Retrieve signals for a specific room\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/signals\") {\n const url = new URL(request.url);\n const roomId = url.searchParams.get(\"roomId\");\n\n const result = await sqlite.execute(\n `\n SELECT signal_data FROM ${KEY}_calls_${SCHEMA_VERSION} \n WHERE room_id = ? \n ORDER BY timestamp DESC \n LIMIT 10\n `,\n [roomId],\n );\n\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n WebCall\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n.video-call-container {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n padding: 20px;\n text-align: center;\n}\n.call-setup {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\ninput {\n width: 300px;\n padding: 10px;\n margin-bottom: 20px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n.call-actions {\n display: flex;\n gap: 10px;\n}\nbutton {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n.end-call {\n background-color: #dc3545;\n margin-top: 20px;\n}\n.video-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.video-wrapper {\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n}\nvideo {\n width: 320px;\n height: 240px;\n background-color: #000;\n border-radius: 8px;\n}\n.local-video {\n transform: scaleX(-1);\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/vishal14/wetalk/code/main.tsx","extension","actionData","errors"]