Bug/ice sdk of 36

README.md

@@ -231,6 +231,10 @@ To define the **Host** with the server instance's IP, click the _Host_ field f t
 | :-----
 | _Demonstrates the failover mechanism of the Red5 Pro HTML SDK to select a subscriber based on browser support and to auto-reconnect on close of broadcast or loss of connection._
 
+| **[Renegotiation Policy](src/page/test/subscribeRenegotiationPolicy/)**
+| :-----
+| _Demonstrates ICE renegotiation stategies of the SDK during poor network conditions._
+
 | **[Remote Call](src/page/test/subscribeRemoteCall)**
 | :-----
 | _Demonstrates receiving a remote message from broadcaster._
@@ -281,6 +285,11 @@ To define the **Host** with the server instance's IP, click the _Host_ field f t
 | :-----
 | _Demonstrates the failover mechanism of the Red5 Pro HTML SDK to select a subscriber based on browser support and to auto-reconnect on close of broadcast or loss of connection._
 
+| **[Stream Manager Proxy Renegotiation Policy](src/page/sm-test/subscribeStreamManagerProxyRenegotiationPolicy/)**
+| :-----
+| _Demonstrates ICE renegotiation stategies of the SDK during poor network conditions._
+
+
 | **[Stream Manager Proxy Round Trip Authentication](src/page/sm-test/subscribeStreamManagerProxyRoundTripAuth)**
 | :-----
 | _Demonstrates subscribing using round trip authentication, region specified._

package.json

@@ -1,6 +1,6 @@
 {
   "name": "red5pro-html-sdk-testbed",
-  "version": "15.1.0",
+  "version": "15.2.0",
   "description": "Testbed examples for Red5 Pro HTML SDK",
   "main": "src/js/index.js",
   "repository": {

src/page/index.html

@@ -472,8 +472,10 @@ <h2 class="centered">Statistics Reporting</h2>
       });
 
       enableStatisticsField.addEventListener('change', function () {
+        let value = statisticsEndpointField.value;
+        value = value && value.length > 0 ? value : undefined;
         configuration.stats = enableStatisticsField.checked ? {
-          endpoint: statisticsEndpointField.value,
+          endpoint: value === 'null' ? null : value,
           interval: parseInt(statisticsIntervalField.value, 10) * 1000,
           include: [],
         } : undefined
@@ -491,7 +493,7 @@ <h2 class="centered">Statistics Reporting</h2>
         if (configuration.stats) {
           let value = statisticsEndpointField.value;
           value = value && value.length > 0 ? value : undefined;
-          configuration.stats.endpoint = value;
+          configuration.stats.endpoint = value === 'null' ? null : value;
         }
         seal(configuration);
       });
@@ -531,7 +533,7 @@ <h2 class="centered">Statistics Reporting</h2>
         authUsernameField.value = config.authentication.username;
         authPasswordField.value = config.authentication.password;
         authTokenField.value = config.authentication.token;
-        authUsernameField.disabled = authPasswordField.disabled = !authEnabledField.checked;
+        authUsernameField.disabled = authPasswordField.disabled = authTokenField.disabled = !authEnabledField.checked;
         enableStatisticsField.checked = config.stats ? true : false;
         statisticsIntervalField.value = config.stats ? Math.floor(parseInt(config.stats.interval, 10) / 1000) : 5;
         statisticsEndpointField.value = config.stats ? config.stats.endpoint : '';

src/page/sm-test/subscribeStreamManagerProxyRenegotiationPolicy/README.md

