From f68b551a4327e7246b5c4f473b3262eb90629153 Mon Sep 17 00:00:00 2001 From: talksik Date: Thu, 28 Apr 2022 16:00:33 -0500 Subject: [PATCH] another approach trying to get order right --- .vscode/settings.json | 2 +- packages/api/routes/rtc.ts | 28 ++++++----- packages/web/pages/rtc/index.tsx | 79 ++++++++++++++++++-------------- 3 files changed, 63 insertions(+), 46 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index cc40c2e..5c72ef9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,6 +8,6 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "workbench.colorTheme": "Default Light+", "javascript.format.semicolons": "insert", - "window.zoomLevel": 1, + "window.zoomLevel": 2, "trunk.trunkGrayOutNonBlockingIssues": false } diff --git a/packages/api/routes/rtc.ts b/packages/api/routes/rtc.ts index 53e7ecd..84f12bd 100644 --- a/packages/api/routes/rtc.ts +++ b/packages/api/routes/rtc.ts @@ -28,11 +28,27 @@ async function handleJoin(req: Request, res: Response) { const peer = new webrtc.RTCPeerConnection({ iceServers: [ { - urls: "stun:stun.l.google.com:19302", + urls: "stun:stun.stunprotocol.org", }, ], }); + // now that remote is set + // allow this peer connection for this specific line to get tracks for this line already + try { + // TODO: turn this on later for line feature + // linesStreams[lineId]?.forEach((stream) => { + // stream?.getTracks().forEach((track: any) => { + // peer.addTrack(track, stream); + // }); + // }); + testMainStream?.getTracks().forEach((track: any) => { + peer.addTrack(track, testMainStream); + }); + } catch (e) { + console.log(`hacking around small problem with adding track`, e); + } + // allow this peer connection to receive other peoples' streams peer.ontrack = (e: any) => handleStreams(e, peer, lineId); @@ -40,16 +56,6 @@ async function handleJoin(req: Request, res: Response) { const desc = new webrtc.RTCSessionDescription(sdp); await peer.setRemoteDescription(desc); - // now that remote is set - // allow this peer connection for this specific line to get tracks for this line already - try { - testMainStream?.getTracks().forEach((track: any) => { - peer.addTrack(track, testMainStream); - }); - } catch (e) { - console.log(`hacking around small problem with adding track`, e); - } - const answer = await peer.createAnswer(); await peer.setLocalDescription(answer); diff --git a/packages/web/pages/rtc/index.tsx b/packages/web/pages/rtc/index.tsx index 3b871e3..f4bd3d8 100644 --- a/packages/web/pages/rtc/index.tsx +++ b/packages/web/pages/rtc/index.tsx @@ -12,57 +12,67 @@ export default function VideoChat() { const [selectedLine, setSelectedLine] = useState(lines[0]); const videoRef = useRef(); const incomingVideoRef = useRef(); - const [localMediaStream, setLocalMediaStream] = useState(); + const [localMediaStream, setLocalMediaStream] = useState(); // connect to media server for line connections as a broadcaster and consumer useEffect(() => { - navigator.mediaDevices - .getUserMedia({ video: true, audio: false }) - .then((localMediaStream: any) => { - console.log("localMediaStream", localMediaStream); - console.log(`tracks: `, localMediaStream.getTracks()); - setLocalMediaStream(localMediaStream); + (async () => { + // note: [later] create a unique peer connection to server for each line + // lines.forEach((lineId) => { - if (videoRef.current) { - toast("got local user video stream"); - videoRef.current.srcObject = localMediaStream; + // }); - // create a unique peer connection to server for each line - lines.forEach((lineId) => { - // create the peer and add the tranceiver - const peer = createPeer(lineId); + // create the peer and add the tranceiver + const peer = await createPeer("line1"); - // peer.onconnectionstatechange = console.log; - // console.log(`peer connection for ${lineId}`, peer); - - // todo: understand this better - peer.addTransceiver("video"); - // peer.addTransceiver("video", { streams: [localMediaStream] }); - - // todo: add other tracks like screenshare and such - localMediaStream.getTracks().forEach((track: any) => { - console.log( - `adding track to peer connection: different mediums | audio, video, screen based on selection` - ); - peer.addTrack(track, localMediaStream); - }); - }); - } - }); + // console.log(`peer connection for ${lineId}`, peer); + })(); }, [lines]); - const createPeer = (lineId: string) => { + const createPeer = async (lineId: string) => { const peer = new RTCPeerConnection({ iceServers: [ { - urls: "stun:stun.l.google.com:19302", + urls: "stun:stun.stunprotocol.org", }, ], }); + peer.onconnectionstatechange = console.log; + + // todo: understand this better + peer.addTransceiver("video"); + // peer.addTransceiver("video", { streams: [localMediaStream] }); + + const localMediaStream = await navigator.mediaDevices.getUserMedia({ + video: true, + audio: false, + }); + + console.log("localMediaStream", localMediaStream); + console.log(`tracks: `, localMediaStream.getTracks()); + setLocalMediaStream(localMediaStream); + + if (videoRef.current) { + toast("got local user video stream"); + videoRef.current.srcObject = localMediaStream; + + // todo: add other tracks like screenshare and such + localMediaStream.getTracks().forEach((track: MediaStreamTrack) => { + console.log( + `adding track to peer connection: different mediums | audio, video, screen based on selection` + ); + peer.addTrack(track, localMediaStream); + }); + } + + console.log(peer.connectionState); + peer.ontrack = handleTrackEvent; peer.onnegotiationneeded = () => handleNegotiationNeededEvent(peer, lineId); + console.log(peer); + return peer; }; @@ -102,7 +112,7 @@ export default function VideoChat() { if (incomingVideoRef.current) { toast(`setting incoming stream ref`); - incomingVideoRef.current.srcObject = incomingStream; + incomingVideoRef.current.srcObject = new MediaStream(incomingStream); setInterval(() => { incomingVideoRef!.current!.play().then(console.log).catch(console.log); @@ -150,6 +160,7 @@ export default function VideoChat() { height={"500"} width={"700"} autoPlay + muted controls />