diff --git a/packages/desktop/package.json b/packages/desktop/package.json index 0227512..86a4d99 100644 --- a/packages/desktop/package.json +++ b/packages/desktop/package.json @@ -42,8 +42,8 @@ [ "@electron-forge/plugin-webpack", { - "port": "4005", - "loggerPort": "9005", + "port": "4000", + "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": { diff --git a/packages/desktop/src/providers/StreamProvider.tsx b/packages/desktop/src/providers/StreamProvider.tsx index ec657c2..35e21a6 100644 --- a/packages/desktop/src/providers/StreamProvider.tsx +++ b/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: 'webrtc@live.com', + }, + { + url: 'turn:numb.viagenie.ca', + credential: 'muazkh', + username: 'webrtc@live.com', + }, + { + 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: [ - { urls: 'stun:stun.l.google.com:19302' }, - { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, - { - url: 'turn:numb.viagenie.ca', - credential: 'muazkh', - username: 'webrtc@live.com', - }, - ], + iceServers, }, }); peerForMeAndNewbie.signal(res.simplePeerSignal); - updatePeerMap((draft) => { - if (draft[res.lineId]) { - draft[res.lineId].push({ userId: res.userWhoCalled, peer: peerForMeAndNewbie }); - } else { - draft[res.lineId] = [{ userId: res.userWhoCalled, peer: peerForMeAndNewbie }]; - } - }); + handleAddPeer(res.lineId, res.userWhoCalled, peerForMeAndNewbie, userLocalStream); 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: [ - { urls: 'stun:stun.l.google.com:19302' }, - { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }, - { - url: 'turn:numb.viagenie.ca', - credential: 'muazkh', - username: 'webrtc@live.com', - }, - ], + iceServers, }, }); 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 - // so that we can accept the answer later on - handleAddPeer(lineId, memberId, localPeerConnection, localMediaStream); + localPeerConnection.on('stream', (remoteStream: MediaStream) => { + handleGotPeerRemoteStream(lineId, memberId, remoteStream); + }); }); }); }); diff --git a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx index 27465b2..351b113 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx @@ -109,10 +109,10 @@ export default function LineDetails() { - + {tunedProfiles.map((otherUser) => ( | - + {selectedLine.otherUserObjects.map((otherUser) => ( { if (lineId !== selectedLine.lineDetails._id.toString()) return <>; - return peerMap[lineId].map((linePeer) => ( - - )); + return peerMap[lineId].map( + (linePeer) => + linePeer.peerMediaStream && ( + + ), + ); })} @@ -194,19 +200,12 @@ export default function LineDetails() { ); } -function StreamPlayer({ peer }: { peer: Peer }) { +function StreamPlayer({ peerStream }: { peerStream: MediaStream }) { const streamRef = useRef(null); useEffect(() => { - peer.on('stream', (remotePeerStream: MediaStream) => { - console.log('stream coming in from remote peer'); - console.log(remotePeerStream); - - if (streamRef?.current) streamRef.current.srcObject = remotePeerStream; - }); - - return () => peer.destroy(); - }, [peer]); + if (streamRef?.current) streamRef.current.srcObject = peerStream; + }, [peerStream]); return ( <> diff --git a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx index e6a1884..5cc815d 100644 --- a/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx +++ b/packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx @@ -45,45 +45,3 @@ export default function MainPanel() { ); } - -function LineStreams({ broadcasters }: { broadcasters: string[] }) { - const { peerMap } = useStreams(); - - console.log(peerMap); - return ( -
- {broadcasters?.map((userId) => { - const currentPeer = peerMap[userId]; - - return currentPeer && ; - })} - this is the list of current streams we are going to show -
- ); -} - -function Stream({ peer }: { peer: Peer }) { - const streamRef = useRef(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 -