wip voice chat

package.json

@@ -13,10 +13,12 @@
     "@react-three/drei": "^9.84.1",
     "@react-three/fiber": "^8.14.1",
     "@types/three": "^0.156.0",
+    "buffer": "^6.0.3",
     "flowbite": "^1.8.1",
     "flowbite-react": "^0.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "simple-peer": "^9.11.1",
     "socket.io-client": "^4.7.2",
     "three": "^0.156.1"
   },
@@ -24,6 +26,7 @@
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/simple-peer": "^9.11.6",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
@@ -34,6 +37,7 @@
     "postcss": "^8.4.30",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-plugin-node-polyfills": "^0.15.0"
   }
 }

src/App.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { socket } from "./socket";
+import SimplePeer from "simple-peer";
 
 import GameCanvas from "./components/GameCanvas";
 import { Footer } from "./components/Footer";
@@ -53,6 +54,50 @@ export default function App() {
     socket.on("clients-in-session", onClientsInRoomUpdate);
     socket.on("game-update", onGameUpdate);
 
+    const peers = new Map<string, SimplePeer.Instance>();
+
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then((stream) => {
+        socket.on("initiate-voice-chat", (data) => {
+          const { to } = data;
+          console.log("Initiating voice chat with", to);
+
+          const peer = new SimplePeer({ initiator: true, stream });
+
+          peers.set(to, peer);
+
+          peer.on("signal", (signalData) => {
+            socket.emit("signal", { to, signalData });
+          });
+        });
+
+        socket.on("signal", (data) => {
+          const { from, signalData } = data;
+          let peer = peers.get(from);
+
+          if (!peer) {
+            peer = new SimplePeer({ initiator: false, stream });
+            peers.set(from, peer);
+
+            peer.on("signal", (signalData) => {
+              socket.emit("signal", { to: from, signalData });
+            });
+
+            peer.on("stream", (remoteStream) => {
+              const audioEl = new Audio();
+              audioEl.srcObject = remoteStream;
+              audioEl.play();
+            });
+          }
+
+          peer.signal(signalData);
+        });
+      })
+      .catch((err) => {
+        console.log("Error getting user media", err);
+      });
+
     return () => {
       socket.off("connect", onConnect);
       socket.off("disconnect", onDisconnect);

src/components/GameCanvas.tsx

@@ -3,7 +3,7 @@ import { Vector3 } from "three";
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls, Environment } from "@react-three/drei";
 
-import Music from "../components/Music";
+// import Music from "../components/Music";
 import Model from "../components/Model";
 import PlayArea from "../components/PlayArea";
 import { Game } from "../types/gameTypes";
@@ -58,7 +58,7 @@ const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
         }}
       >
         <Environment preset="apartment" />
-        <Music />
+        {/* Music is currently disabled <Music /> - uncomment to enable */}
         {/*<ambientLight color={0xa3a3a3} intensity={0.1} />
         <directionalLight
           color={0xffffff}

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), nodePolyfills()],
   server: {
     host: true,
   },