From e14e9c70a875ac1abde11926f11132ee4f663d30 Mon Sep 17 00:00:00 2001 From: talksik Date: Thu, 19 May 2022 09:27:37 -0500 Subject: [PATCH 1/5] Update StreamProvider.tsx --- .../desktop/src/providers/StreamProvider.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/desktop/src/providers/StreamProvider.tsx b/packages/desktop/src/providers/StreamProvider.tsx index ec657c2..ffb7e51 100644 --- a/packages/desktop/src/providers/StreamProvider.tsx +++ b/packages/desktop/src/providers/StreamProvider.tsx @@ -46,7 +46,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) { const peerForMeAndNewbie = new Peer({ initiator: false, - trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times + trickle: true, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times stream: userLocalStream, config: { iceServers: [ @@ -63,13 +63,7 @@ export function StreamProvider({ children }: { children: React.ReactChild }) { 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); @@ -102,7 +96,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); }); }); @@ -139,6 +133,14 @@ export function StreamProvider({ children }: { children: React.ReactChild }) { const handleAddPeer = useCallback( (lineId: string, userId: string, peerObj: Peer, mediaStream?: 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 }); } else { @@ -223,7 +225,7 @@ function LineConnector({ const localPeerConnection = new Peer({ initiator: true, stream: localMediaStream, - trickle: false, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times, + trickle: true, // 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' }, @@ -238,6 +240,8 @@ function LineConnector({ }); 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), From efc63df98f9c9e6114d7ffedb5ea3365cd04bfdf Mon Sep 17 00:00:00 2001 From: talksik Date: Thu, 19 May 2022 11:33:07 -0500 Subject: [PATCH 2/5] fixing error on key duplicates --- .../src/tree/protected/terminal/line/LineDetails.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx b/packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx index 0552516..4928b22 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) => ( Date: Thu, 19 May 2022 11:51:17 -0500 Subject: [PATCH 3/5] more progress but calling not working now --- .vscode/settings.json | 2 +- packages/desktop/package.json | 4 +- .../desktop/src/providers/StreamProvider.tsx | 61 +++++++++++-------- .../protected/terminal/panels/MainPanel.tsx | 42 ------------- 4 files changed, 40 insertions(+), 69 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index abfc7e4..23131b1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,7 +8,7 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "workbench.colorTheme": "Default Light+", "javascript.format.semicolons": "insert", - "window.zoomLevel": 1 + "window.zoomLevel": 0 // "eslint.workingDirectories": ["./packages/desktop"] } 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 ffb7e51..31147be 100644 --- a/packages/desktop/src/providers/StreamProvider.tsx +++ b/packages/desktop/src/providers/StreamProvider.tsx @@ -16,6 +16,35 @@ 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 }[]; }; @@ -46,18 +75,10 @@ export function StreamProvider({ children }: { children: React.ReactChild }) { const peerForMeAndNewbie = new Peer({ initiator: false, - trickle: true, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times + 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, }, }); @@ -223,19 +244,11 @@ function LineConnector({ const connectingToast = toast.loading('calling peer for a snappy experience'); const localPeerConnection = new Peer({ - initiator: true, + initiator: false, stream: localMediaStream, trickle: true, // 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, }, }); @@ -248,11 +261,11 @@ function LineConnector({ ); 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); + }); }); }); }); 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 -