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 (
<>