feat: remove STUN/ICE server config, replaced by Iroh transport

app/src/components/call/window/CallWindow.vue

@@ -116,7 +116,7 @@
             <j-text size="400" nomargin color="warning-500"> This is a beta feature </j-text>
           </j-flex>
           <j-text size="300" nomargin color="warning-500">
-            We use external STUN servers to establish the connection. Any further communication is peer-to-peer.
+            Connections are established using addresses discovered by the Iroh transport layer. All communication is peer-to-peer.
           </j-text>
         </div>
       </div>

app/src/stores/webrtcStore.ts

@@ -26,26 +26,7 @@ export const WEBRTC_EMOJI = 'webrtc/emoji';
 export const WEBRTC_MEDIA_SETTINGS_CHANGED = 'webrtc/media-settings-changed';
 export const WEBRTC_LEAVING_CALL = 'webrtc/leaving-call';
 const MAX_RECONNECTION_ATTEMPTS = 3;
-const defaultIceServers = [
-  {
-    urls: 'stun:relay.ad4m.dev:3478',
-    username: 'openrelay',
-    credential: 'openrelay',
-  },
-  {
-    urls: 'turn:relay.ad4m.dev:443',
-    username: 'openrelay',
-    credential: 'openrelay',
-  },
-  {
-    urls: 'stun:stun.l.google.com:19302',
-  },
-  {
-    urls: 'stun:global.stun.twilio.com:3478',
-  },
-] as IceServer[];
 
