fix(web): corrige ciclo de vida do WebRTC e vazamentos de peer connections/streams (#59)

ggfto · ggfto · commit b4ccb5de5a69 · 2026-07-10T17:11:04.000-03:00
diff --git a/web/src/components/WebRTCStreamer.tsx b/web/src/components/WebRTCStreamer.tsx
@@ -25,6 +25,13 @@ export default function WebRTCStreamer() {
         configRef.current = { webrtcUrl, providerType };
     }, [webrtcUrl, providerType]);
 
+    // Keep the latest gameData accessible without re-running the connection-lifecycle
+    // effect below on every NUI push (its identity changes on each message).
+    const gameDataRef = useRef(gameData);
+    useEffect(() => {
+        gameDataRef.current = gameData;
+    }, [gameData]);
+
     useEffect(() => {
         let rendererInstance: any = null;
 
@@ -48,8 +55,10 @@ export default function WebRTCStreamer() {
         };
 
         const initializeConnection = async (targetViewerId: string) => {
+            let localPc: RTCPeerConnection | null = null;
+            let streamStarted = false;
             try {
-                let myId = (gameData as any).selfId;
+                let myId = (gameDataRef.current as any).selfId;
                 if (!myId) {
                     try {
                         const res = await sendNui('getSelfId', {}, 0);
@@ -70,6 +79,7 @@ export default function WebRTCStreamer() {
                     const { default: renderer } = await import('@/utils/fivem-renderer');
                     rendererInstance = renderer;
                     stream = (renderer as any).startStream() as MediaStream;
+                    streamStarted = true;
                 } catch (err) {
                     console.error('[WebRTC Streamer] Failed to load renderer:', err);
                     return;
@@ -78,6 +88,7 @@ export default function WebRTCStreamer() {
                 if (configRef.current.providerType === 'cloudflare-sfu') {
                     const { publishToCF } = await import('@/utils/cf-sfu');
                     const { pc, sessionId, trackName } = await publishToCF(stream!);
+                    localPc = pc;
                     const signalingUnsub = () => { };
                     connectionsRef.current.set(targetViewerId, { pc, signalingUnsub });
                     signaling.send({
@@ -91,6 +102,7 @@ export default function WebRTCStreamer() {
                 }
 
                 const pc = new RTCPeerConnection(RTC_CONFIG);
+                localPc = pc;
                 stream!.getTracks().forEach(track => pc.addTrack(track, stream!));
 
                 pc.onconnectionstatechange = () => {
@@ -153,7 +165,16 @@ export default function WebRTCStreamer() {
                 });
             } catch (err) {
                 console.error('[WebRTC Streamer] Init failed:', err);
+                // If the connection was already registered, cleanup() closes the pc
+                // and stops the renderer stream via the map entry. If it failed
+                // *before* connectionsRef.set(...), no map entry exists — tear down
+                // the locally-created pc/renderer here so they don't leak.
+                const hadEntry = connectionsRef.current.has(targetViewerId);
                 cleanup(targetViewerId);
+                if (!hadEntry) {
+                    if (localPc) localPc.close();
+                    if (streamStarted && rendererInstance) rendererInstance.stopStream();
+                }
             } finally {
                 startingViewersRef.current.delete(targetViewerId);
             }
@@ -172,6 +193,10 @@ export default function WebRTCStreamer() {
                     old.pc.close();
                     old.signalingUnsub();
                     connectionsRef.current.delete(targetViewerId);
+                    // Release the renderer watcher held by the previous connection
+                    // before initializeConnection() calls startStream() again — otherwise
+                    // the watcher counter leaks and the render loop never stops.
+                    if (rendererInstance) rendererInstance.stopStream();
                 }
             }
 
@@ -192,7 +217,7 @@ export default function WebRTCStreamer() {
             off('StartWebRTC', startHandler);
             off('StopWebRTC', stopHandler);
         };
-    }, [on, off, sendNui, gameData]);
+    }, [on, off, sendNui]);
 
     return null;
 }
diff --git a/web/src/components/players/ScreenModal.tsx b/web/src/components/players/ScreenModal.tsx
@@ -81,13 +81,15 @@ export default function ScreenModal({ playerId, onClose, playerName }: ScreenMod
     useEffect(() => { selfIdRef.current = selfIdFromState }, [selfIdFromState]);
     useEffect(() => { targetIdRef.current = playerId }, [playerId]);
 
-    // Initialize signaling for the viewer role
+    // Initialize signaling for the viewer role.
+    // selfIdFromState is included so the effect re-runs (and finally initializes)
+    // if selfId arrives after mount; the guard prevents init before it lands.
     useEffect(() => {
         if (!selfIdRef.current) return;
         const url = settings?.WebRTCUrl || gameData.webrtcUrl || null;
         const provider = (settings?.SignalingProvider || gameData.signalingProvider || 'websocket') as any;
         signaling.init(url, String(selfIdRef.current), provider);
-    }, [gameData.webrtcUrl, gameData.signalingProvider, settings?.WebRTCUrl, settings?.SignalingProvider]);
+    }, [selfIdFromState, gameData.webrtcUrl, gameData.signalingProvider, settings?.WebRTCUrl, settings?.SignalingProvider]);
 
     const startingRef = useRef(false);
 
diff --git a/web/src/pages/LiveScreensPage.tsx b/web/src/pages/LiveScreensPage.tsx
@@ -41,13 +41,15 @@ export default function LiveScreensPage() {
     const selfIdRef = useRef(selfIdValue);
     useEffect(() => { if (selfIdValue) selfIdRef.current = selfIdValue }, [selfIdValue]);
 
-    // Initialize signaling for the viewer role
+    // Initialize signaling for the viewer role.
+    // selfIdValue is included so the effect re-runs (and finally initializes)
+    // if selfId arrives after mount; the guard prevents init before it lands.
     useEffect(() => {
         if (!selfIdRef.current) return;
         const url = settings?.WebRTCUrl || gameData.webrtcUrl || null;
         const provider = (settings?.SignalingProvider || gameData.signalingProvider || 'websocket') as any;
         signaling.init(url, String(selfIdRef.current), provider);
-    }, [gameData.webrtcUrl, gameData.signalingProvider, settings?.WebRTCUrl, settings?.SignalingProvider]);
+    }, [selfIdValue, gameData.webrtcUrl, gameData.signalingProvider, settings?.WebRTCUrl, settings?.SignalingProvider]);
 
     const streamLabels = useMemo(() => ({
         connecting: t('stream_connecting'),
diff --git a/web/src/utils/cf-sfu.ts b/web/src/utils/cf-sfu.ts
@@ -68,26 +68,32 @@ export async function publishToCF(stream: MediaStream): Promise<{
 
     const iceServers = session.iceServers ?? [{ urls: 'stun:stun.cloudflare.com:3478' }];
     const pc = new RTCPeerConnection({ iceServers });
-    stream.getTracks().forEach(t => pc.addTrack(t, stream));
-
-    // 2. Offer + ICE gathering
-    const offer = await pc.createOffer();
-    await pc.setLocalDescription(offer);
-    await _waitIce(pc);
-
-    // 3. Publish tracks via server → CF API
-    const trackName = 'screen';
-    const pub = await _nui<CFPublishResult>('CFPublishTracks', {
-        sessionId: session.sessionId,
-        offer: { type: pc.localDescription!.type, sdp: pc.localDescription!.sdp },
-    });
-    if (pub.error || !pub.sessionDescription) throw new Error('[CF SFU] CFPublishTracks: ' + pub.error);
-
-    // 4. Apply CF's answer
-    await pc.setRemoteDescription(new RTCSessionDescription(pub.sessionDescription));
-    console.log('[CF SFU] Published. sessionId:', session.sessionId, 'trackName:', trackName);
-
-    return { pc, sessionId: session.sessionId, trackName };
+    try {
+        stream.getTracks().forEach(t => pc.addTrack(t, stream));
+
+        // 2. Offer + ICE gathering
+        const offer = await pc.createOffer();
+        await pc.setLocalDescription(offer);
+        await _waitIce(pc);
+
+        // 3. Publish tracks via server → CF API
+        const trackName = 'screen';
+        const pub = await _nui<CFPublishResult>('CFPublishTracks', {
+            sessionId: session.sessionId,
+            offer: { type: pc.localDescription!.type, sdp: pc.localDescription!.sdp },
+        });
+        if (pub.error || !pub.sessionDescription) throw new Error('[CF SFU] CFPublishTracks: ' + pub.error);
+
+        // 4. Apply CF's answer
+        await pc.setRemoteDescription(new RTCSessionDescription(pub.sessionDescription));
+        console.log('[CF SFU] Published. sessionId:', session.sessionId, 'trackName:', trackName);
+
+        return { pc, sessionId: session.sessionId, trackName };
+    } catch (err) {
+        // Close the peer connection we created so it doesn't leak on failure.
+        pc.close();
+        throw err;
+    }
 }
 
 // ─── Subscriber ───────────────────────────────────────────────────────────────
diff --git a/web/src/utils/signaling/fivem-native.ts b/web/src/utils/signaling/fivem-native.ts
@@ -49,6 +49,13 @@ export class FiveMNativeProvider implements SignalingProvider {
 
         if (this._listener && !isNewPlayer && this._connected) return; // Already setup and registered
 
+        // Reconfiguring (e.g. new playerId): drop the previous listener before
+        // installing a fresh one so we don't stack duplicate window listeners.
+        if (this._listener) {
+            window.removeEventListener('message', this._listener);
+            this._listener = null;
+        }
+
         // Every message from Lua arrives as a window message with action='Signal'
         this._listener = (e: MessageEvent) => {
             try {
diff --git a/web/src/utils/signaling/index.ts b/web/src/utils/signaling/index.ts
@@ -33,6 +33,8 @@ export const signaling = {
 
         // Switch active provider if necessary
         if (this._active.type !== signalingType) {
+            // Stop the previous provider (reconnect loops, listeners) before swapping.
+            this._active.disconnect();
             this._active = _instances[signalingType] || _instances['websocket'];
             console.log('[Signaling] Switched to provider:', signalingType, '(streaming:', providerType, ')');
         }
diff --git a/web/src/utils/signaling/websocket.ts b/web/src/utils/signaling/websocket.ts
@@ -21,8 +21,22 @@ export class WebSocketProvider implements SignalingProvider {
     connect(url: string | null, playerId: string) {
         // Force WSS — FiveM NUI pages are served over HTTPS
         const raw = url || 'wss://ws.gf2.in';
-        this.url = raw.startsWith('ws://') ? raw.replace('ws://', 'wss://') : raw;
+        const normalized = raw.startsWith('ws://') ? raw.replace('ws://', 'wss://') : raw;
+        const urlChanged = this.url !== normalized;
+        const playerChanged = this.playerId !== playerId;
+
+        this.url = normalized;
         this.playerId = playerId;
+
+        if (this.ws && urlChanged) {
+            // Target endpoint changed — tear down the old socket and reopen.
+            this.disconnect();
+        } else if (this.ws && playerChanged && this.ws.readyState === WebSocket.OPEN) {
+            // Same endpoint, new identity — re-register on the existing socket.
+            this.send({ type: 'register', playerId: this.playerId! });
+            return;
+        }
+
         this._open();
     }
 

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,8 @@ export const signaling = {`
`33`	`33`
`34`	`34`	`// Switch active provider if necessary`
`35`	`35`	`if (this._active.type !== signalingType) {`
	`36`	`+ // Stop the previous provider (reconnect loops, listeners) before swapping.`
	`37`	`+ this._active.disconnect();`
`36`	`38`	`this._active = _instances[signalingType] \|\| _instances['websocket'];`
`37`	`39`	`console.log('[Signaling] Switched to provider:', signalingType, '(streaming:', providerType, ')');`
`38`	`40`	`}`