Basic working video

src/components/webRTCpoc.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {Text} from 'react-native';
+
 import {MediaStream, RTCPeerConnection, RTCView} from 'react-native-webrtc';
 
 import {API_BASE} from '@env';
@@ -16,6 +18,8 @@
   const cameraURL =
     API_BASE.replace('http', 'ws') + '/live/webrtc/api/ws?src=' + cameraName;
 
+  const [reload, setReload] = React.useState<boolean>(false);
+  const [loading, setLoading] = React.useState<boolean>(true);
   const [remoteStream, setRemoteStream] = React.useState<MediaStream | null>(
     null,
   );
@@ -26,11 +30,20 @@
   const pcRef = React.useRef<RTCPeerConnection | null>(null);
   const wsRef = React.useRef<WebSocket | null>(null);
 
+  function onIceConnect() {
+    if (pcRef?.current?.iceConnectionState === 'connected') {
+      setLoading(false);
+    }
+  }
+
   const connect = React.useCallback(async (url: string) => {
+    setLoading(true);
     pcRef.current = new RTCPeerConnection(webRTCconfig);
-    wsRef.current = new WebSocket(url);
-
     const pc = pcRef.current;
+    // add this before connecting to websocket to ensure it is always captured.
+    pcRef.current.addEventListener('iceconnectionstatechange', onIceConnect);
+
+    wsRef.current = new WebSocket(url);
     const ws = wsRef.current;
 
     const tracks = [
@@ -45,26 +58,24 @@
 
     setLocalStream(new MediaStream(tracks));
 
-    pc.addEventListener('track', (event: any) => {
+    const remoteMediaStream = new MediaStream(undefined);
+
+    pc.addEventListener('track', async (event: any) => {
       // Grab the remote track from the connected participant.
       const track = event?.track;
       if (track) {
-        const remoteMediaStream = new MediaStream(undefined);
-        console.log(
-          '🪵 | file: webRTCpoc.tsx:58 | ws.addEventListener | track:',
-          track,
-        );
         remoteMediaStream.addTrack(event.track);
         setRemoteStream(remoteMediaStream);
       }
     });
 
     ws.addEventListener('open', async () => {
       pc.addEventListener('icecandidate', (ev: any) => {
         //? This is where we send the new icecandidate info to the server
         if (!ev.candidate) {
           return;
         }
+
         const msg = {
           type: 'webrtc/candidate',
           value: ev.candidate.candidate,
@@ -91,34 +102,60 @@
         pc.setRemoteDescription({type: 'answer', sdp: msg.value});
       }
     });
+
+    // the following is to ensure that ice connection eventually becomes connected or completed
+    // as it can get stuck in other states which are an error state
+    let attempts = 0;
+    while (
+      pc.iceConnectionState !== 'connected' &&
+      pc.iceConnectionState !== 'completed'
+    ) {
+      // async timeout for 100ms
+      await new Promise(resolve => setTimeout(resolve, 100));
+      attempts++;
+
+      if (attempts > 5) {
+        throw new Error('Could not connect');
+      }
+    }
+
+    // we no longer want to listen to connected state change events
+    pc.removeEventListener('iceconnectedstatechange', onIceConnect);
   }, []);
 
   React.useEffect(() => {
     if (cameraURL && cameraName) {
-      connect(cameraURL);
+      connect(cameraURL).catch(() => {
+        // toggle the reload value on error so this useEffect will run again
+        setReload(!reload);
+      });
     }
 
     return () => {
       remoteStream?.getTracks().forEach(t => t.stop());
-      remoteStream?.release();
+      remoteStream?.release(true);
       localStream?.getTracks().forEach(t => t.stop());
       localStream?.release();
       pcRef?.current?.close();
     };
-  }, [cameraURL, cameraName]);
+  }, [cameraURL, cameraName, reload]);
 
   if (!cameraName) {
     return null;
   }
 
+  if (loading) {
+    return <Text>Loading ...</Text>;
+  }
+
   if (remoteStream) {
     return (
       <RTCView
         style={{width: '100%', height: '100%'}}
         objectFit={'contain'}
         streamURL={remoteStream.toURL()}
       />
     );
   }
-  return null;
+  return <Text>No video stream set</Text>;
 };

src/screens/homeScreen.tsx

@@ -52,7 +52,7 @@ export const HomeScreen = () => {
       {currentCamera && (
         <BaseView className="flex-1">
           <WebRTCPOC cameraName={currentCamera} />
-          <BaseText>Vieweing: {currentCamera}</BaseText>
+          <BaseText>Viewing: {currentCamera}</BaseText>
         </BaseView>
       )}
     </BaseView>