-export type IceServer = { urls: string; username?: string; credential?: string };
 export type MediaState = 'on' | 'off' | 'loading';
 export type PeerConnection = {
   did: string;
@@ -88,7 +69,6 @@ export const useWebrtcStore = defineStore(
     const myAgentStatus = ref<AgentStatus>('active');
     const reconnectionAttempts = ref<Record<string, number>>({});
     const reconnectionTimeouts = ref<Record<string, NodeJS.Timeout>>({});
-    const iceServers = ref(defaultIceServers);
     const disconnectedAgents = ref<string[]>([]);
     const hasCopiedLink = ref(false);
     let copyLinkTimer: ReturnType<typeof setTimeout> | null = null;
@@ -207,7 +187,7 @@ export const useWebrtcStore = defineStore(
       const peer = new SimplePeer({
         initiator,
         stream: localStream.value || undefined,
-        config: { iceServers: iceServers.value },
+        config: { iceServers: [] } // ICE candidates provided by Iroh transport via ad4mClient.runtime.iceCandidates(),
         trickle: true,
       }) as Instance;
 
@@ -577,17 +557,8 @@ export const useWebrtcStore = defineStore(
       }
     }
 
-    function addIceServer(newIceServer: IceServer) {
-      iceServers.value = [...iceServers.value, newIceServer];
-    }
 
-    function removeIceServer(url: string) {
-      iceServers.value = iceServers.value.filter((server) => server.urls !== url);
-    }
 
-    function resetIceServers() {
-      iceServers.value = defaultIceServers;
-    }
 
     async function joinRoom() {
       joiningCall.value = true;
@@ -779,16 +750,12 @@ export const useWebrtcStore = defineStore(
       communityService,
       peerConnections,
       joiningCall,
-      iceServers,
       disconnectedAgents,
       hasCopiedLink,
       addTrack,
       removeTrack,
       replaceAudioTrack,
       replaceVideoTrack,
-      addIceServer,
-      removeIceServer,
-      resetIceServers,
       joinRoom,
       leaveRoom,
       signalAgent,

app/src/views/main/modals/webrtc-settings/WebrtcSettingsModal.vue

@@ -13,17 +13,13 @@
           <j-menu-item :selected="currentTab === 'transcription'" @click="currentTab = 'transcription'">
             Transcription
           </j-menu-item>
-          <j-menu-item :selected="currentTab === 'connection'" @click="currentTab = 'connection'">
-            Connection
-          </j-menu-item>
           <!-- <j-menu-item :selected="currentTab === 'debug'" @click="currentTab = 'debug'"> Debug </j-menu-item> -->
         </j-menu-group-item>
       </div>
 
       <div class="contents">
         <VoiceVideo v-if="currentTab === 'voice-video'" />
         <Transcription v-if="currentTab === 'transcription'" />
-        <Connection v-if="currentTab === 'connection'" />
         <Debug v-if="currentTab === 'debug'" />
       </div>
     </div>
@@ -33,7 +29,6 @@
 <script setup lang="ts">
 import { useModalStore } from '@/stores';
 import { ref } from 'vue';
-import Connection from './Connection.vue';
 import Debug from './Debug.vue';
 import Transcription from './Transcription.vue';
 import VoiceVideo from './VoiceVideo.vue';

packages/constants/src/videoSettings.ts

@@ -1,4 +1,4 @@
-import { IceServer, Settings } from 'utils/helpers/WebRTCManager';
+import { Settings } from 'utils/helpers/WebRTCManager';
 
 const frameRate = {
   min: 5,
@@ -34,21 +34,3 @@ export const defaultSettings = {
   },
 } as Settings;
 
-export const defaultIceServers = [
-  {
-    urls: 'stun:relay.ad4m.dev:3478',
-    username: 'openrelay',
-    credential: 'openrelay',
-  },
-  {
-    urls: 'turn:relay.ad4m.dev:443',
-    username: 'openrelay',
-    credential: 'openrelay',
-  },
-  {
-    urls: 'stun:stun.l.google.com:19302',
-  },
-  {
-    urls: 'stun:global.stun.twilio.com:3478',
-  },
-] as IceServer[];

packages/react-web/src/useWebrtc.ts

@@ -1,8 +1,8 @@
-import { getDefaultIceServers, getForVersion, setForVersion, throttle } from '@coasys/flux-utils';
+import { getForVersion, setForVersion, throttle } from '@coasys/flux-utils';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { version } from '../package.json';
 
-import { Connection, Event, EventLogItem, IceServer, Settings, WebRTCManager } from '@coasys/flux-webrtc';
+import { Connection, Event, EventLogItem, Settings, WebRTCManager } from '@coasys/flux-webrtc';
 
 import { Agent, PerspectiveProxy } from '@coasys/ad4m';
 import { AgentClient } from '@coasys/ad4m/lib/src/agent/AgentClient';
@@ -45,7 +45,6 @@ export type WebRTC = {
   localState: Peer['state'];
   connections: Peer[];
   devices: MediaDeviceInfo[];
-  iceServers: IceServer[];
   reactions: Reaction[];
   localEventLog: EventLogItem[];
   isInitialised: boolean;
@@ -62,7 +61,6 @@ export type WebRTC = {
   onChangeAudio: (deviceId: string) => void;
   onToggleScreenShare: (enabled: boolean) => void;
   onChangeState: (newState: Peer['state']) => void;
-  onChangeIceServers: (servers: IceServer[]) => void;
   updateTranscriptionSetting: (setting: string, value: any) => void;
 };
 
@@ -78,7 +76,6 @@ export default function useWebRTC({ enabled, source, perspective, agent: agentCl
   const [agent, setAgent] = useState<Agent>();
   const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
   const devicesRef = useRef<MediaDeviceInfo[]>([]);
-  const [iceServers, setIceServers] = useState<IceServer[]>(getDefaultIceServers());
   const [localStream, setLocalStream] = useState<MediaStream | null>(null);
   const localStreamRef = useRef<MediaStream | null>(null);
   const [isInitialised, setIsInitialised] = useState(false);
@@ -944,11 +941,6 @@ export default function useWebRTC({ enabled, source, perspective, agent: agentCl
     throttledStateBroadcast(newState);
   }
 
-  function onChangeIceServers(newServers: IceServer[]) {
-    setIceServers(newServers);
-    setForVersion(version, 'iceServers', JSON.stringify(newServers));
-    manager.current.iceServers = newServers;
-  }
 
   async function onJoin({ initialState }) {
     setIsLoading(true);
@@ -995,7 +987,6 @@ export default function useWebRTC({ enabled, source, perspective, agent: agentCl
     localEventLog,
     connections,
     devices,
-    iceServers,
     reactions,
     isInitialised,
     hasJoined,
@@ -1011,7 +1002,6 @@ export default function useWebRTC({ enabled, source, perspective, agent: agentCl
     onChangeAudio,
     onToggleScreenShare,
     onChangeState,
-    onChangeIceServers,
     updateTranscriptionSetting,
   };
 }

packages/utils/src/index.ts

@@ -2,7 +2,6 @@ export * from './asyncFilter';
 export * from './createNeighbourhoodMeta';
 export * from './expressionHelpers';
 export * from './formatString';
-export * from './getDefaultIceServers';
 export * from './getImage';
 export * from './getNeighbourhoodMeta';
 export * from './languageHelpers';