/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function RandomVideoChat() { const [connectionStatus, setConnectionStatus] = useState("Disconnected"); const [isSearching, setIsSearching] = useState(false); const localVideoRef = useRef(null); const remoteVideoRef = useRef(null); const peerConnectionRef = useRef(null); const socketRef = useRef(null); useEffect(() => { // Initialize WebSocket for signaling socketRef.current = new WebSocket("wss://free-random-video-chat-signaling.val.run"); socketRef.current.onopen = () => { console.log("Signaling connection established"); }; socketRef.current.onmessage = async (event) => { const signal = JSON.parse(event.data); if (signal.type === "offer") { await handleOffer(signal); } else if (signal.type === "answer") { await handleAnswer(signal); } else if (signal.type === "ice-candidate") { await handleIceCandidate(signal); } }; return () => { socketRef.current?.close(); }; }, []); const startVideoChat = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true, }); localVideoRef.current.srcObject = stream; setIsSearching(true); // Signal server that we're ready to connect socketRef.current.send(JSON.stringify({ type: "ready" })); } catch (error) { console.error("Error accessing media devices:", error); alert("Please allow camera and microphone access"); } }; const createPeerConnection = () => { const configuration = { iceServers: [ { urls: "stun:stun.l.google.com:19302" }, { urls: "stun:stun1.l.google.com:19302" }, ], }; peerConnectionRef.current = new RTCPeerConnection(configuration); peerConnectionRef.current.onicecandidate = (event) => { if (event.candidate) { socketRef.current.send(JSON.stringify({ type: "ice-candidate", candidate: event.candidate, })); } }; peerConnectionRef.current.ontrack = (event) => { remoteVideoRef.current.srcObject = event.streams[0]; setConnectionStatus("Connected"); }; const localStream = localVideoRef.current.srcObject; localStream.getTracks().forEach(track => { peerConnectionRef.current.addTrack(track, localStream); }); }; const handleOffer = async (offer) => { createPeerConnection(); await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(offer)); const answer = await peerConnectionRef.current.createAnswer(); await peerConnectionRef.current.setLocalDescription(answer); socketRef.current.send(JSON.stringify({ type: "answer", answer: answer, })); }; const handleAnswer = async (answer) => { await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(answer)); }; const handleIceCandidate = async (signal) => { if (signal.candidate) { await peerConnectionRef.current.addIceCandidate(new RTCIceCandidate(signal.candidate)); } }; const disconnectCall = () => { if (peerConnectionRef.current) { peerConnectionRef.current.close(); peerConnectionRef.current = null; } if (localVideoRef.current) { const localStream = localVideoRef.current.srcObject; if (localStream) { localStream.getTracks().forEach(track => track.stop()); } } setConnectionStatus("Disconnected"); setIsSearching(false); }; return (

🎥 Random Video Chat

{!isSearching ? ( ) : ( )}

Status: {connectionStatus}

View Source

); } function App() { return ; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Random Video Chat

`, { headers: { "content-type": "text/html" }, }, ); } const css = ` body { font-family: system-ui, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; margin: 0; min-height: 100vh; } .random-video-chat { background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; text-align: center; max-width: 600px; width: 100%; } .video-container { display: flex; gap: 10px; margin-bottom: 20px; } .local-video, .remote-video { flex: 1; background-color: #000; border-radius: 5px; overflow: hidden; } video { width: 100%; height: 300px; object-fit: cover; } .controls { display: flex; flex-direction: column; align-items: center; gap: 10px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #45a049; } .status { color: #666; } `;

randomVideoChatApp