another approach trying to get order right

.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
 }

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);
 

packages/web/pages/rtc/index.tsx

@@ -12,57 +12,67 @@ export default function VideoChat() {
   const [selectedLine, setSelectedLine] = useState<string>(lines[0]);
   const videoRef = useRef<HTMLVideoElement>();
   const incomingVideoRef = useRef<HTMLVideoElement>();
-  const [localMediaStream, setLocalMediaStream] = useState();
+  const [localMediaStream, setLocalMediaStream] = useState<MediaStream>();
 
   // connect to media server for line connections as a broadcaster and consumer
   useEffect(() => {
-    navigator.mediaDevices
+    (async () => {
-      .getUserMedia({ video: true, audio: false })
+      // note: [later] create a unique peer connection to server for each line
-      .then((localMediaStream: any) => {
+      // lines.forEach((lineId) => {
-        console.log("localMediaStream", localMediaStream);
-        console.log(`tracks: `, localMediaStream.getTracks());
-        setLocalMediaStream(localMediaStream);
 
-        if (videoRef.current) {
+      // });
-          toast("got local user video stream");
-          videoRef.current.srcObject = localMediaStream;
 
-          // create a unique peer connection to server for each line
+      // create the peer and add the tranceiver
-          lines.forEach((lineId) => {
+      const peer = await createPeer("line1");
-            // create the peer and add the tranceiver
-            const peer = createPeer(lineId);
 
-            // peer.onconnectionstatechange = console.log;
+      // console.log(`peer connection for ${lineId}`, peer);
-            // 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);
-            });
-          });
-        }
-      });
   }, [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
       />