Random Video Chat

🌐 Random Video Chat

\n ${CURRENT_USER.name}$ \n {CURRENT_USER.name}\n

\n\n

\n {remoteStream ? (\n

\n\n

\n {!isCalling ? (\n \n ) : (\n \n )}\n

\n\n \n View Source\n \n

\n );\n}\n\nfunction App() {\n return ;\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 // WebSocket signaling server implementation\n if (request.headers.get('upgrade') === 'websocket') {\n const { socket, response } = Deno.upgradeWebSocket(request);\n const users = new Map();\n\n socket.onopen = () => {\n console.log('WebSocket connection opened');\n };\n\n socket.onmessage = (event) => {\n try {\n const data = JSON.parse(event.data);\n\n switch(data.type) {\n case 'register':\n users.set(data.userId, socket);\n // Broadcast updated user list\n broadcastUserList();\n break;\n\n case 'find_match':\n findRandomMatch(data.userId);\n break;\n\n case 'offer':\n case 'answer':\n case 'ice-candidate':\n forwardMessage(data);\n break;\n }\n } catch (error) {\n console.error('WebSocket message error:', error);\n }\n };\n\n socket.onclose = () => {\n // Remove user from active users\n for (const [userId, userSocket] of users.entries()) {\n if (userSocket === socket) {\n users.delete(userId);\n break;\n }\n }\n broadcastUserList();\n };\n\n function broadcastUserList() {\n const userList = Array.from(users.keys());\n users.forEach(socket => {\n socket.send(JSON.stringify({\n type: 'user_list',\n users: userList\n }));\n });\n }\n\n function findRandomMatch(requestingUserId: string) {\n const availableUsers = Array.from(users.keys())\n .filter(userId => userId !== requestingUserId);\n\n if (availableUsers.length > 0) {\n const randomUserId = availableUsers[Math.floor(Math.random() * availableUsers.length)];\n const matchingSocket = users.get(randomUserId);\n const requestingSocket = users.get(requestingUserId);\n\n if (matchingSocket && requestingSocket) {\n // Send match request\n matchingSocket.send(JSON.stringify({\n type: 'match_request',\n from: requestingUserId\n }));\n }\n }\n }\n\n function forwardMessage(data: any) {\n const targetSocket = users.get(data.to);\n if (targetSocket) {\n targetSocket.send(JSON.stringify(data));\n }\n }\n\n return response;\n }\n\n // Fallback HTML response\n return new Response(`\n \n \n Random Video Chat\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: #1c1c1c;\n margin: 0;\n padding: 0;\n color: #ffffff;\n}\n\n.video-chat-container {\n max-width: 1200px;\n margin: 0 auto;\n background-color: #2c2c2c;\n min-height: 100vh;\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px 20px;\n background-color: #3c3c3c;\n color: white;\n}\n\n.logo {\n font-size: 24px;\n font-weight: bold;\n}\n\n.user-info {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.user-info img {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n}\n\n.video-grid {\n display: flex;\n gap: 20px;\n padding: 20px;\n justify-content: center;\n}\n\n.local-video, .remote-video {\n position: relative;\n width: 45%;\n background-color: #3c3c3c;\n border-radius: 10px;\n overflow: hidden;\n}\n\nvideo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.video-overlay {\n position: absolute;\n top: 10px;\n left: 10px;\n background: rgba(0,0,0,0.5);\n color: white;\n padding: 5px 10px;\n border-radius: 5px;\n}\n\n.no-connection {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 400px;\n color: #888;\n text-align: center;\n}\n\n.connected-users {\n margin-top: 20px;\n font-size: 14px;\n}\n\n.call-controls {\n display: flex;\n justify-content: center;\n margin-top: 20px;\n}\n\n.call-controls button {\n padding: 10px 20px;\n font-size: 18px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.call-controls button:hover {\n opacity: 0.8;\n}\n`;",["D",1740246839593],"version","currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal","interval","description","@jsxImportSource https://esm.sh/react@18.2.0","latestEvaluation","slug","Brust/RTCChatApp","versions",[157,161,164],{"_98":158,"_140":90,"_159":160},["D",1740246839593],"n","1",{"_98":162,"_140":107,"_159":163},["D",1740246647366],"2",{"_98":165,"_140":31,"_159":166},["D",1740246553369],"3","hasNext","filters",{"_170":171,"_172":173,"_129":130},"sort","newest","type","all","routes/_app","actionData","errors"]