broadcast: add support for custom ICE servers (#593)

* feat: use google stun server

* feat: support custom stun/turn servers

* feat: add props to the Broadcast component

* feat: update initialProps for broadcast

* feat: support custom stun/turn servers for controller

* feat: simplify interface

Author: junhyr

packages/core-web/src/broadcast.ts

@@ -142,12 +142,21 @@ export type InitialBroadcastProps = {
   video: boolean | Omit<MediaTrackConstraints, "deviceId">;
 
   /**
+   * @deprecated in favor of `iceServers`
+   *
    * Whether to disable ICE gathering.
    *
    * Set to true to disable ICE gathering. This is useful for testing purposes.
    */
   noIceGathering?: boolean;
 
+  /**
+   * The ICE servers to use.
+   *
+   * If not provided, the default ICE servers will be used.
+   */
+  iceServers?: RTCIceServer | RTCIceServer[];
+
   /**
    * Whether the video stream should be mirrored (horizontally flipped).
    *
@@ -335,6 +344,7 @@ export const createBroadcastStore = ({
             ingestUrl: ingestUrl ?? null,
             video: initialProps?.video ?? true,
             noIceGathering: initialProps?.noIceGathering ?? false,
+            iceServers: initialProps?.iceServers,
             mirrored: initialProps?.mirrored ?? false,
           },
 
@@ -475,7 +485,7 @@ export const createBroadcastStore = ({
                   requestedVideoInputDeviceId:
                     deviceIds?.videoinput === "screen"
                       ? "default"
-                      : (deviceIds?.videoinput ?? "default"),
+                      : deviceIds?.videoinput ?? "default",
                 },
               })),
 
@@ -488,10 +498,10 @@ export const createBroadcastStore = ({
                         requestedVideoInputDeviceId: deviceId,
                       }
                     : type === "audioinput"
-                      ? {
-                          requestedAudioInputDeviceId: deviceId,
-                        }
-                      : {}),
+                    ? {
+                        requestedAudioInputDeviceId: deviceId,
+                      }
+                    : {}),
                 },
               })),
 
@@ -760,8 +770,9 @@ const addEffectsToStore = (
         __controls.requestedForceRenegotiateLastTime,
       mounted,
       noIceGathering: __initialProps.noIceGathering,
+      iceServers: __initialProps.iceServers,
     }),
-    async ({ enabled, ingestUrl, noIceGathering }) => {
+    async ({ enabled, ingestUrl, noIceGathering, iceServers }) => {
       await cleanupWhip?.();
 
       if (!enabled) {
@@ -803,6 +814,7 @@ const addEffectsToStore = (
         },
         sdpTimeout: null,
         noIceGathering,
+        iceServers,
       });
 
       cleanupWhip = () => {
@@ -891,10 +903,10 @@ const addEffectsToStore = (
                       },
                     }
                   : audio
-                    ? {
-                        ...(audioConstraints ? audioConstraints : {}),
-                      }
-                    : false,
+                  ? {
+                      ...(audioConstraints ? audioConstraints : {}),
+                    }
+                  : false,
               video:
                 video &&
                 requestedVideoDeviceId &&
@@ -907,11 +919,11 @@ const addEffectsToStore = (
                       ...(mirrored ? { facingMode: "user" } : {}),
                     }
                   : video
-                    ? {
-                        ...(videoConstraints ? videoConstraints : {}),
-                        ...(mirrored ? { facingMode: "user" } : {}),
-                      }
-                    : false,
+                  ? {
+                      ...(videoConstraints ? videoConstraints : {}),
+                      ...(mirrored ? { facingMode: "user" } : {}),
+                    }
+                  : false,
             }));
 
         if (stream) {
@@ -1133,8 +1145,8 @@ const addEffectsToStore = (
                 device.kind === "audioinput"
                   ? "Audio Source"
                   : device.kind === "audiooutput"
-                    ? "Audio Output"
-                    : "Video Source"
+                  ? "Audio Output"
+                  : "Video Source"
               } ${i + 1} (${
                 device.deviceId === "default"
                   ? "default"

packages/core-web/src/media/controls/controller.ts

@@ -470,6 +470,7 @@ const addEffectsToStore = (
             accessKey: store.getState().__initialProps.accessKey,
           },
           sdpTimeout: timeout,
+          iceServers: store.getState().__initialProps.iceServers,
         });
 
         const id = setTimeout(() => {

packages/core-web/src/webrtc/shared.ts

@@ -20,32 +20,41 @@ export const getRTCPeerConnectionConstructor = () => {
   );
 };
 
+/**
+ * Creates a new RTCPeerConnection instance with the given STUN and TURN servers.
+ */
 export function createPeerConnection(
   host: string | null,
+  iceServers?: RTCIceServer | RTCIceServer[],
 ): RTCPeerConnection | null {
   const RTCPeerConnectionConstructor = getRTCPeerConnectionConstructor();
 
-  if (RTCPeerConnectionConstructor) {
-    // strip non-standard port number if present
-    const hostNoPort = host?.split(":")[0];
-
-    const iceServers = host
-      ? [
-          {
-            urls: `stun:${hostNoPort}`,
-          },
-          {
-            urls: `turn:${hostNoPort}`,
-            username: "livepeer",
-            credential: "livepeer",
-          },
-        ]
-      : [];
-
-    return new RTCPeerConnectionConstructor({ iceServers });
+  if (!RTCPeerConnectionConstructor) {
+    throw new Error("No RTCPeerConnection constructor found in this browser.");
   }
 
-  throw new Error("No RTCPeerConnection constructor found in this browser.");
+  // Defaults to Mist behavior
+  const hostNoPort = host?.split(":")[0];
+  const defaultIceServers = host
+    ? [
+        {
+          urls: `stun:${hostNoPort}`,
+        },
+        {
+          urls: `turn:${hostNoPort}`,
+          username: "livepeer",
+          credential: "livepeer",
+        },
+      ]
+    : [];
+
+  return new RTCPeerConnectionConstructor({
+    iceServers: iceServers
+      ? Array.isArray(iceServers)
+        ? iceServers
+        : [iceServers]
+      : defaultIceServers,
+  });
 }
 
 const DEFAULT_TIMEOUT = 10000;

packages/core-web/src/webrtc/whep.ts

@@ -21,6 +21,7 @@ export const createNewWHEP = <TElement extends HTMLMediaElement>({
   callbacks,
   accessControl,
   sdpTimeout,
+  iceServers,
 }: {
   source: string;
   element: TElement;
@@ -32,6 +33,7 @@ export const createNewWHEP = <TElement extends HTMLMediaElement>({
   };
   accessControl: AccessControlParams;
   sdpTimeout: number | null;
+  iceServers?: RTCIceServer | RTCIceServer[];
 }): {
   destroy: () => void;
 } => {
@@ -76,7 +78,7 @@ export const createNewWHEP = <TElement extends HTMLMediaElement>({
        * allowing the client to discover its own IP address.
        * https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols#ice
        */
-      peerConnection = createPeerConnection(redirectUrl.host);
+      peerConnection = createPeerConnection(redirectUrl.host, iceServers);
 
       if (peerConnection) {
         /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addTransceiver */

packages/core-web/src/webrtc/whip.ts

@@ -28,6 +28,7 @@ export const createNewWHIP = <TElement extends HTMLMediaElement>({
   callbacks,
   sdpTimeout,
   noIceGathering,
+  iceServers,
 }: {
   ingestUrl: string;
   element: TElement;
@@ -38,6 +39,7 @@ export const createNewWHIP = <TElement extends HTMLMediaElement>({
   };
   sdpTimeout: number | null;
   noIceGathering?: boolean;
+  iceServers?: RTCIceServer | RTCIceServer[];
 }): {
   destroy: () => void;
 } => {
@@ -70,7 +72,7 @@ export const createNewWHIP = <TElement extends HTMLMediaElement>({
        * allowing the client to discover its own IP address.
        * https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols#ice
        */
-      peerConnection = createPeerConnection(redirectUrl.host);
+      peerConnection = createPeerConnection(redirectUrl.host, iceServers);
 
       if (peerConnection) {
         peerConnection.addEventListener("negotiationneeded", async (_ev) => {

packages/core/src/media/controller.ts

@@ -156,6 +156,13 @@ export type InitialProps = {
   viewerId: string | null;
 
   ingestPlayback: boolean;
+
+  /**
+   * The ICE servers to use.
+   *
+   * If not provided, the default ICE servers will be used.
+   */
+  iceServers?: RTCIceServer | RTCIceServer[];
 };
 
 export type DeviceInformation = {
@@ -662,6 +669,7 @@ export const createControllerStore = ({
             viewerId: initialProps.viewerId ?? null,
             volume: initialVolume ?? null,
             ingestPlayback: initialProps.ingestPlayback ?? false,
+            iceServers: initialProps.iceServers,
           },
 
           __device: device,

packages/react/src/broadcast/Broadcast.tsx

@@ -56,7 +56,21 @@ interface BroadcastProps
    */
   metricsInterval?: number;
 
+  /**
+   * @deprecated in favor of `iceServers`
+   *
+   * Whether to disable ICE gathering.
+   *
+   * Set to true to disable ICE gathering. This is useful for testing purposes.
+   */
   noIceGathering?: boolean;
+
+  /**
+   * The ICE servers to use.
+   *
+   * If not provided, the default ICE servers will be used.
+   */
+  iceServers?: RTCIceServer | RTCIceServer[];
 }
 
 const Broadcast = (

packages/react/src/player/Player.tsx

@@ -53,6 +53,13 @@ interface PlayerProps
    * The interval at which metrics are sent, in ms. Defaults to 5000.
    */
   metricsInterval?: number;
+
+  /**
+   * The ICE servers to use.
+   *
+   * If not provided, the default ICE servers will be used.
+   */
+  iceServers?: RTCIceServer | RTCIceServer[];
 }
 
 const Player = React.memo((props: MediaScopedProps<PlayerProps>) => {