diff --git a/packages/desktop/src/providers/StreamProvider.tsx b/packages/desktop/src/providers/StreamProvider.tsx index 5d26c07..35e21a6 100644 --- a/packages/desktop/src/providers/StreamProvider.tsx +++ b/packages/desktop/src/providers/StreamProvider.tsx @@ -46,7 +46,12 @@ const iceServers = [ ]; type LinePeerMap = { - [lineId: string]: { userId: string; peer: Peer; mediaStream?: MediaStream }[]; + [lineId: string]: { + userId: string; + peer: Peer; + myMediaStream?: MediaStream; + peerMediaStream?: MediaStream; + }[]; }; interface IStreamProvider { peerMap: LinePeerMap; @@ -95,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 @@ -152,7 +161,7 @@ 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( @@ -163,9 +172,24 @@ export function StreamProvider({ children }: { children: React.ReactChild }) { } 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; } }); }, @@ -185,6 +209,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) { membersToCall={line.tunedInMemberIds.filter( (currMemberId) => currMemberId !== user._id.toString(), )} + handleGotPeerRemoteStream={handleGotPeerRemoteStream} /> ); })} @@ -205,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(); @@ -266,6 +298,10 @@ function LineConnector({ // 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 4928b22..6922348 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx @@ -148,7 +148,7 @@ export default function LineDetails() { if (lineId !== selectedLine.lineDetails._id.toString()) return <>; return peerMap[lineId].map((linePeer) => ( - + )); })} @@ -194,19 +194,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; - }); - - () => peer.destroy(); - }, [peer]); + if (streamRef?.current) streamRef.current.srcObject = peerStream; + }, [peerStream]); return ( <>