talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
talksik
2022-05-19 12:25:52 -05:00
parent 024ba5d5b5 29eeb244ff
commit d728a1283e
4 changed files with 105 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/package.json
+2 -2
View File
@@ -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": {
packages/desktop/src/providers/StreamProvider.tsx
+85 -32
View File
@@ -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,31 +280,29 @@ 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);
});
localPeerConnection.on('stream', (remoteStream: MediaStream) => {
handleGotPeerRemoteStream(lineId, memberId, remoteStream);
});
});
});
});
packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx
+16 -17
View File
@@ -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) => (
<StreamPlayer key={`streamPlayer-${index}`} peer={linePeer.peer} />
));
return peerMap[lineId].map(
(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) => {
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 (
<>
packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
-42
View File
@@ -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} />
</>
);
}