adding muting although can't catch it so to speak right now

packages/api/index.ts

@@ -143,7 +143,7 @@ io.on("connection", function (socket: any) {
     const sendingBackData: ReceiveSignal = {
       simplePeerSignal: payload.simplePeerSignal,
       senderUserSocketId: socket.id,
-      isGoingBackToInitiator: payload.isAnswerer,
+      isGoingBackToInitiator: payload.isAnswerer ? true : false,
     };
 
     io.to(payload.userSocketIdToSignal).emit(

packages/desktop/package.json

@@ -55,8 +55,8 @@
         [
           "@electron-forge/plugin-webpack",
           {
-            "port": "4001",
-            "loggerPort": "9004",
+            "port": "4000",
+            "loggerPort": "9001",
             "mainConfig": "./webpack.main.config.js",
             "devContentSecurityPolicy": "connect-src 'self' http://localhost:5000 ws://localhost:5000 'unsafe-eval'",
             "renderer": {

packages/desktop/src/pages/overlay/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { $maxNumberActiveStreams } from "../../controller/recoil";
 import { $numberActiveLines } from "../../controller/recoil";
@@ -21,11 +21,20 @@ function Video({ peer }: { peer: Peer }) {
 
   useEffect(() => {
     peer.on("stream", (remoteStream: MediaStream) => {
+      console.log("stream coming in, adding video src object");
+
       if (videoRef?.current) videoRef.current.srcObject = remoteStream;
     });
+
+    peer.on("close", () => {
+      console.log("remote user closed mediaconnection");
+      videoRef.current.height = 0;
+    });
   }, [videoRef]);
 
-  return <video ref={videoRef} controls height={"200"} width="250" autoPlay />;
+  return (
+    <video ref={videoRef} controls height={"200"} width="250" autoPlay muted />
+  );
 }
 
 export default function Overlay() {
@@ -43,6 +52,9 @@ export default function Overlay() {
 
   const localVideoRef = useRef<HTMLVideoElement>(null);
 
+  const [localUserVideoStream, setLocalUserVideoStream] =
+    useState<MediaStream>(null);
+
   // initially, have these set to default
   useEffect(() => {
     setNumActiveLines(1);
@@ -68,6 +80,8 @@ export default function Overlay() {
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: true })
       .then((localStream: MediaStream) => {
+        setLocalUserVideoStream(localStream);
+
         // show user video
         if (localVideoRef?.current)
           localVideoRef.current.srcObject = localStream;
@@ -100,6 +114,7 @@ export default function Overlay() {
                 socket.emit(SocketChannels.SEND_SIGNAL, {
                   userSocketIdToSignal: userSocketId,
                   simplePeerSignal: signal,
+                  isAnswerer: false,
                 } as SendSignal);
               });
 
@@ -182,6 +197,13 @@ export default function Overlay() {
     setMaxNumActiveStreams((prevNum) => prevNum + 1);
   };
 
+  // handle shortcut to enable this stream if this video component is selected
+  const toggleMyStreamOnOrOff = useCallback(() => {
+    localUserVideoStream
+      .getTracks()
+      .forEach((track) => (track.enabled = !track.enabled));
+  }, [localUserVideoStream]);
+
   return (
     <div className="flex flex-col max-w-sm">
       {/* {[...Array(maxNumActiveStreams)].map((_n) => (
@@ -196,6 +218,8 @@ export default function Overlay() {
 
       <video muted id="userLocalVideo" ref={localVideoRef} controls autoPlay />
 
+      <button onClick={toggleMyStreamOnOrOff}>Toggle My Stream</button>
+
       {localPeerConnections.map((peer) => (
         <Video peer={peer} />
       ))}

packages/web/pages/index.tsx

@@ -1,7 +1,6 @@
 import { BsApple, BsWindows } from "react-icons/bs";
 import { FaPeopleCarry, FaRunning } from "react-icons/fa";
 
-import { Button } from "carbon-components-react";
 import Footer from "../components/footer";
 import Header from "../components/header";
 import { MdOutlineNaturePeople } from "react-icons/md";
@@ -22,8 +21,6 @@ const Home: NextPage = () => {
               for remote startups.
             </span>
 
-            <Button>yoo carbon what's up</Button>
-
             <span className="text-zinc-400 text-lg md:text-xl mt-5 text-center md:text-left">
               The <span className="text-nirvanaTeal">{"'less is more'"}</span>{" "}
               approach. Skip zoom scheduling, <br></br> slack notifications, and