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

ov-components: enhance testapp with dynamic configuration options

master
Carlos Santos 2025-05-20 12:40:04 +02:00
parent 741954ac2b
commit 4ad8c52c38
2 changed files with 146 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -1,53 +1,55 @@
<ov-videoconference @if (configReady) {
[token]="token" <ov-videoconference
[tokenError]="tokenError" [token]="token"
[minimal]="false" [tokenError]="tokenError"
[lang]="'es'" [minimal]="minimal"
[langOptions]="[ [lang]="lang"
{ name: 'Spanish', lang: 'es' }, [langOptions]="langOptions"
{ name: 'custom', lang: 'cus' } [prejoin]="prejoin"
]" [prejoinDisplayParticipantName]="prejoinDisplayParticipantName"
[prejoin]="true" [participantName]="participantName"
[prejoinDisplayParticipantName]="true" [videoEnabled]="videoEnabled"
[participantName]="'Participant'" [audioEnabled]="audioEnabled"
[videoEnabled]="true" [toolbarCameraButton]="toolbarCameraButton"
[audioEnabled]="true" [toolbarMicrophoneButton]="toolbarMicrophoneButton"
[toolbarCameraButton]="true" [toolbarScreenshareButton]="toolbarScreenshareButton"
[toolbarMicrophoneButton]="true" [toolbarFullscreenButton]="toolbarFullscreenButton"
[toolbarScreenshareButton]="true" [toolbarRecordingButton]="toolbarRecordingButton"
[toolbarFullscreenButton]="true" [toolbarBroadcastingButton]="toolbarBroadcastingButton"
[toolbarRecordingButton]="true" [toolbarBackgroundEffectsButton]="toolbarBackgroundEffectsButton"
[toolbarBroadcastingButton]="true" [toolbarLeaveButton]="toolbarLeaveButton"
[toolbarBackgroundEffectsButton]="true" [toolbarChatPanelButton]="toolbarChatPanelButton"
[toolbarLeaveButton]="true" [toolbarParticipantsPanelButton]="toolbarParticipantsPanelButton"
[toolbarChatPanelButton]="true" [toolbarDisplayLogo]="toolbarDisplayLogo"
[toolbarParticipantsPanelButton]="true" [toolbarDisplayRoomName]="toolbarDisplayRoomName"
[toolbarDisplayLogo]="true" [toolbarActivitiesPanelButton]="toolbarActivitiesPanelButton"
[toolbarDisplayRoomName]="true" [streamDisplayParticipantName]="streamDisplayParticipantName"
[streamDisplayParticipantName]="true" [streamDisplayAudioDetection]="streamDisplayAudioDetection"
[streamDisplayAudioDetection]="true" [streamVideoControls]="streamVideoControls"
[streamVideoControls]="true" [participantPanelItemMuteButton]="participantPanelItemMuteButton"
[participantPanelItemMuteButton]="true" [activitiesPanelRecordingActivity]="activitiesPanelRecordingActivity"
[activitiesPanelRecordingActivity]="true" [activitiesPanelBroadcastingActivity]="activitiesPanelBroadcastingActivity"
[toolbarSettingsButton]="true" [toolbarSettingsButton]="toolbarSettingsButton"
(onTokenRequested)="onTokenRequested($event)" (onTokenRequested)="onTokenRequested($event)"
(onReadyToJoin)="onReadyToJoin()" (onReadyToJoin)="onReadyToJoin()"
(onRoomCreated)="onRoomCreated($event)" (onRoomCreated)="onRoomCreated($event)"
(onParticipantLeft)="onParticipantLeft($event)" (onParticipantLeft)="onParticipantLeft($event)"
(onRoomDisconnected)="onRoomDisconnected()" (onRoomDisconnected)="onRoomDisconnected()"
(onVideoEnabledChanged)="onVideoEnabledChanged($event)" (onVideoEnabledChanged)="onVideoEnabledChanged($event)"
(onVideoDeviceChanged)="onVideoDeviceChanged($event)" (onVideoDeviceChanged)="onVideoDeviceChanged($event)"
(onAudioEnabledChanged)="onAudioEnabledChanged($event)" (onAudioEnabledChanged)="onAudioEnabledChanged($event)"
(onAudioDeviceChanged)="onAudioDeviceChanged($event)" (onAudioDeviceChanged)="onAudioDeviceChanged($event)"
(onLangChanged)="onLangChanged($event)" (onLangChanged)="onLangChanged($event)"
(onScreenShareEnabledChanged)="onScreenShareEnabledChanged($event)" (onScreenShareEnabledChanged)="onScreenShareEnabledChanged($event)"
(onFullscreenEnabledChanged)="onFullscreenEnabledChanged($event)" (onFullscreenEnabledChanged)="onFullscreenEnabledChanged($event)"
(onParticipantsPanelStatusChanged)="onParticipantsPanelStatusChanged($event)" (onParticipantsPanelStatusChanged)="onParticipantsPanelStatusChanged($event)"
(onChatPanelStatusChanged)="onChatPanelStatusChanged($event)" (onChatPanelStatusChanged)="onChatPanelStatusChanged($event)"
(onRecordingStartRequested)="onRecordingStartRequested($event)" (onRecordingStartRequested)="onRecordingStartRequested($event)"
(onRecordingStopRequested)="onRecordingStopRequested($event)" (onRecordingStopRequested)="onRecordingStopRequested($event)"
(onRecordingDeleteRequested)="onRecordingDeleteRequested($event)" (onRecordingDeleteRequested)="onRecordingDeleteRequested($event)"
(onBroadcastingStartRequested)="onBroadcastingStartRequested($event)" (onBroadcastingStartRequested)="onBroadcastingStartRequested($event)"
(onBroadcastingStopRequested)="onBroadcastingStopRequested($event)" (onBroadcastingStopRequested)="onBroadcastingStopRequested($event)"
> >
</ov-videoconference> </ov-videoconference>
}

