openvidu-testapp: complete participant options. Add VideoResolution

openvidu-testapp/src/app/app.module.ts

@@ -44,6 +44,7 @@ import { UsersTableComponent } from './components/users-table/users-table.compon
 import { TableVideoComponent } from './components/users-table/table-video.component';
 import { CallbackPipe } from './pipes/callback.pipe';
 import { AppRoutingModule } from './app.routing';
+import { VideoResolutionComponent } from './components/dialogs/options-dialog/video-resolution/video-resolution.component';
 
 @NgModule({
   declarations: [
@@ -61,6 +62,7 @@ import { AppRoutingModule } from './app.routing';
     TableVideoComponent,
     CallbackPipe,
     OptionsDialogComponent,
+    VideoResolutionComponent,
   ],
   imports: [
     FormsModule,

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

@@ -1,6 +1,26 @@
 mat-form-field {
-  margin-top: 10px;
-  margin-right: 5px;
+  margin: 10px 5px 0 5px;
+  font-size: 14px;
+}
+
+mat-form-field:first-child {
+  margin-left: 0;
+}
+
+mat-radio-group {
+  font-size: 14px;
+}
+
+mat-checkbox {
+  font-size: 14px;
+}
+
+mat-select {
+  font-size: 14px;
+}
+
+mat-option {
+  font-size: 14px;
 }
 
 a {

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

@@ -23,6 +23,9 @@ export class OptionsDialogComponent {
   shareScreen = false;
   screenShareCaptureOptions?: ScreenShareCaptureOptions;
   trackPublishOptions?: TrackPublishOptions;
+  allowDisablingAudio = true;
+  allowDisablingVideo = true;
+  allowDisablingScreen = true;
 
   videoOption: true | false | 'custom';
   audioOption: true | false | 'custom';
@@ -32,6 +35,7 @@ export class OptionsDialogComponent {
   auxAudioCaptureOptions: AudioCaptureOptions;
 
   auxScreenDisplaySurface: 'NONE' | 'window' | 'browser' | 'monitor';
+  customScreenShareResolution: boolean = false;
 
   ENUMERATION_SOURCE = Object.keys(Track.Source);
 
@@ -44,39 +48,56 @@ export class OptionsDialogComponent {
       shareScreen: boolean;
       screenShareCaptureOptions?: ScreenShareCaptureOptions;
       trackPublishOptions?: TrackPublishOptions;
+      allowDisablingAudio?: boolean;
+      allowDisablingVideo?: boolean;
+      allowDisablingScreen?: boolean;
     }
   ) {
     this.roomOptions = data.roomOptions;
     this.createLocalTracksOptions = data.createLocalTracksOptions;
     this.shareScreen = data.shareScreen;
     this.screenShareCaptureOptions = data.screenShareCaptureOptions;
     this.trackPublishOptions = data.trackPublishOptions;
-    if (typeof this.createLocalTracksOptions?.video !== 'boolean') {
-      this.auxVideoCaptureOptions = this.createLocalTracksOptions!
-        .video as VideoCaptureOptions;
-      this.videoOption = 'custom';
-    } else {
-      this.videoOption = this.createLocalTracksOptions.video;
-      this.auxVideoCaptureOptions = new Room().options.videoCaptureDefaults!;
-    }
-    if (typeof this.createLocalTracksOptions?.audio !== 'boolean') {
-      this.auxAudioCaptureOptions = this.createLocalTracksOptions!
-        .audio as AudioCaptureOptions;
-      this.audioOption = 'custom';
-    } else {
-      this.audioOption = this.createLocalTracksOptions.audio;
-      this.auxAudioCaptureOptions = new Room().options.audioCaptureDefaults!;
+    if (this.createLocalTracksOptions !== undefined) {
+      if (typeof this.createLocalTracksOptions.video !== 'boolean') {
+        this.auxVideoCaptureOptions = this.createLocalTracksOptions!
+          .video as VideoCaptureOptions;
+        this.videoOption = 'custom';
+      } else {
+        this.videoOption = this.createLocalTracksOptions.video;
+        this.auxVideoCaptureOptions = new Room().options.videoCaptureDefaults!;
+      }
+      if (typeof this.createLocalTracksOptions?.audio !== 'boolean') {
+        this.auxAudioCaptureOptions = this.createLocalTracksOptions!
+          .audio as AudioCaptureOptions;
+        this.audioOption = 'custom';
+      } else {
+        this.audioOption = this.createLocalTracksOptions.audio;
+        this.auxAudioCaptureOptions = new Room().options.audioCaptureDefaults!;
+      }
     }
     if (this.shareScreen) {
       if (this.screenShareCaptureOptions == undefined) {
         this.screenOption = false;
       } else if (Object.keys(this.screenShareCaptureOptions).length > 0) {
         this.screenOption = 'custom';
+        if (this.screenShareCaptureOptions.resolution) {
+          this.customScreenShareResolution = true;
+        }
       } else {
         this.screenOption = true;
         this.screenShareCaptureOptions = {};
       }
     }
+    if (this.data.allowDisablingAudio === false) {
+      this.allowDisablingAudio = false;
+    }
+    if (this.data.allowDisablingVideo === false) {
+      this.allowDisablingVideo = false;
+    }
+    if (this.data.allowDisablingScreen === false) {
+      this.allowDisablingScreen = false;
+    }
   }
 
   returnValues() {
@@ -117,8 +138,21 @@ export class OptionsDialogComponent {
   screenOptionChanged(event: MatRadioChange) {
     if (event.value === 'custom' && !this.screenShareCaptureOptions) {
       this.screenShareCaptureOptions = {
-        video: true
+        video: true,
       };
     }
   }
+
+  handleCustomScreenResolutionChange() {
+    if (this.customScreenShareResolution) {
+      if (!this.screenShareCaptureOptions!.resolution) {
+        this.screenShareCaptureOptions!.resolution = {
+          width: 1920,
+          height: 1080,
+        };
+      }
+    } else {
+      delete this.screenShareCaptureOptions!.resolution;
+    }
+  }
 }

openvidu-testapp/src/app/components/dialogs/options-dialog/video-resolution/video-resolution.component.css

@@ -0,0 +1,17 @@
+.resolution-div {
+  border: 1px solid #e0e0e0;
+  padding: 5px 5px 5px 5px;
+  border-radius: 5px;
+  width: fit-content;
+  margin-top: 8px;
+}
+
+.resolution-title {
+  margin-top: 2px;
+}
+
+mat-form-field {
+  font-size: 124x;
+  width: 100px;
+  margin-right: 4px;
+}

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

@@ -0,0 +1,19 @@
+<div class="resolution-div">
+    <p *ngIf="showTitle" class="resolution-title">Resolution</p>
+    <mat-form-field class="inner-text-input">
+        <mat-label>width</mat-label>
+        <input matInput [id]="componentId+'-width'" type="number" placeholder="width" [(ngModel)]="width" (ngModelChange)="emitChanges()"/>
+    </mat-form-field>
+    <mat-form-field class="inner-text-input">
+        <mat-label>height</mat-label>
+        <input matInput [id]="componentId+'-height'" type="number" placeholder="height" [(ngModel)]="height" (ngModelChange)="emitChanges()"/>
+    </mat-form-field>
+    <mat-form-field class="inner-text-input">
+        <mat-label>frameRate</mat-label>
+        <input matInput [id]="componentId+'-frameRate'" type="number" placeholder="frameRate" [(ngModel)]="frameRate" (ngModelChange)="emitChanges()"/>
+    </mat-form-field>
+    <mat-form-field class="inner-text-input">
+        <mat-label>aspectRatio</mat-label>
+        <input matInput [id]="componentId+'-aspectRatio'" type="number" placeholder="aspectRatio" [(ngModel)]="aspectRatio" (ngModelChange)="emitChanges()"/>
+    </mat-form-field>
+</div>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoResolutionComponent } from './video-resolution.component';
+
+describe('VideoResolutionComponent', () => {
+  let component: VideoResolutionComponent;
+  let fixture: ComponentFixture<VideoResolutionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [VideoResolutionComponent]
+    });
+    fixture = TestBed.createComponent(VideoResolutionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-video-resolution',
+  templateUrl: './video-resolution.component.html',
+  styleUrls: ['./video-resolution.component.css'],
+})
+export class VideoResolutionComponent {
+  @Input() componentId: string;
+  @Input() showTitle = true;
+  @Input() width: number;
+  @Input() height: number;
+  @Input() frameRate?: number;
+  @Input() aspectRatio?: number;
+  @Output() resolutionChanged: EventEmitter<{
+    width: number;
+    height: number;
+    frameRate?: number;
+    aspectRatio?: number;
+  }> = new EventEmitter();
+
+  emitChanges() {
+    this.resolutionChanged.emit({
+      width: this.width,
+      height: this.height,
+      frameRate: this.frameRate,
+      aspectRatio: this.aspectRatio,
+    });
+  }
+}

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

@@ -83,10 +83,10 @@
                     </div>
                 </div>
                 <div>
-                    <app-participant class="local-participant" [participant]="room.localParticipant"
+                    <app-participant class="local-participant" [participant]="room.localParticipant" [room]="room"
                         [index]="index"></app-participant>
                     <app-participant class="remote-participant" *ngFor="let participant of room.remoteParticipants | keyvalue"
-                        [participant]="participant.value" [index]="index" (sendDataToOneParticipant)="sendData($event)"></app-participant>
+                        [participant]="participant.value" [room]="room" [index]="index" (sendDataToOneParticipant)="sendData($event)"></app-participant>
                 </div>
             </mat-card-content>
 

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

@@ -166,10 +166,17 @@ export class OpenviduInstanceComponent {
     );
 
     if (this.roomConf.publisher) {
-      const tracks: LocalTrack[] =
-        await this.room.localParticipant.createTracks(
-          this.createLocalTracksOptions
+      const tracks: LocalTrack[] = [];
+      if (
+        this.createLocalTracksOptions.audio ||
+        this.createLocalTracksOptions.video
+      ) {
+        tracks.push(
+          ...(await this.room.localParticipant.createTracks(
+            this.createLocalTracksOptions
+          ))
         );
+      }
       if (this.screenShareCaptureOptions) {
         const screenTracks: LocalTrack[] =
           await this.room.localParticipant.createScreenTracks(
@@ -1026,6 +1033,23 @@ export class OpenviduInstanceComponent {
         this.createLocalTracksOptions = result.createLocalTracksOptions;
         this.screenShareCaptureOptions = result.screenShareCaptureOptions;
         this.trackPublishOptions = result.trackPublishOptions;
+        if (
+          this.createLocalTracksOptions.audio != undefined &&
+          typeof this.createLocalTracksOptions.audio !== 'boolean'
+        ) {
+          this.roomOptions.audioCaptureDefaults =
+            this.createLocalTracksOptions.audio;
+        }
+        if (
+          this.createLocalTracksOptions.video != undefined &&
+          typeof this.createLocalTracksOptions.video !== 'boolean'
+        ) {
+          this.roomOptions.videoCaptureDefaults =
+            this.createLocalTracksOptions.video;
+        }
+        if (this.trackPublishOptions != undefined) {
+          this.roomOptions.publishDefaults = this.trackPublishOptions;
+        }
       }
     });
   }

openvidu-testapp/src/app/components/participant/participant.component.html

@@ -9,23 +9,27 @@
             </button>
             <button *ngIf="participant.isLocal" class="options-audio-btn" (click)="openAudioTrackOptionsDialog()"
                 title="Video track options" matTooltip="Audio track options" matTooltipClass="custom-tooltip">
-                <mat-icon aria-label="New video track">more_vert</mat-icon>
+                <mat-icon aria-label="Audio options">more_vert</mat-icon>
             </button>
             <button *ngIf="participant.isLocal" class="add-video-btn" (click)="addVideoTrack()" title="New video track"
                 matTooltip="New video track" matTooltipClass="custom-tooltip">
                 <mat-icon aria-label="New video track">videocam</mat-icon>
             </button>
             <button *ngIf="participant.isLocal" class="options-video-btn" (click)="openVideoTrackOptionsDialog()"
                 title="Video track options" matTooltip="Video track options" matTooltipClass="custom-tooltip">
-                <mat-icon aria-label="New video track">more_vert</mat-icon>
+                <mat-icon aria-label="Video options">more_vert</mat-icon>
             </button>
             <button *ngIf="participant.isLocal" class="add-screen-btn" (click)="addScreenTrack()"
                 title="New screen track" matTooltip="New screen track" matTooltipClass="custom-tooltip">
                 <mat-icon aria-label="New screen track">present_to_all</mat-icon>
             </button>
             <button *ngIf="participant.isLocal" class="options-screen-btn" (click)="openScreenTrackOptionsDialog()"
                 title="Screen track options" matTooltip="Screen track options" matTooltipClass="custom-tooltip">
-                <mat-icon aria-label="New video track">more_vert</mat-icon>
+                <mat-icon aria-label="Screen options">more_vert</mat-icon>
+            </button>
+            <button *ngIf="participant.isLocal" class="options-track-publish-btn" (click)="openTrackPublishOptionsDialog()"
+                title="Track publish options" matTooltip="Track publish options" matTooltipClass="custom-tooltip">
+                <mat-icon aria-label="Track publish options">settings</mat-icon>
             </button>
             <button *ngIf="!participant.isLocal" class="message-btn" (click)="sendData()" title="Send message to this participant">
                 <mat-icon aria-label="Send message button">chat</mat-icon>