@@ -0,0 +1,92 @@
+# Subscribe Renegotiation Policy
+
+This example demonstrates how to configure and test renegotiation policies for WebRTC subscribers using the Red5  HTML SDK. Renegotiation policies control how the subscriber handles network degradation and connection issues during the ICE negotiation phase of a WebRTC session.
+
+**Please refer to the [Basic Subscriber Documentation](../subscribe/README.md) to learn more about the basic setup.**
+
+## Example Code
+
+- **[index.html](index.html)**
+- **[index.js](index.js)**
+
+## Feature Overview
+
+The `renegotiationPolicy` feature of the Red5 HTML SDK allows you to configure how the WebRTC subscriber responds to network issues and connection degradation during the ICE negotiation phase. This is particularly useful for maintaining stream quality and connection stability in varying network conditions.
+
+### Available Policy Types
+
+1. **timeout** - Attempts to renegotiate the connection after a specified timeout interval when network conditions degrade. This policy allows you to set a custom timeout interval (in milliseconds).
+
+2. **disconnect** - Immediately disconnects the subscriber when network issues are detected, rather than attempting to renegotiate.
+
+3. **regression** - Uses a regression-based approach to handle network degradation, attempting to adapt the connection quality based on detected network conditions.
+
+> The `regression` policy is the most aggressive as it can be detected very early on in the negotiation phase, _however_ it does not always occur. It is recommended to go with the `timeout` policy.
+
+## Implementation
+
+The renegotiation policy is configured when initializing the WHEP subscriber:
+
+```js
+let rtcConfig = {
+  ...configuration,
+  streamName,
+  subscriptionId: 'subscriber-' + instanceId,
+  renegotiationPolicy: {
+    type: typeSelect.value,  // 'timeout' | 'disconnect' | 'regression'
+    timeoutInterval: parseInt(timeoutIntervalSelect.value, 10)  // Only used for TIMEOUT policy
+  }
+}
+
+targetSubscriber = new WHEPClient()
+await targetSubscriber.init(rtcConfig)
+await targetSubscriber.subscribe()
+```
+
+### Event Tracking
+
+The example tracks reconnection attempts through the `Reconnect.Start` event:
+
+```js
+if (event.type === 'Reconnect.Start') {
+  reconnectionAttempts++
+  reconnectionAttemptsField.innerText = reconnectionAttempts
+}
+```
+
+## How to Use
+
+1. **Open Chrome DevTools** - Press `F12` or right-click and select "Inspect"
+
+2. **Navigate to the Network Tab** - Click on the "Network" tab in DevTools
+
+3. **Enable Network Throttling**:
+   - Click the gear icon (⚙️) in the Network tab
+   - Select "Throttling" from the dropdown
+   - Choose "Slow 3G" or another throttling profile to simulate poor network conditions
+
+4. **Configure the Renegotiation Policy**:
+   - Select a **Policy Type** from the dropdown:
+     - `TIMEOUT` - Enables timeout interval selection
+     - `DISCONNECT` - Immediately disconnects on network issues
+     - `REGRESSION` - Uses regression-based adaptation
+   - If using `TIMEOUT`, select a **Timeout Interval** (1000-5000 milliseconds)
+
+5. **Start the Subscription**:
+   - Click the "Subscribe" button
+   - The subscriber will attempt to connect to the stream
+
+6. **Observe Behavior**:
+   - Watch the reconnection attempts counter increment as network issues are detected
+   - Monitor the subscriber status and statistics fields
+   - Observe how the selected policy handles the degraded network conditions
+
+7. **Test Recovery**:
+   - Reset the network throttling to "No throttling" or "Online"
+   - Observe how the subscriber recovers and maintains the connection
+
+## Notes
+
+- The timeout interval is only applicable when using the `TIMEOUT` policy type
+- The example uses the WHEP (WebRTC HTTP Egress Protocol) client for WebRTC-based subscriptions
+- Network throttling must be enabled in Chrome DevTools to properly test the renegotiation behavior

src/page/sm-test/subscribeStreamManagerProxyRenegotiationPolicy/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+{{> license}}
+<html>
+  <head>
+    {{> meta title='Subscriber Stream Manager Proxy Renegotiation Policy Test'}}
+    {{> header-scripts}}
+    {{> header-stylesheets}}
+    <style>
+      .info-block {
+        padding: 10px 20px;
+      }
+      ol {
+        text-align: left;
+        font-size: 0.75em;
+        padding: 20px 0 0 0;
+        width: fit-content;
+        margin: auto;
+        list-style: decimal;
+      }
+    </style>
+  </head>
+  <body>
+    {{> top-bar }}
+    <div id="app">
+      {{> settings-link}}
+      {{> test-info testTitle='Subscriber Renegotiation Policy Test'}}
+      <div class="stream-section">
+        <div class="instructions-block">
+          <div class="info-block">
+            <p>Use network throttling to simulate a slow network connection.</p>
+            <ol>
+              <li>Open the Chrome DevTools</li>
+              <li>Navigate to the Network tab</li>
+              <li>Click the gear icon and select "Throttling"</li>
+              <li>Select "Slow 3G" from the dropdown</li>
+              <li>Select the Policy Type and Timeout Interval</li>
+              <li>Click the "Subscribe" button</li>
+              <li>Observe the renegotiation attempts and the status of the subscription</li>
+              <li>Reset the network throttling to unlimited after a few reconnection attempts</li>
+            </ol>
+          </div>
+          <hr />
+          <p class="settings-field settings-collapsable">
+            <label for="type-select" class="label-style settings-label">Select a Renegotiation Policy Type:</label>
+            <select id="type-select" class="control">
+              <option value="TIMEOUT" selected>Timeout</option>
+              <option value="DISCONNECT">Disconnect</option>
+              <option value="REGRESSION">Regression</option>
+            </select>
+          </p>
+          <p class="settings-field settings-collapsable">
+            <label for="timeout-interval-select" class="label-style settings-label">Select a Timeout Interval (milliseconds):</label>
+            <select id="timeout-interval-select" class="control" disabled>
+              <option value="1000">1000</option>
+              <option value="2000">2000</option>
+              <option value="3000" selected>3000</option>
+              <option value="4000">4000</option>
+              <option value="5000">5000</option>
+            </select>
+          </p>
+          <p>
+            <button id="subscribe-button" class="control ui-button">Subscribe</button>
+          </p>
+          <hr/>
+          <p>
+            <span>Reconnection Attempts:</span>&nbsp;<span id="reconnection-attempts">0</span>
+          </p>
+        </div>
+        {{> status-field-subscriber}}
+        {{> statistics-field packets_field='Packets Received'}}
+        <div class="centered">
+          <video id="red5pro-subscriber"
+                  controls="controls" autoplay="autoplay" playsinline
+                  class="red5pro-subscriber red5pro-media red5pro-media-background"
+                  width="640" height="480">
+          </video>
+        </div>
+      </div>
+    </div>
+    {{> footer}}
+    {{> body-scripts}}
+    {{> mobile-subscriber-util}}
+    <script src="index.js"></script>
+  </body>
+</html>