feat: add configurable ice server urls

README.md

@@ -34,6 +34,12 @@ This application requires three services to be running and configured correctly.
 | [Retro Backend](https://hub.docker.com/r/retroapp/retro-backend)   | 3001         |
 | [Signaling Server](https://hub.docker.com/r/peerjs/peerjs-server)  | 9000         |
 
+### WebRTC
+
+By default, the clients identify the IP address of the other peers by using a public STUN server by Google. A TURN
+server is not provided by default and must be hosted additionally. The frontend can be configured to overwrite the ice
+server urls.
+
 ### Environment variables example
 
 #### Frontend
@@ -45,6 +51,7 @@ This application requires three services to be running and configured correctly.
 - SIGNALING_SERVER_PROTOCOL = "https"
 - SIGNALING_SERVER_HOST = "my-signaling-domain.com"
 - SIGNALING_SERVER_PORT = 443
+- ICE_SERVER_URLS = "stun:stun.l.google.com:19302"
 
 #### Backend
 

packages/frontend/src/common/hooks/usePeer.ts

@@ -6,13 +6,19 @@ import { isClientSide } from "../utils/isClientSide";
 import { useConfigurationContext } from "../context/ConfigurationContext";
 
 export function usePeer() {
-  const { signalingServerUrl } = useConfigurationContext();
+  const { signalingServerUrl, iceServerUrls } = useConfigurationContext();
   const [peer, setPeer] = useState<Peer | undefined>(undefined);
   const { user } = useUserContext();
 
+  const iceServers = iceServerUrls.map((url) => {
+    return { urls: url };
+  });
   const peerOptions = {
     host: signalingServerUrl.host,
     port: signalingServerUrl.port,
+    config: {
+      iceServers,
+    },
   };
 
   useEffect(() => {

packages/shared/configuration/src/configuration.ts

@@ -24,9 +24,14 @@ function getConfiguration(): ApplicationConfiguration {
       maxVoteCount: Number(process.env.RETRO_MAX_VOTE_COUNT) ?? 3,
     },
     corsOrigins: parseCorsOrigins(process.env.CORS_ORIGIN) ?? "*",
+    iceServerUrls: parseStringList(process.env.ICE_SERVER_URLS) ?? ["stun:stun.l.google.com:19302"],
   };
 }
 
+function parseStringList(urls?: string) {
+  return urls?.split(",").map((origin) => origin.trim());
+}
+
 function parseCorsOrigins(list?: string): CorsOrigins | undefined {
   if (!list) return undefined;
 

packages/shared/configuration/src/types.ts

@@ -10,6 +10,7 @@ export interface ApplicationConfiguration {
   retro: RetroConfiguration;
   signalingServerUrl: RetroAppUrl;
   corsOrigins: CorsOrigins;
+  iceServerUrls: string[];
 }
 
 export interface RetroConfiguration {