ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-testapp: add CreateIngressOptions to dialog

pull/850/merge
pabloFuente 2024-11-21 14:54:49 +01:00
parent 738431b6bf
commit 18343fa47d
6 changed files with 448 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">

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

@ -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;
}

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

@ -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">
<button mat-button id="create-ingress-api-btn" (click)="createIngress()" [disabled]="!ingressRoomName">Create
Ingress</button>
<span style="display: inline-block" [matTooltip]="!ingressRoomName ? 'Room required' : 'At least one of audio and video required'"
[matTooltipDisabled]="!!ingressRoomName && (ingressWithAudio || ingressWithVideo)">
<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">

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

@ -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' },
];
response: string;
INGRESS_VIDEO_CODECS: { value: VideoCodec; viewValue: 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.videoTrackId = this.localParticipant?.videoTrackPublications.values().next().value?.trackSid!;
this.audioTrackId = this.localParticipant?.audioTrackPublications
.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
}
const egress = await this.roomApiService.startRoomCompositeEgress(this.egressRoomName, roomCompositeOptions, encodedOutputs);
videoOnly: this.roomCompositeVideoOnly,
};
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;
}
}

6
openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
View File

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

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

@ -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(
this.getRestUrl(),
this.livekitParamsService.getParams().livekitApiKey,
this.livekitParamsService.getParams().livekitApiSecret
);
let url;
if (!withVideo) {
url =
'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',
// video: {
// encodingOptions: {
// video_codec: VideoCodec.VP8,
// frame_rate: 30,
// layers: [
// {
// quality: VideoQuality.HIGH,
// width: 1920,
// height: 1080,
// bitrate: 4500000,
// },
// ],
// },
// } as any,
url,
video: {
name: 'pelicula',
source: TrackSource.SCREEN_SHARE,
encodingOptions: {
case: 'preset',
value:
IngressVideoEncodingPreset.H264_540P_25FPS_2_LAYERS_HIGH_MOTION,
case: preset != undefined ? 'preset' : 'options',
value: {},
},
} 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;
}