Merge branch 'attempting-trickle-for-faster-connection'

packages/desktop/package.json

@@ -42,8 +42,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4005",
+            "port": "4000",
-            "loggerPort": "9005",
+            "loggerPort": "9000",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 https://api.quotable.io/random 'unsafe-eval'",
             "renderer": {

packages/desktop/src/providers/StreamProvider.tsx

@@ -16,8 +16,42 @@ import useTerminalProvider from './TerminalProvider';
 import MasterLineData from '@nirvana/core/models/masterLineData.model';
 import { useEffectOnce } from 'react-use';
 
+const iceServers = [
+  { urls: 'stun:stun.l.google.com:19302' },
+  { urls: 'stun:stun.l.google.com:19302' },
+  { urls: 'stun:stun1.l.google.com:19302' },
+  { urls: 'stun:stun2.l.google.com:19302' },
+  { urls: 'stun:stun3.l.google.com:19302' },
+  { urls: 'stun:stun4.l.google.com:19302' },
+  {
+    url: 'turn:numb.viagenie.ca',
+    credential: 'muazkh',
+    username: '[email protected]',
+  },
+  {
+    url: 'turn:numb.viagenie.ca',
+    credential: 'muazkh',
+    username: '[email protected]',
+  },
+  {
+    url: 'turn:192.158.29.39:3478?transport=udp',
+    credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+    username: '28224511:1379330808',
+  },
+  {
+    url: 'turn:192.158.29.39:3478?transport=tcp',
+    credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
+    username: '28224511:1379330808',
+  },
+];
+
 type LinePeerMap = {
-  [lineId: string]: { userId: string; peer: Peer; mediaStream?: MediaStream }[];
+  [lineId: string]: {
+    userId: string;
+    peer: Peer;
+    myMediaStream?: MediaStream;
+    peerMediaStream?: MediaStream;
+  }[];
 };
 interface IStreamProvider {
   peerMap: LinePeerMap;
@@ -49,27 +83,13 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
         stream: userLocalStream,
         config: {
-          iceServers: [
+          iceServers,
-            { urls: 'stun:stun.l.google.com:19302' },
-            { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
-            {
-              url: 'turn:numb.viagenie.ca',
-              credential: 'muazkh',
-              username: '[email protected]',
-            },
-          ],
         },
       });
 
       peerForMeAndNewbie.signal(res.simplePeerSignal);
 
-      updatePeerMap((draft) => {
+      handleAddPeer(res.lineId, res.userWhoCalled, peerForMeAndNewbie, userLocalStream);
-        if (draft[res.lineId]) {
-          draft[res.lineId].push({ userId: res.userWhoCalled, peer: peerForMeAndNewbie });
-        } else {
-          draft[res.lineId] = [{ userId: res.userWhoCalled, peer: peerForMeAndNewbie }];
-        }
-      });
 
       peerForMeAndNewbie.on('signal', (signal) => {
         console.log('sending an answer to the slave', res);
@@ -80,6 +100,10 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
         );
       });
 
+      peerForMeAndNewbie.on('stream', (remoteStream: MediaStream) => {
+        handleGotPeerRemoteStream(res.lineId, res.userWhoCalled, remoteStream);
+      });
+
       // !adding stream here causes race condition of the signal event just running over and over again
 
       // see if I have a stream for this channel or line
@@ -102,7 +126,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
           (currPeerRelationship) => currPeerRelationship.userId === res.masterUserId,
         );
 
-        localPeerForMasterAndMe.peer.signal(res.simplePeerSignal);
+        if (localPeerForMasterAndMe) localPeerForMasterAndMe.peer.signal(res.simplePeerSignal);
       });
     });
 
@@ -137,12 +161,35 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
   console.log(`peer map: `, peerMap);
 
   const handleAddPeer = useCallback(
-    (lineId: string, userId: string, peerObj: Peer, mediaStream?: MediaStream) => {
+    (lineId: string, userId: string, peerObj: Peer, myMediaStream?: MediaStream) => {
       updatePeerMap((draft) => {
+        // for trickling, if we already have a peer for this line and user, then just replace
+        const existingUserLinePeerRelation = draft[lineId]?.find(
+          (currPeerRelation) => currPeerRelation.userId === userId,
+        );
+        if (existingUserLinePeerRelation) {
+          return draft;
+        }
+
         if (draft[lineId]) {
-          draft[lineId].push({ userId, peer: peerObj, mediaStream });
+          draft[lineId].push({ userId, peer: peerObj, myMediaStream });
         } else {
-          draft[lineId] = [{ userId, peer: peerObj, mediaStream }];
+          draft[lineId] = [{ userId, peer: peerObj, myMediaStream }];
+        }
+      });
+    },
+    [updatePeerMap],
+  );
+
+  const handleGotPeerRemoteStream = useCallback(
+    (lineId: string, userId: string, remoteStream: MediaStream) => {
+      updatePeerMap((draft) => {
+        // for trickling, if we already have a peer for this line and user, then just replace
+        const existingUserLinePeerRelation = draft[lineId]?.find(
+          (currPeerRelation) => currPeerRelation.userId === userId,
+        );
+        if (existingUserLinePeerRelation) {
+          existingUserLinePeerRelation.peerMediaStream = remoteStream;
         }
       });
     },
@@ -162,6 +209,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) {
               membersToCall={line.tunedInMemberIds.filter(
                 (currMemberId) => currMemberId !== user._id.toString(),
               )}
+              handleGotPeerRemoteStream={handleGotPeerRemoteStream}
             />
           );
       })}
