openvidu-testapp: make deviceId a proper selector in VideoCaptureOptions

OpenVidu · Oct 28, 2024 · 1d91d6f · 1d91d6f
1 parent ed2fa45
commit 1d91d6f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.html b/openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.html
@@ -20,9 +20,11 @@ <h2 mat-dialog-title>OPTIONS</h2>
           <mat-radio-button [value]="'custom'" id="video-capture-custom">Custom</mat-radio-button>
         </mat-radio-group>
         <div *ngIf="videoOption === 'custom'">
-          <mat-form-field class="inner-text-input">
+          <mat-form-field id="video-deviceId">
             <mat-label>deviceId</mat-label>
-            <input matInput id="video-deviceId" placeholder="deviceId" [(ngModel)]="auxVideoCaptureOptions.deviceId"/>
+            <mat-select [(value)]="auxVideoCaptureOptions.deviceId">
+              <mat-option *ngFor="let device of inputVideoDevices" [value]="{ exact: device.deviceId }">{{'[' + device.label + '] ' + device.deviceId}}</mat-option>
+            </mat-select>
           </mat-form-field>
           <mat-form-field id="video-facingMode">
             <mat-label>facingMode</mat-label>

diff --git a/openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.ts b/openvidu-testapp/src/app/components/dialogs/options-dialog/options-dialog.component.ts
@@ -39,6 +39,8 @@ export class OptionsDialogComponent {
 
   ENUMERATION_SOURCE = Object.keys(Track.Source);
 
+  inputVideoDevices: MediaDeviceInfo[] = [];
+
   constructor(
     public dialogRef: MatDialogRef<OptionsDialogComponent>,
     @Inject(MAT_DIALOG_DATA)
@@ -98,6 +100,9 @@ export class OptionsDialogComponent {
     if (this.data.allowDisablingScreen === false) {
       this.allowDisablingScreen = false;
     }
+    Room.getLocalDevices('videoinput').then((devices) => {
+      this.inputVideoDevices = devices;
+    });
   }
 
   returnValues() {

diff --git a/openvidu-testapp/src/app/components/video-track/video-track.component.ts b/openvidu-testapp/src/app/components/video-track/video-track.component.ts
@@ -111,7 +111,7 @@ export class VideoTrackComponent extends TrackComponent {
 
   toggleVideoZoom() {
     this.videoZoom = !this.videoZoom;
-    let newWidth = this.videoZoom ? '720px' : '120px';
+    let newWidth = this.videoZoom ? '1500px' : '120px';
     this.elementRef.nativeElement.style.width = newWidth;
   }
 }