/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0'; import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client'; import Peer from 'https://esm.sh/simple-peer@9.11.1'; function App() { const [myStream, setMyStream] = useState(null); const [remoteStream, setRemoteStream] = useState(null); const [isCalling, setIsCalling] = useState(false); const [peer, setPeer] = useState(null); const myVideoRef = useRef(null); const remoteVideoRef = useRef(null); const [myId, setMyId] = useState(null); const [remoteId, setRemoteId] = useState(null); useEffect(() => { const getMedia = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); setMyStream(stream); if (myVideoRef.current) { myVideoRef.current.srcObject = stream; } // Simulated socket connection (replace with actual WebSocket logic) const socket = { on: (event, callback) => { if (event === 'me') callback(Math.random().toString(36).substring(7)); }, emit: (event, ...args) => { console.log(`Socket event: ${event}`, args); } }; socket.on('me', (id) => setMyId(id)); } catch (error) { console.error('Error accessing media devices:', error); } }; getMedia(); return () => { if (myStream) { myStream.getTracks().forEach(track => track.stop()); } if (peer) { peer.destroy(); } }; }, []); const callUser = () => { if (!myStream) return; const peer = new Peer({ initiator: true, trickle: false, stream: myStream }); peer.on('signal', (data) => { // Simulated signaling console.log('Calling user', remoteId, data); }); peer.on('stream', (remoteStream) => { setRemoteStream(remoteStream); if (remoteVideoRef.current) { remoteVideoRef.current.srcObject = remoteStream; } }); setPeer(peer); setIsCalling(true); }; return (

🎥 Video Call App

My Video

Remote Video

{!isCalling && (

setRemoteId(e.target.value)} style={styles.input} />

)} View Source

); } const styles = { container: { fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px', textAlign: 'center', }, videoContainer: { display: 'flex', justifyContent: 'center', gap: '20px', marginBottom: '20px', }, videoBox: { border: '2px solid #333', borderRadius: '10px', padding: '10px', }, video: { width: '300px', height: '225px', backgroundColor: '#f0f0f0', borderRadius: '10px', }, controlBox: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px', }, input: { padding: '10px', borderRadius: '5px', border: '1px solid #ccc', }, button: { padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', }, sourceLink: { display: 'block', marginTop: '20px', color: '#666', textDecoration: 'none', } }; function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Video Call App

`, { headers: { "content-type": "text/html" } }); }

video_calling_app

Versions

v0