trying to send through transceiver and still trying to fiddle

packages/api/routes/rtc.ts

@@ -31,20 +31,26 @@ async function handleJoin(req: Request, res: Response) {
       ],
     });
 
+    // now that remote is set
+    // allow this peer connection for this specific line to get tracks for this line already
+    try {
+      linesStreams[lineId]?.forEach((stream: any) => {
+        stream.getTracks().forEach((track: any) => {
+          console.log(`have tracks in this line`, track, stream);
+          peer.addTrack(track, stream);
+        });
+      });
+    } 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);
 
-    // allow this peer connection for this specific line to get tracks for this line already
-    linesStreams[lineId]?.forEach((stream: any) => {
-      stream.getTracks().forEach((track: any) => {
-        console.log(`have tracks in this line`, track, stream);
-        peer.addTrack(track, stream);
-      });
-    });
-
     // create connection between server and client who hit this endpoint
     const desc = new webrtc.RTCSessionDescription(sdp);
     await peer.setRemoteDescription(desc);
+
     const answer = await peer.createAnswer();
     await peer.setLocalDescription(answer);
 
@@ -68,11 +74,13 @@ async function handleJoin(req: Request, res: Response) {
 function handleStreams(e: any, peer: any, lineId: string) {
   // if the room/line exists already, then add to the list of streams
   if (lineId in linesStreams) {
-    const newStreamsForLine = [...(linesStreams[lineId] ?? []), ...e.streams];
+    const newStreamsForLine = [...(linesStreams[lineId] ?? []), e.streams[0]];
 
     linesStreams[lineId] = newStreamsForLine;
   } else {
     // create a new list of streams
-    linesStreams[lineId] = [...e.streams];
+    linesStreams[lineId] = [e.streams[0]];
   }
+
+  console.log(linesStreams);
 }

packages/web/pages/rtc/index.tsx

@@ -11,17 +11,19 @@ const lines = ["line1", "line2", "line3", "line4", "line5"];
 export default function VideoChat() {
   const [selectedLine, setSelectedLine] = useState<string>(lines[0]);
   const videoRef = useRef<HTMLVideoElement>();
+  const incomingVideoRef = useRef<HTMLVideoElement>();
 
   // connect to media server for line connections as a broadcaster and consumer
   useEffect(() => {
     navigator.mediaDevices
-      .getUserMedia({ video: true, audio: true })
-      .then((mediaStream: any) => {
-        console.log("mediaStream", mediaStream);
+      .getUserMedia({ video: true, audio: false })
+      .then((localMediaStream: any) => {
+        console.log("localMediaStream", localMediaStream);
+        console.log(`tracks: `, localMediaStream.getTracks());
 
         if (videoRef.current) {
           toast("got local user video stream");
-          videoRef.current.srcObject = mediaStream;
+          videoRef.current.srcObject = localMediaStream;
           videoRef.current.play();
 
           // create a unique peer connection to server for each line
@@ -29,13 +31,18 @@ export default function VideoChat() {
             // create the peer and add the tranceiver
             const peer = createPeer(lineId);
 
-            console.log(`peer connection for ${lineId}`, peer);
+            // console.log(`peer connection for ${lineId}`, peer);
 
-            peer.addTransceiver("video");
+            // todo: understand this better
+            // peer.addTransceiver();
+            peer.addTransceiver("video", { streams: [localMediaStream] });
 
-            mediaStream.getTracks().forEach((track: any) => {
-              console.log(`adding track to peer connection`);
-              peer.addTrack(track, mediaStream);
+            // 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);
             });
           });
         }
@@ -60,6 +67,8 @@ export default function VideoChat() {
     peer: RTCPeerConnection,
     lineId: string
   ) => {
+    console.log("test");
+
     // create offer
     const offer = await peer.createOffer();
     await peer.setLocalDescription(offer);
@@ -73,19 +82,38 @@ export default function VideoChat() {
       payload
     );
 
+    console.log(`got sdp from backend | `, data.data.sdp);
+
     // receive server acceptance and set remote configs
     const desc = new RTCSessionDescription(data.data.sdp);
     peer.setRemoteDescription(desc).catch((e) => console.log(e));
 
-    console.log(`done handling negotiation with media server`);
+    console.log(
+      `done handling negotiation with media server | remote description: `,
+      desc
+    );
   };
 
   // render tracks on the server peer sending something
-  function handleTrackEvent(e: any) {
+  // todo: memoize the line so that we can show user where stream is coming from
+  const handleTrackEvent = (e: any) => {
     const incomingStream = e.streams[0];
 
-    console.log("incoming stream", e);
-  }
+    console.log("incoming stream", incomingStream);
+
+    // if (incomingVideoRef.current) {
+    //   console.log(`setting incoming stream ref`);
+    //   incomingVideoRef.current.srcObject = incomingStream;
+    //   incomingVideoRef.current.load();
+    //   incomingVideoRef.current.play();
+    // }
+
+    var video = document.getElementById("incomingVideoRef");
+    video.srcObject = incomingStream;
+    video.onloadedmetadata = function (e) {
+      video.play();
+    };
+  };
 
   return (
     <div className="text-white p-10">
@@ -116,6 +144,13 @@ export default function VideoChat() {
         width={"300"}
       />
 
+      <video
+        ref={incomingVideoRef}
+        id="incomingVideoRef"
+        height={"500"}
+        width={"700"}
+      />
+
       <h1 className="text-3xl mt-10">Select a Line</h1>
       {lines.map((lineId) => (
         <a