openvidu-testapp: add CreateIngressOptions to dialog

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

@@ -151,7 +151,7 @@
       <mat-form-field id="trackPublish-videoCodec">
         <mat-label>videoCodec</mat-label>
         <mat-select [(value)]="trackPublishOptions.videoCodec">
-          <mat-option *ngFor="let codec of ['vp8','h264','vp9','av1']" [value]="codec">{{codec}}</mat-option>
+          <mat-option *ngFor="let codec of ['VP8','H264','VP9','AV1']" [value]="codec">{{codec}}</mat-option>
         </mat-select>
       </mat-form-field>
       <mat-form-field id="trackPublish-scalabilityMode">

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

@@ -33,7 +33,7 @@ mat-dialog-content button {
   color: rgba(0, 0, 0, 0.54);
   font-weight: 400;
   margin-bottom: 5px;
-  margin-top: 13px
+  margin-top: 13px;
 }
 
 .inner-text-input {
@@ -121,3 +121,15 @@ mat-chip-row {
 .room-composite-options mat-checkbox {
   margin-left: 7px;
 }
+
+.ingress-options {
+  margin-bottom: 7px;
+}
+
+#ingress-simulcast {
+  margin-right: 6px;
+}
+
+#ingress-video-codec-select {
+  margin-right: 6px;
+}

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

@@ -163,9 +163,10 @@
 
     <div class="button-group">
       <button mat-button id="list-ingress-api-btn" (click)="listIngress()">List Ingress</button>
-      <span style="display: inline-block" matTooltip='"Room" required' [matTooltipDisabled]="!!ingressRoomName">
+      <span style="display: inline-block" [matTooltip]="!ingressRoomName ? 'Room required' : 'At least one of audio and video required'"
-        <button mat-button id="create-ingress-api-btn" (click)="createIngress()" [disabled]="!ingressRoomName">Create
+        [matTooltipDisabled]="!!ingressRoomName && (ingressWithAudio || ingressWithVideo)">
-          Ingress</button>
+        <button mat-button id="create-ingress-api-btn" (click)="createIngress()"
+          [disabled]="!ingressRoomName || (!ingressWithAudio && !ingressWithVideo)">Create Ingress</button>
       </span>
       <span style="display: inline-block" matTooltip='"Ingress ID" required' [matTooltipDisabled]="!!ingressId">
         <button mat-button id="delete-ingress-api-btn" (click)="deleteIngress()" [disabled]="!ingressId">Delete
@@ -184,6 +185,38 @@
       </span>
     </div>
 
