openvidu-testapp: add checkbox to force relay from browser

openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.html

@@ -3,12 +3,13 @@
   <mat-dialog-content>
     <mat-divider *ngIf="roomOptions"></mat-divider>
     <div *ngIf="roomOptions">
-      <label><a href="https://docs.livekit.io/client-sdk-js/interfaces/RoomOptions.html" target="_blank">RoomOptions</a></label><br>
+      <label><a href="https://docs.livekit.io/client-sdk-js/interfaces/RoomOptions.html" target="_blank">RoomOptions</a></label> / <label><a href="https://docs.livekit.io/client-sdk-js/interfaces/RoomConnectOptions.html" target="_blank">RoomConnectOptions</a></label><br>
       <mat-checkbox id="room-adaptiveStream" [(ngModel)]="roomOptions.adaptiveStream">adaptiveStream</mat-checkbox>
       <mat-checkbox id="room-dynacast" [(ngModel)]="roomOptions.dynacast">dynacast</mat-checkbox>
       <mat-checkbox id="room-disconnectOnPageLeave" [(ngModel)]="roomOptions.disconnectOnPageLeave">disconnectOnPageLeave</mat-checkbox>
       <mat-checkbox id="room-stopLocalTrackOnUnpublish" [(ngModel)]="roomOptions.stopLocalTrackOnUnpublish">stopLocalTrackOnUnpublish</mat-checkbox>
       <mat-checkbox id="room-webAudioMix" [(ngModel)]="roomOptions.webAudioMix">webAudioMix</mat-checkbox>
+      <mat-checkbox id="room-forceRelay" [(ngModel)]="forceRelay">Force relay candidates</mat-checkbox>
     </div>
     <mat-divider *ngIf="createLocalTracksOptions"></mat-divider>
     <div *ngIf="createLocalTracksOptions">

openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.ts

@@ -20,6 +20,7 @@ import {
 })
 export class OptionsDialogComponent {
   roomOptions?: RoomOptions;
+  forceRelay = false;
   createLocalTracksOptions?: CreateLocalTracksOptions;
   shareScreen = false;
   screenShareCaptureOptions?: ScreenShareCaptureOptions;
@@ -47,6 +48,7 @@ export class OptionsDialogComponent {
     @Inject(MAT_DIALOG_DATA)
     public data: {
       roomOptions?: RoomOptions;
+      forceRelay: boolean;
       createLocalTracksOptions?: CreateLocalTracksOptions;
       shareScreen: boolean;
       screenShareCaptureOptions?: ScreenShareCaptureOptions;
@@ -57,6 +59,7 @@ export class OptionsDialogComponent {
     }
   ) {
     this.roomOptions = data.roomOptions;
+    this.forceRelay = data.forceRelay;
     this.createLocalTracksOptions = data.createLocalTracksOptions;
     this.shareScreen = data.shareScreen;
     this.screenShareCaptureOptions = data.screenShareCaptureOptions;
@@ -135,6 +138,7 @@ export class OptionsDialogComponent {
     }
     this.dialogRef.close({
       roomOptions: this.roomOptions,
+      forceRelay: this.forceRelay,
       createLocalTracksOptions: this.createLocalTracksOptions,
       screenShareCaptureOptions: this.screenShareCaptureOptions,
       trackPublishOptions: this.trackPublishOptions,

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -80,6 +80,9 @@ export class OpenviduInstanceComponent {
   };
   roomConnectOptions: RoomConnectOptions = {
     autoSubscribe: false,
+    rtcConfig: {
+      iceTransportPolicy: 'all',
+    },
   };
   createLocalTracksOptions: CreateLocalTracksOptions = {
     audio: true,
@@ -1083,6 +1086,7 @@ export class OpenviduInstanceComponent {
     const dialogRef = this.dialog.open(OptionsDialogComponent, {
       data: {
         roomOptions: this.roomOptions,
+        forceRelay: this.roomConnectOptions.rtcConfig!.iceTransportPolicy === 'relay',
         createLocalTracksOptions: this.createLocalTracksOptions,
         shareScreen: true,
         screenShareCaptureOptions: this.screenShareCaptureOptions,
@@ -1092,6 +1096,8 @@ export class OpenviduInstanceComponent {
     dialogRef.afterClosed().subscribe((result) => {
       if (!!result) {
         this.roomOptions = result.roomOptions;
+        this.roomConnectOptions.rtcConfig!.iceTransportPolicy =
+          result.forceRelay ? 'relay' : 'all';
         this.createLocalTracksOptions = result.createLocalTracksOptions;
         this.screenShareCaptureOptions = result.screenShareCaptureOptions;
         this.trackPublishOptions = result.trackPublishOptions;

openvidu-testapp/src/app/components/test-scenarios/test-scenarios.component.ts

@@ -39,10 +39,10 @@ export interface User {
 }
 
 @Component({
-    selector: 'app-test-scenarios',
+  selector: 'app-test-scenarios',
-    templateUrl: './test-scenarios.component.html',
+  templateUrl: './test-scenarios.component.html',
-    styleUrls: ['./test-scenarios.component.css'],
+  styleUrls: ['./test-scenarios.component.css'],
-    standalone: false
+  standalone: false,
 })
 export class TestScenariosComponent implements OnInit, OnDestroy {
   fixedRoomId = 'SCENARIO_TEST';
@@ -286,6 +286,8 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(OptionsDialogComponent, {
       data: {
         roomOptions: this.roomOptions,
+        forceRelay:
+          this.roomConnectOptions.rtcConfig?.iceTransportPolicy === 'relay',
         createLocalTracksOptions: this.createLocalTracksOptions,
         shareScreen: false,
         trackPublishOptions: this.trackPublishOptions,
@@ -297,6 +299,9 @@ export class TestScenariosComponent implements OnInit, OnDestroy {
         return;
       }
       this.roomOptions = result.roomOptions;
+      this.roomConnectOptions.rtcConfig = {
+        iceTransportPolicy: result.forceRelay ? 'relay' : 'all',
+      };
       this.createLocalTracksOptions = result.createLocalTracksOptions;
       this.trackPublishOptions = result.trackPublishOptions;
     });