v2.3.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [

src/layers/Environment/ui/PauseMenu/index.tsx

@@ -48,7 +48,7 @@ export default function PauseMenu(props: PauseMenuProps) {
   const PAUSE_ITEMS: PauseItem[] = [
     ...pauseMenuItems,
     {
-      text: "v2.3.2",
+      text: "v2.3.3",
       link: "https://www.npmjs.com/package/spacesvr",
     },
     ...menuItems,

src/layers/Network/ideas/NetworkedEntities/index.tsx

@@ -8,7 +8,6 @@ import { useNetwork } from "../../logic/network";
 import { useLimitedFrame } from "../../../../logic/limiter";
 import { SnapshotInterpolation } from "@geckos.io/snapshot-interpolation";
 import {
-  Snapshot,
   Entity as EntityState,
   Quat,
 } from "@geckos.io/snapshot-interpolation/lib/types";

src/layers/Network/ideas/NetworkedEntities/logic/entity.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useLimitedFrame } from "../../../../../logic/limiter";
 import { useNetwork } from "../../../logic/network";
 import { PositionalAudio } from "three";
@@ -26,7 +26,7 @@ export const useEntities = (): Entity[] => {
   const needsAudio = (e: Entity) => mediaConnections.has(e.id) && !e.posAudio;
 
   // check for a change in player list, re-render if there is a change
-  useLimitedFrame(5, () => {
+  useLimitedFrame(3, () => {
     if (!connected) return;
 
     // changed flag to trigger re-render at the end
@@ -68,6 +68,7 @@ export const useEntities = (): Entity[] => {
         const mediaConn = mediaConnections.get(e.id);
         if (!mediaConn) return;
         if (!mediaConn.remoteStream) return;
+        console.log("adding audio for", e.id);
 
         const audioElem = document.createElement("audio");
         audioElem.srcObject = mediaConn.remoteStream; // remote is incoming, local is own voice

src/layers/Network/logic/mic.ts

@@ -35,19 +35,20 @@ export const useMicrophone = (enabled = true): MediaStream | undefined => {
 
     setAttempted(true);
 
-    navigator.getUserMedia =
-      navigator.getUserMedia ||
-      navigator.webkitGetUserMedia ||
-      navigator.mozGetUserMedia ||
-      navigator.msGetUserMedia;
-
-    navigator.getUserMedia(
-      { audio: true },
-      (str) => setLocalStream(str),
-      (err) => {
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
+      })
+      .then((stream) => {
+        setLocalStream(stream);
+      })
+      .catch((err) => {
         console.error(err);
-      }
-    );
+      });
   }, [attempted, enabled, firstPaused]);
 
   return localStream;

src/layers/Network/logic/voice.ts

@@ -1,22 +1,6 @@
 import { DataConnection, Peer, MediaConnection } from "peerjs";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { useMicrophone } from "./mic";
-import { useEnvironment } from "../../Environment";
-
-type GetUserMedia = (
-  options: { video?: boolean; audio?: boolean },
-  success: (stream: any) => void,
-  error?: (error: string) => void
-) => void;
-
-declare global {
-  interface Navigator {
-    getUserMedia: GetUserMedia;
-    webkitGetUserMedia?: GetUserMedia;
-    mozGetUserMedia?: GetUserMedia;
-    msGetUserMedia?: GetUserMedia;
-  }
-}
 
 /**
  * When enabled, is responsible for requesting mic permissions, calling and answering peers to create media connections,
@@ -37,16 +21,8 @@ export const useVoiceConnections = (
 
   // handle calling and answering peers
   useEffect(() => {
-    if (!peer || !localStream) return;
-
-    const call = (conn: DataConnection) => {
-      console.log("calling peer with id", conn.peer);
-      handleMediaConn(peer.call(conn.peer, localStream));
-      conn.on("close", () => {
-        console.log("closing voice stream with peer", conn.peer);
-        mediaConns.delete(conn.peer);
-      });
-    };
+    if (!peer || !localStream || !enabled) return;
+    console.log("running voice connection effect");
 
     // handle a new media connection (incoming or created
     const handleMediaConn = (mediaConn: MediaConnection) => {
@@ -65,9 +41,22 @@ export const useVoiceConnections = (
       });
     };
 
+    const call = (conn: DataConnection) => {
+      console.log("calling peer with id", conn.peer);
+      handleMediaConn(peer.call(conn.peer, localStream));
+      conn.on("close", () => {
+        console.log("closing voice stream with peer", conn.peer);
+        mediaConns.delete(conn.peer);
+      });
+    };
+
+    const handleDataConn = (conn: DataConnection) => {
+      conn.on("open", () => call(conn));
+    };
+
     // set up incoming and outgoing calls for any future connections
     peer.on("call", handleMediaConn);
-    peer.on("connection", call);
+    peer.on("connection", handleDataConn);
 
     // call any already connected peers
     for (const [peerId, conn] of connections) {