+    <label class="label">Ingress options</label>
+    <div class="ingress-options">
+      <mat-checkbox id="ingress-with-audio" [(ngModel)]="ingressWithAudio">With audio</mat-checkbox>
+      <mat-checkbox id="ingress-with-video" [(ngModel)]="ingressWithVideo">With video</mat-checkbox>
+      <span style="display: inline-block" [matTooltip]="!ingressWithVideo ? 'Only with video' : 'Preset overrides this value'"
+        [matTooltipDisabled]="!!ingressWithVideo && ingressVideoEncodingPresetSelected == undefined">
+        <mat-checkbox id="ingress-simulcast" [(ngModel)]="ingressSimulcast"
+          [disabled]="!ingressWithVideo || ingressVideoEncodingPresetSelected != undefined">Simulcast</mat-checkbox>
+      </span>
+      <span style="display: inline-block" [matTooltip]="!ingressWithVideo ? 'Only with video' : 'Preset overrides this value'"
+        [matTooltipDisabled]="!!ingressWithVideo && ingressVideoEncodingPresetSelected == undefined">
+        <mat-form-field id="ingress-video-codec-select">
+          <mat-label>Codec</mat-label>
+          <mat-select [(value)]="ingressVideoCodecSelected" [disabled]="!ingressWithVideo || ingressVideoEncodingPresetSelected != undefined">
+            <mat-option *ngFor="let codec of INGRESS_VIDEO_CODECS" [value]="codec.value">
+              {{codec.viewValue}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </span>
+      <span style="display: inline-block" matTooltip="Only with video" [matTooltipDisabled]="!!ingressWithVideo">
+        <mat-form-field id="ingress-preset-select">
+          <mat-label>Preset</mat-label>
+          <mat-select [(value)]="ingressVideoEncodingPresetSelected" [disabled]="!ingressWithVideo">
+            <mat-option *ngFor="let preset of INGRESS_VIDEO_ENCODING_PRESETS" [value]="preset.value">
+              {{preset.viewValue}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </span>
+    </div>
+
     <mat-divider></mat-divider>
 
     <mat-form-field id="response-text-area" appearance="fill">

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

@@ -3,18 +3,34 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { Component, Inject, inject } from '@angular/core';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { VideoCodec } from '@livekit/protocol';
 import { LocalParticipant } from 'livekit-client';
 
-import { DirectFileOutput, EgressClient, EncodedFileOutput, EncodedFileType, EncodedOutputs, IngressInfo, IngressInput, Room, RoomCompositeOptions, RoomServiceClient, SegmentedFileOutput, SegmentedFileProtocol, StreamOutput, StreamProtocol } from 'livekit-server-sdk';
+import {
+  DirectFileOutput,
+  EgressClient,
+  EncodedFileOutput,
+  EncodedFileType,
+  EncodedOutputs,
+  IngressInfo,
+  IngressInput,
+  IngressVideoEncodingPreset,
+  Room,
+  RoomCompositeOptions,
+  RoomServiceClient,
+  SegmentedFileOutput,
+  SegmentedFileProtocol,
+  StreamOutput,
+  StreamProtocol,
+} from 'livekit-server-sdk';
 import { RoomApiService } from 'src/app/services/room-api.service';
 
 @Component({
   selector: 'app-room-api-dialog',
   templateUrl: './room-api-dialog.component.html',
-    styleUrls: ['./room-api-dialog.component.css']
+  styleUrls: ['./room-api-dialog.component.css'],
 })
 export class RoomApiDialogComponent {
-
   room: Room;
   localParticipant: LocalParticipant;
   roomServiceClient: RoomServiceClient;
@@ -38,20 +54,43 @@ export class RoomApiDialogComponent {
   fileOutputSelected: boolean = true;
   streamOutputSelected: boolean = false;
   s3Endpoint: string = 'http://localhost:9100'; // 'http://minio:9000'
-    rtmpUrls: string[] = ['rtmp://172.17.0.1:1936/live/']
+  rtmpUrls: string[] = ['rtmp://172.17.0.1:1936/live/'];
   segmentOutputSelected: boolean = false;
   segmentDuration: number = 6;
 
   ingressRoomName: string;
   ingressId: string;
   inputTypeSelected: IngressInput = IngressInput.URL_INPUT;
-    INGRESS_INPUT_TYPES: { value: IngressInput, viewValue: string }[] = [
+  ingressWithVideo: boolean = true;
+  ingressWithAudio: boolean = false;
+  ingressVideoCodecSelected: VideoCodec = VideoCodec.H264_BASELINE;
+  ingressSimulcast: boolean = true;
+  ingressVideoEncodingPresetSelected?: IngressVideoEncodingPreset = undefined;
+
+  response: string;
+
+  INGRESS_INPUT_TYPES: { value: IngressInput; viewValue: string }[] = [
     { value: IngressInput.URL_INPUT, viewValue: 'URL' },
     { value: IngressInput.RTMP_INPUT, viewValue: 'RTMP' },
     { value: IngressInput.WHIP_INPUT, viewValue: 'WHIP' },
   ];
-
+  INGRESS_VIDEO_CODECS: { value: VideoCodec; viewValue: string }[] = [
-    response: string;
+    { value: VideoCodec.H264_BASELINE, viewValue: 'H264' },
+    { value: VideoCodec.VP8, viewValue: 'VP8' },
+  ];
+  INGRESS_VIDEO_ENCODING_PRESETS: {
+    value: IngressInput | undefined;
+    viewValue: string;
+  }[] = [{ value: undefined, viewValue: 'undefined' }].concat(
+    Object.keys(IngressVideoEncodingPreset)
+      .filter((key) => isNaN(Number(key)))
+      .map((key) => {
+        return {
+          value: IngressVideoEncodingPreset[key as any],
+          viewValue: key.toString(),
+        } as any;
+      })
+  );
 
   // s3Config = {
   //     endpoint: this.s3Endpoint,
@@ -72,10 +111,16 @@ export class RoomApiDialogComponent {
     this.localParticipant = data.localParticipant;
     this.apiRoomName = this.room?.name;
     this.apiParticipantIdentity = this.localParticipant?.identity;
-        this.apiTrackSid = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid!;
+    this.apiTrackSid = this.localParticipant?.videoTrackPublications
+      .values()
+      .next().value?.trackSid!;
     this.egressRoomName = this.room?.name;
-        this.audioTrackId = this.localParticipant?.audioTrackPublications.values().next().value?.trackSid!;
+    this.audioTrackId = this.localParticipant?.audioTrackPublications
-        this.videoTrackId = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid!;
+      .values()
+      .next().value?.trackSid!;
+    this.videoTrackId = this.localParticipant?.videoTrackPublications
+      .values()
+      .next().value?.trackSid!;
     this.ingressRoomName = this.room?.name;
   }
 
@@ -105,7 +150,7 @@ export class RoomApiDialogComponent {
     try {
       const promises: Promise<void>[] = [];
       const rooms = await this.roomApiService.listRooms();
-            rooms.forEach(r => {
+      rooms.forEach((r) => {
         promises.push(this.roomApiService.deleteRoom(r.name));
       });
       await Promise.all(promises);
@@ -118,7 +163,9 @@ export class RoomApiDialogComponent {
   async listParticipants() {
     console.log('Listing participants');
     try {
-            const participants = await this.roomApiService.listParticipants(this.apiRoomName);
+      const participants = await this.roomApiService.listParticipants(
+        this.apiRoomName
+      );
       this.response = JSON.stringify(participants, null, 4);
     } catch (error: any) {
       this.response = error;
@@ -128,7 +175,10 @@ export class RoomApiDialogComponent {
   async getParticipant() {
     console.log('Getting participant');
     try {
-            const participant = await this.roomApiService.getParticipant(this.apiRoomName, this.apiParticipantIdentity);
+      const participant = await this.roomApiService.getParticipant(
+        this.apiRoomName,
+        this.apiParticipantIdentity
+      );
       this.response = JSON.stringify(participant, null, 4);
     } catch (error: any) {
       this.response = error;
@@ -138,7 +188,10 @@ export class RoomApiDialogComponent {
   async removeParticipant() {
     console.log('Removing participant');
     try {
-            await this.roomApiService.removeParticipant(this.apiRoomName, this.apiParticipantIdentity);
+      await this.roomApiService.removeParticipant(
+        this.apiRoomName,
+        this.apiParticipantIdentity
+      );
       this.response = 'Participant removed';
     } catch (error: any) {
       this.response = error;
@@ -148,7 +201,12 @@ export class RoomApiDialogComponent {
   async mutePublishedTrack() {
     console.log(`${this.muteTrack ? 'Muting' : 'Unmuting'} track`);
     try {
-            await this.roomApiService.mutePublishedTrack(this.apiRoomName, this.apiParticipantIdentity, this.apiTrackSid, this.muteTrack);
+      await this.roomApiService.mutePublishedTrack(
+        this.apiRoomName,
+        this.apiParticipantIdentity,
+        this.apiTrackSid,
+        this.muteTrack
+      );
       this.response = `Track ${this.muteTrack ? 'muted' : 'unmuted'}`;
       this.muteTrack = !this.muteTrack;
     } catch (error: any) {
@@ -173,9 +231,13 @@ export class RoomApiDialogComponent {
       const roomCompositeOptions: RoomCompositeOptions = {
         layout: this.roomCompositeLayoutSelected,
         audioOnly: this.roomCompositeAudioOnly,
-                videoOnly: this.roomCompositeVideoOnly
+        videoOnly: this.roomCompositeVideoOnly,
-            }
+      };
-            const egress = await this.roomApiService.startRoomCompositeEgress(this.egressRoomName, roomCompositeOptions, encodedOutputs);
+      const egress = await this.roomApiService.startRoomCompositeEgress(
+        this.egressRoomName,
+        roomCompositeOptions,
+        encodedOutputs
+      );
       this.response = JSON.stringify(egress, null, 4);
       this.egressId = egress.egressId;
     } catch (error: any) {
@@ -187,7 +249,12 @@ export class RoomApiDialogComponent {
     console.log('Starting track composite egress');
     try {
       const encodedOutputs = this.getEncodedOutputs();
-            const egress = await this.roomApiService.startTrackCompositeEgress(this.egressRoomName, this.audioTrackId, this.videoTrackId, encodedOutputs);
+      const egress = await this.roomApiService.startTrackCompositeEgress(
+        this.egressRoomName,
+        this.audioTrackId,
+        this.videoTrackId,
+        encodedOutputs
+      );
       this.response = JSON.stringify(egress, null, 4);
       this.egressId = egress.egressId;
     } catch (error: any) {
@@ -198,7 +265,10 @@ export class RoomApiDialogComponent {
   async startTrackEgress() {
     console.log('Starting track egress');
     try {
-            const egress = await this.roomApiService.startTrackEgress(this.egressRoomName, !!this.audioTrackId ? this.audioTrackId : this.videoTrackId);
+      const egress = await this.roomApiService.startTrackEgress(
+        this.egressRoomName,
+        !!this.audioTrackId ? this.audioTrackId : this.videoTrackId
+      );
       this.response = JSON.stringify(egress, null, 4);
       this.egressId = egress.egressId;
     } catch (error: any) {
@@ -229,7 +299,15 @@ export class RoomApiDialogComponent {
   async createIngress() {
     console.log('Creating ingress');
     try {
-            const ingress = await this.roomApiService.createIngress(this.ingressRoomName, this.inputTypeSelected);
+      const ingress = await this.roomApiService.createIngress(
+        this.ingressRoomName,
+        this.inputTypeSelected,
+        this.ingressWithAudio,
+        this.ingressWithVideo,
+        this.ingressVideoCodecSelected,
+        this.ingressSimulcast,
+        this.ingressVideoEncodingPresetSelected
+      );
       this.response = JSON.stringify(ingress, null, 4);
       this.ingressId = ingress.ingressId;
     } catch (error: any) {
@@ -255,7 +333,7 @@ export class RoomApiDialogComponent {
     try {
       const promises: Promise<IngressInfo>[] = [];
       const ingresses = await this.roomApiService.listIngress();
-            ingresses.forEach(i => {
+      ingresses.forEach((i) => {
         promises.push(this.roomApiService.deleteIngress(i.ingressId));
       });
       await Promise.all(promises);
@@ -293,7 +371,7 @@ export class RoomApiDialogComponent {
     if (this.streamOutputSelected) {
       encodedOutputs.stream = new StreamOutput({
         urls: this.rtmpUrls,
-                protocol: StreamProtocol.RTMP
+        protocol: StreamProtocol.RTMP,
       });
     }
     if (this.segmentOutputSelected) {
@@ -305,5 +383,4 @@ export class RoomApiDialogComponent {
     }
     return encodedOutputs;
   }
-
 }

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

@@ -80,11 +80,11 @@ export class OpenviduInstanceComponent {
     autoSubscribe: false,
   };
   createLocalTracksOptions: CreateLocalTracksOptions = {
-    audio: true,
+    audio: false,
     video: {
       resolution: {
-        width: 640,
+        width: 1920,
-        height: 480,
+        height: 1080,
         frameRate: 30,
       },
     },

openvidu-testapp/src/app/services/room-api.service.ts

@@ -21,10 +21,15 @@ import {
   RoomServiceClient,
   TrackCompositeOptions,
   TrackInfo,
-  TrackSource,
   VideoGrant,
 } from 'livekit-server-sdk';
 import { LivekitParamsService } from './livekit-params.service';
+import { VideoQuality } from 'livekit-client';
+import {
+  IngressVideoEncodingOptions,
+  VideoCodec,
+  VideoLayer,
+} from '@livekit/protocol';
 
 @Injectable({
   providedIn: 'root',
@@ -134,7 +139,8 @@ export class RoomApiService {
     encodingOptions?: EncodingOptionsPreset | EncodingOptions
   ): Promise<EgressInfo> {
     if (encodedOutputs.file) {
-      encodedOutputs.file.filepath = 'RoomComposite-{room_id}-{room_name}-{time}';
+      encodedOutputs.file.filepath =
+        'RoomComposite-{room_id}-{room_name}-{time}';
     }
     if (encodingOptions) {
       roomCompositeOptions.encodingOptions = encodingOptions;
@@ -201,49 +207,78 @@ export class RoomApiService {
 
   async createIngress(
     room_name: string,
-    input_type: IngressInput
+    input_type: IngressInput,
+    withAudio: boolean,
+    withVideo: boolean,
+    codec: VideoCodec,
+    simulcast: boolean,
+    preset?: IngressVideoEncodingPreset
   ): Promise<IngressInfo> {
-    const ingressClient: IngressClient = new IngressClient(
+    let url;
-      this.getRestUrl(),
+    if (!withVideo) {
-      this.livekitParamsService.getParams().livekitApiKey,
+      url =
-      this.livekitParamsService.getParams().livekitApiSecret
+        'https://s3.eu-west-1.amazonaws.com/public.openvidu.io/bbb_sunflower_1080p_60fps_normal_onlyaudio.mp3';
-    );
+    } else {
+      url = withAudio
+        ? 'https://s3.eu-west-1.amazonaws.com/public.openvidu.io/bbb_sunflower_1080p_60fps_normal.mp4'
+        : 'https://s3.eu-west-1.amazonaws.com/public.openvidu.io/bbb_sunflower_1080p_60fps_normal_noaudio.mp4';
+    }
     let options: CreateIngressOptions = {
       name: input_type + '-' + room_name,
       roomName: room_name,
       participantIdentity: 'IngressParticipantIdentity',
       participantName: 'MyIngress',
       participantMetadata: 'IngressParticipantMetadata',
-      url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+      url,
-      // video: {
-      //     encodingOptions: {
-      //       video_codec: VideoCodec.VP8,
-      //       frame_rate: 30,
-      //       layers: [
-      //         {
-      //           quality: VideoQuality.HIGH,
-      //           width: 1920,
-      //           height: 1080,
-      //           bitrate: 4500000,
-      //         },
-      //       ],
-      //     },
-      //   } as any,
       video: {
-        name: 'pelicula',
-        source: TrackSource.SCREEN_SHARE,
         encodingOptions: {
-          case: 'preset',
+          case: preset != undefined ? 'preset' : 'options',
-          value:
+          value: {},
-            IngressVideoEncodingPreset.H264_540P_25FPS_2_LAYERS_HIGH_MOTION,
         },
       } as any,
-      // audio: {
-      //     source: TrackSource.MICROPHONE,
-      //     preset: IngressAudioEncodingPreset.OPUS_MONO_64KBS,
-      // } as any,
     };
-    const ingressInfo = await ingressClient.createIngress(input_type, options);
+    if (preset != undefined) {
+      options.video!.encodingOptions.value = preset;
+    } else {
+      const encodingOptions = options.video!.encodingOptions
+        .value! as IngressVideoEncodingOptions;
+      encodingOptions.videoCodec = codec;
+      encodingOptions.frameRate = 30;
+      let layers: VideoLayer[] = [];
+      if (simulcast) {
+        layers = [
+          {
+            quality: VideoQuality.HIGH,
+            width: 1920,
+            height: 1080,
+          },
+          {
+            quality: VideoQuality.MEDIUM,
+            width: 1280,
+            height: 720,
+          },
+          {
+            quality: VideoQuality.LOW,
+            width: 640,
+            height: 360,
+          },
+        ] as VideoLayer[];
+      } else {
+        layers = [
+          {
+            quality: VideoQuality.HIGH,
+            width: 1920,
+            height: 1080,
+          } as VideoLayer,
+        ];
+      }
+      encodingOptions.layers = layers;
+    }
+
+    const ingressInfo = await this.ingressClient.createIngress(
+      input_type,
+      options
+    );
     return ingressInfo;
   }