@@ -182,10 +230,17 @@ function LineConnector({
   lineId,
   membersToCall,
   handleAddPeer,
+  handleGotPeerRemoteStream,
 }: {
   lineId: string;
   membersToCall: string[];
-  handleAddPeer: (lineId: string, userId: string, peerObj: Peer, mediaStream?: MediaStream) => void;
+  handleAddPeer: (
+    lineId: string,
+    userId: string,
+    peerObj: Peer,
+    myMediaStream?: MediaStream,
+  ) => void;
+  handleGotPeerRemoteStream: (lineId: string, userId: string, remoteStream: MediaStream) => void;
 }) {
   const { $ws } = useSockets();
 
@@ -225,30 +280,28 @@ function LineConnector({
             stream: localMediaStream,
             trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times,
             config: {
-              iceServers: [
+              iceServers,
-                { urls: 'stun:stun.l.google.com:19302' },
-                { urls: 'stun:global.stun.twilio.com:3478?transport=udp' },
-                {
-                  url: 'turn:numb.viagenie.ca',
-                  credential: 'muazkh',
-                  username: '[email protected]',
-                },
-              ],
             },
           });
 
           localPeerConnection.on('signal', (signal) => {
+            console.log('have a signal to make call to someone ');
+
             $ws.emit(
               ServerRequestChannels.RTC_CALL_SOMEONE_FOR_LINE,
               new RtcCallRequest(memberId, lineId, signal),
             );
 
             toast.dismiss(connectingToast);
+
+            // sending back the connection to the parent
+            // so that we can accept the answer later on
+            handleAddPeer(lineId, memberId, localPeerConnection, localMediaStream);
           });
 
-          // sending back the connection to the parent
+          localPeerConnection.on('stream', (remoteStream: MediaStream) => {
-          // so that we can accept the answer later on
+            handleGotPeerRemoteStream(lineId, memberId, remoteStream);
-          handleAddPeer(lineId, memberId, localPeerConnection, localMediaStream);
+          });
         });
       });
   });

packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx

@@ -109,10 +109,10 @@ export default function LineDetails() {
           </span>
         </div>
 
-        <Avatar.Group className={'animate-pulse'} key={`lineHistoryMessage-yesterday-afternoon}`}>
+        <Avatar.Group className={'animate-pulse'}>
           {tunedProfiles.map((otherUser) => (
             <Avatar
-              key={`tunedUser-${otherUser.name}`}
+              key={`lineTunedInUserAvatar-${otherUser.name}`}
               src={otherUser.pictureSrc}
               shape="square"
               size={'large'}
@@ -123,10 +123,10 @@ export default function LineDetails() {
 
         <span className="px-10 text-gray-200"> | </span>
 
-        <Avatar.Group key={`lineHistoryMessage-yesterday-afternoon}`}>
+        <Avatar.Group>
           {selectedLine.otherUserObjects.map((otherUser) => (
             <Avatar
-              key={`linehistory-${1}`}
+              key={`lineOfflineUserAvatar-${1}`}
               src={otherUser.picture}
               shape="square"
               size={'default'}
@@ -147,9 +147,15 @@ export default function LineDetails() {
           {Object.keys(peerMap).map((lineId, index) => {
             if (lineId !== selectedLine.lineDetails._id.toString()) return <></>;
 
-            return peerMap[lineId].map((linePeer) => (
+            return peerMap[lineId].map(
-              <StreamPlayer key={`streamPlayer-${index}`} peer={linePeer.peer} />
+              (linePeer) =>
-            ));
+                linePeer.peerMediaStream && (
+                  <StreamPlayer
+                    key={`streamPlayer-${index}`}
+                    peerStream={linePeer.peerMediaStream}
+                  />
+                ),
+            );
           })}
         </div>
 
@@ -194,19 +200,12 @@ export default function LineDetails() {
   );
 }
 
-function StreamPlayer({ peer }: { peer: Peer }) {
+function StreamPlayer({ peerStream }: { peerStream: MediaStream }) {
   const streamRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    peer.on('stream', (remotePeerStream: MediaStream) => {
+    if (streamRef?.current) streamRef.current.srcObject = peerStream;
-      console.log('stream coming in from remote peer');
+  }, [peerStream]);
-      console.log(remotePeerStream);
-
-      if (streamRef?.current) streamRef.current.srcObject = remotePeerStream;
-    });
-
-    return () => peer.destroy();
-  }, [peer]);
 
   return (
     <>

packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx

@@ -45,45 +45,3 @@ export default function MainPanel() {
     </div>
   );
 }
-
-function LineStreams({ broadcasters }: { broadcasters: string[] }) {
-  const { peerMap } = useStreams();
-
-  console.log(peerMap);
-  return (
-    <div className="flex flex-col">
-      {broadcasters?.map((userId) => {
-        const currentPeer = peerMap[userId];
-
-        return currentPeer && <Stream key={`streamDisplay-${userId}`} peer={currentPeer} />;
-      })}
-      this is the list of current streams we are going to show
-    </div>
-  );
-}
-
-function Stream({ peer }: { peer: Peer }) {
-  const streamRef = useRef<HTMLVideoElement>(null);
-
-  useEffect(() => {
-    peer.on('stream', (remotePeerStream: MediaStream) => {
-      console.log(
-        'stream coming in from remote peer...BUT, only going to show once they broadcast',
-      );
-      console.log(peer);
-
-      // const audio = new Audio();
-      // audio.autoplay = true;
-      // audio.srcObject = remotePeerStream;
-
-      if (streamRef?.current) streamRef.current.srcObject = remotePeerStream;
-    });
-  }, []);
-
-  return (
-    <>
-      this is a stream component of one remote peer
-      <video height={400} width={400} autoPlay muted ref={streamRef} />
-    </>
-  );
-}