// Molara — Real video visit. WebRTC peer-to-peer with server WebSocket signaling. // Both browsers join /ws?consultId=... and exchange offer/answer/ICE. function visitRouteParams(route) { const q = (route || window.location.hash.replace(/^#/, '') || '').split('?')[1] || ''; return new URLSearchParams(q); } const ICE_SERVERS = [ { urls: ['stun:stun.l.google.com:19302', 'stun:global.stun.twilio.com:3478'] }, ]; function VideoVisit({ tone = 'warm', route = '' }) { const { user } = useAuth(); const consults = useConsults(); const params = visitRouteParams(route); const consultId = params.get('consult') || consults[0]?.id || 'demo'; const visitRole = params.get('role') || (user?.role === 'doctor' ? 'doctor' : 'patient'); const consult = consults.find((c) => c.id === consultId) || consults[0] || null; const doc = consult ? DOC_BY_ID(consult.docId) : DOC_BY_ID(1); const isAudioOnly = consult?.mode === 'audio'; const messages = useVisitMessages(consultId); // Payment gate (patients only). If this consult isn't paid AND the patient // isn't in a 7-day follow-up window, bounce to /pay before they can start. React.useEffect(() => { if (visitRole !== 'patient') return; if (!consult) return; const j = window.consultIsJoinable && window.consultIsJoinable(consult); if (j && !j.ok) { window.navigate && window.navigate('/pay?consult=' + encodeURIComponent(consult.id)); } }, [consult?.id, consult?.paymentStatus, visitRole]); const [mic, setMic] = React.useState(true); const [cam, setCam] = React.useState(true); const [chat, setChat] = React.useState(true); const [tab, setTab] = React.useState('chat'); const [draft, setDraft] = React.useState(''); const [elapsed, setElapsed] = React.useState(0); const [callState, setCallState] = React.useState('idle'); // idle | starting | connecting | live | error const [statusMsg, setStatusMsg] = React.useState('Click Start call to share camera and mic.'); const [peerJoined, setPeerJoined] = React.useState(false); const [endedByDoctor, setEndedByDoctor] = React.useState(false); const localVideoRef = React.useRef(null); const remoteVideoRef = React.useRef(null); const localStreamRef = React.useRef(null); const pcRef = React.useRef(null); const wsRef = React.useRef(null); const pendingIceRef = React.useRef([]); const wsApi = /^https?:$/.test(window.location.protocol); React.useEffect(() => { if (callState !== 'live') return; const t = setInterval(() => setElapsed((s) => s + 1), 1000); return () => clearInterval(t); }, [callState]); const mm = String(Math.floor(elapsed / 60)).padStart(2, '0'); const ss = String(elapsed % 60).padStart(2, '0'); const sendChat = () => { if (!draft.trim()) return; sendVisitMessage(consultId, visitRole, draft); setDraft(''); }; // ---------- Cleanup ---------- const teardown = React.useCallback(() => { try { pcRef.current?.close(); } catch (_) {} pcRef.current = null; try { wsRef.current?.close(); } catch (_) {} wsRef.current = null; if (localStreamRef.current) { localStreamRef.current.getTracks().forEach((t) => t.stop()); localStreamRef.current = null; } if (remoteVideoRef.current) remoteVideoRef.current.srcObject = null; if (localVideoRef.current) localVideoRef.current.srcObject = null; pendingIceRef.current = []; }, []); React.useEffect(() => () => teardown(), [teardown]); // ---------- Start the call ---------- const startCall = async () => { if (!wsApi) { setCallState('error'); setStatusMsg('Real video calls require the server. Run locally with `npm start` or open the deployed URL.'); return; } setCallState('starting'); setStatusMsg('Requesting camera and microphone…'); let stream; try { stream = await navigator.mediaDevices.getUserMedia({ video: isAudioOnly ? false : { width: 1280, height: 720 }, audio: true }); } catch (err) { console.error(err); setCallState('error'); setStatusMsg('Camera or mic blocked. Allow access in your browser and try again.'); return; } localStreamRef.current = stream; if (localVideoRef.current) { localVideoRef.current.srcObject = stream; localVideoRef.current.muted = true; localVideoRef.current.playsInline = true; localVideoRef.current.play().catch(() => {}); } // Build peer connection const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS }); pcRef.current = pc; stream.getTracks().forEach((t) => pc.addTrack(t, stream)); pc.ontrack = (ev) => { const [remote] = ev.streams; if (remoteVideoRef.current && remote) { remoteVideoRef.current.srcObject = remote; remoteVideoRef.current.playsInline = true; remoteVideoRef.current.play().catch(() => {}); } }; pc.onicecandidate = (ev) => { if (ev.candidate && wsRef.current?.readyState === 1) { wsRef.current.send(JSON.stringify({ type: 'webrtc-signal', kind: 'ice', candidate: ev.candidate })); } }; pc.onconnectionstatechange = () => { const s = pc.connectionState; if (s === 'connected') { setCallState('live'); setStatusMsg('Connected.'); } else if (s === 'failed' || s === 'disconnected') { setStatusMsg('Connection lost. Try again.'); } }; // Open signaling channel const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'; let sid = ''; try { sid = localStorage.getItem('molara.sid.v1') || ''; } catch (_) {} const sidQ = sid ? `&sid=${encodeURIComponent(sid)}` : ''; const ws = new WebSocket(`${proto}//${location.host}/ws?consultId=${encodeURIComponent(consultId)}${sidQ}`); wsRef.current = ws; ws.addEventListener('open', () => { setCallState('connecting'); setStatusMsg('Waiting for the other party to join…'); }); ws.addEventListener('message', async (event) => { let msg; try { msg = JSON.parse(event.data); } catch (_) { return; } if (msg.type === 'peer-joined' && msg.role !== visitRole) { // We are the offerer — make and send an offer setPeerJoined(true); setStatusMsg('Other party joined. Negotiating…'); try { const offer = await pc.createOffer(); await pc.setLocalDescription(offer); ws.send(JSON.stringify({ type: 'webrtc-signal', kind: 'offer', sdp: offer })); } catch (err) { console.error(err); } return; } if (msg.type === 'call-ended') { setEndedByDoctor(true); setStatusMsg('The doctor ended the consultation.'); teardown(); window.navigate && window.navigate('/visit/summary?consult=' + encodeURIComponent(consultId)); return; } if (msg.type === 'peer-left' && msg.role === 'doctor' && visitRole === 'patient') { setEndedByDoctor(true); setStatusMsg('The doctor left the consultation.'); teardown(); window.navigate && window.navigate('/visit/summary?consult=' + encodeURIComponent(consultId)); return; } if (msg.type !== 'webrtc-signal') return; if (msg.kind === 'offer') { setPeerJoined(true); setStatusMsg('Incoming call. Connecting…'); try { await pc.setRemoteDescription(new RTCSessionDescription(msg.sdp)); // Drain any ICE we received early for (const c of pendingIceRef.current) { try { await pc.addIceCandidate(new RTCIceCandidate(c)); } catch (_) {} } pendingIceRef.current = []; const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); ws.send(JSON.stringify({ type: 'webrtc-signal', kind: 'answer', sdp: answer })); } catch (err) { console.error(err); } } else if (msg.kind === 'answer') { try { await pc.setRemoteDescription(new RTCSessionDescription(msg.sdp)); for (const c of pendingIceRef.current) { try { await pc.addIceCandidate(new RTCIceCandidate(c)); } catch (_) {} } pendingIceRef.current = []; } catch (err) { console.error(err); } } else if (msg.kind === 'ice') { if (!pc.remoteDescription || !pc.remoteDescription.type) { pendingIceRef.current.push(msg.candidate); } else { try { await pc.addIceCandidate(new RTCIceCandidate(msg.candidate)); } catch (err) { console.warn(err); } } } }); ws.addEventListener('close', () => { if (callState !== 'live') { setStatusMsg('Signaling closed before connection.'); } }); ws.addEventListener('error', () => { setCallState('error'); setStatusMsg('Could not reach the signaling server.'); }); }; const toggleMic = () => { const next = !mic; setMic(next); localStreamRef.current?.getAudioTracks().forEach((t) => (t.enabled = next)); }; const toggleCam = () => { const next = !cam; setCam(next); localStreamRef.current?.getVideoTracks().forEach((t) => (t.enabled = next)); }; const leave = async () => { const now = new Date().toISOString(); if (visitRole === 'doctor') { try { wsRef.current?.send(JSON.stringify({ type: 'call-ended', consultId, endedAt: now })); } catch (_) {} if (consult?.id && window.updateConsult) { await window.updateConsult(consult.id, { endedAt: now, status: 'awaiting-prescription', inProgress: false }); } teardown(); window.navigate && window.navigate('/visit/summary?consult=' + encodeURIComponent(consultId) + '&role=doctor&write=1'); return; } teardown(); window.navigate && window.navigate(visitRole === 'doctor' ? '/doctor-dashboard' : '/visit/summary'); }; return (
{/* Top bar */}
· {callState === 'live' ? <> Live · P2P encrypted : callState === 'connecting' ? 'Connecting…' : callState === 'starting' ? 'Starting…' : callState === 'error' ? 'Error' : 'Not started'} {callState === 'live' && {mm}:{ss}}
{visitRole === 'doctor' ? `Patient: ${consult?.patientName || '—'}` : `Dentist: ${doc.n}`} · Visit #{consult?.id || 'MLR-DEMO'}
{/* Main remote video */}
{/* Control dock */}
{!isAudioOnly && } setChat(!chat)} Ic={I.chat} label="Chat"/>
{chat && ( )}
); } function Ctrl({ active = true, onClick, Ic, label }) { return ( ); } function Bubble({ from, text }) { const me = from === 'me'; return (
{text}
); } Object.assign(window, { VideoVisit });