97
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -15,16 +15,49 @@ import { ActivatedRoute, Router } from '@angular/router';
import { ParticipantLeftEvent } from '../../../projects/openvidu-components-angular/src/lib/models/participant.model'; import { ParticipantLeftEvent } from '../../../projects/openvidu-components-angular/src/lib/models/participant.model';
@Component({ @Component({
selector: 'app-call', selector: 'app-call',
templateUrl: './call.component.html', templateUrl: './call.component.html',
styleUrls: ['./call.component.scss'], styleUrls: ['./call.component.scss'],
standalone: false standalone: false
}) })
export class CallComponent implements OnInit { export class CallComponent implements OnInit {
roomName = 'daily-call'; roomName = 'daily-call';
token: string; token: string;
tokenError: string | undefined; tokenError: string | undefined;
isSessionAlive: boolean = false; isSessionAlive: boolean = false;
configReady: boolean = false;
minimal: boolean = false;
lang: string = 'es';
langOptions: LangOption[] = [
{ name: 'Spanish', lang: 'es' },
{ name: 'custom', lang: 'cus' }
];
prejoin: boolean = true;
prejoinDisplayParticipantName: boolean = true;
participantName: string = `Participant${Math.floor(Math.random() * 1000)}`;
videoEnabled: boolean = true;
audioEnabled: boolean = true;
toolbarCameraButton: boolean = true;
toolbarMicrophoneButton: boolean = true;
toolbarScreenshareButton: boolean = true;
toolbarFullscreenButton: boolean = true;
toolbarRecordingButton: boolean = true;
toolbarBroadcastingButton: boolean = true;
toolbarActivitiesPanelButton: boolean = true;
toolbarBackgroundEffectsButton: boolean = true;
toolbarLeaveButton: boolean = true;
toolbarChatPanelButton: boolean = true;
toolbarParticipantsPanelButton: boolean = true;
toolbarDisplayLogo: boolean = true;
toolbarDisplayRoomName: boolean = true;
streamDisplayParticipantName: boolean = true;
streamDisplayAudioDetection: boolean = true;
streamVideoControls: boolean = true;
participantPanelItemMuteButton: boolean = true;
activitiesPanelRecordingActivity: boolean = true;
activitiesPanelBroadcastingActivity: boolean = true;
toolbarSettingsButton: boolean = true;
private staticVideos = [ private staticVideos = [
'https://videos.pexels.com/video-files/4089575/4089575-hd_1280_720_50fps.mp4', 'https://videos.pexels.com/video-files/4089575/4089575-hd_1280_720_50fps.mp4',
@ -56,8 +89,59 @@ export class CallComponent implements OnInit {
async ngOnInit() { async ngOnInit() {
this.activatedRoute.queryParams.subscribe((params) => { this.activatedRoute.queryParams.subscribe((params) => {
this.areStaticVideosEnabled = params['staticVideos'] === 'true'; if (params['roomName']) this.roomName = params['roomName'];
console.log('Static videos enabled: ', this.areStaticVideosEnabled); // if (params['token']) this.token = params['token'];
if (params['minimal'] !== undefined) this.minimal = params['minimal'] === 'true';
if (params['lang']) this.lang = params['lang'];
if (params['langOptions'] === 'true') {
try {
this.langOptions = [
{ name: 'Esp', lang: 'es' },
{ name: 'Eng', lang: 'en' }
];
} catch {}
}
if (params['prejoin'] !== undefined) this.prejoin = params['prejoin'] === 'true';
if (params['displayParticipantName'] !== undefined)
this.prejoinDisplayParticipantName = params['displayParticipantName'] === 'true';
if (params['participantName']) this.participantName = params['participantName'];
if (params['videoEnabled'] !== undefined) this.videoEnabled = params['videoEnabled'] === 'true';
if (params['audioEnabled'] !== undefined) this.audioEnabled = params['audioEnabled'] === 'true';
if (params['cameraBtn'] !== undefined) this.toolbarCameraButton = params['cameraBtn'] === 'true';
if (params['toolbarMicrophoneButton'] !== undefined)
this.toolbarMicrophoneButton = params['toolbarMicrophoneButton'] === 'true';
if (params['screenshareBtn'] !== undefined)
this.toolbarScreenshareButton = params['screenshareBtn'] === 'true';
if (params['fullscreenBtn'] !== undefined) this.toolbarFullscreenButton = params['fullscreenBtn'] === 'true';
if (params['toolbarRecordingButton'] !== undefined) this.toolbarRecordingButton = params['toolbarRecordingButton'] === 'true';
if (params['toolbarBroadcastingButton'] !== undefined)
this.toolbarBroadcastingButton = params['toolbarBroadcastingButton'] === 'true';
if (params['toolbarBackgroundEffectsButton'] !== undefined)
this.toolbarBackgroundEffectsButton = params['toolbarBackgroundEffectsButton'] === 'true';
if (params['activitiesPanelBtn'] !== undefined) this.toolbarActivitiesPanelButton = params['activitiesPanelBtn'] === 'true';
if (params['leaveBtn'] !== undefined) this.toolbarLeaveButton = params['leaveBtn'] === 'true';
if (params['chatPanelBtn'] !== undefined) this.toolbarChatPanelButton = params['chatPanelBtn'] === 'true';
if (params['participantsPanelBtn'] !== undefined)
this.toolbarParticipantsPanelButton = params['participantsPanelBtn'] === 'true';
if (params['displayLogo'] !== undefined) this.toolbarDisplayLogo = params['displayLogo'] === 'true';
if (params['displayRoomName'] !== undefined) this.toolbarDisplayRoomName = params['displayRoomName'] === 'true';
if (params['displayParticipantName'] !== undefined)
this.streamDisplayParticipantName = params['displayParticipantName'] === 'true';
if (params['streamDisplayAudioDetection'] !== undefined)
this.streamDisplayAudioDetection = params['streamDisplayAudioDetection'] === 'true';
if (params['streamVideoControls'] !== undefined) this.streamVideoControls = params['streamVideoControls'] === 'true';
if (params['participantMuteBtn'] !== undefined)
this.participantPanelItemMuteButton = params['participantMuteBtn'] === 'true';
if (params['activitiesPanelRecordingActivity'] !== undefined)
this.activitiesPanelRecordingActivity = params['activitiesPanelRecordingActivity'] === 'true';
if (params['activitiesPanelBroadcastingActivity'] !== undefined)
this.activitiesPanelBroadcastingActivity = params['activitiesPanelBroadcastingActivity'] === 'true';
if (params['toolbarSettingsBtn'] !== undefined) this.toolbarSettingsButton = params['toolbarSettingsBtn'] === 'true';
if (params['staticVideos'] !== undefined) this.areStaticVideosEnabled = params['staticVideos'] === 'true';
console.log('Query params:', params);
console.log('PARTICIPANT NAME:', this.participantName);
this.configReady = true;
}); });
if (this.areStaticVideosEnabled) { if (this.areStaticVideosEnabled) {
setTimeout(() => { setTimeout(() => {
@ -68,6 +152,7 @@ export class CallComponent implements OnInit {
} }
async onTokenRequested(participantName: string) { async onTokenRequested(participantName: string) {
console.warn('VC TOKEN REQUESTED', participantName);
await this.requestForTokens(participantName); await this.requestForTokens(participantName);
} }