118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import { HttpClient } from '@angular/common/http';
|
|
import { Component } from '@angular/core';
|
|
import { lastValueFrom } from 'rxjs';
|
|
|
|
import { environment } from 'src/environments/environment';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
|
|
import { MatIconButton } from '@angular/material/button';
|
|
import {
|
|
OpenViduAngularModule,
|
|
ApiDirectiveModule,
|
|
OpenViduAngularDirectiveModule,
|
|
} from 'openvidu-angular';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<!-- OpenVidu Video Conference Component -->
|
|
<ov-videoconference
|
|
[token]="token"
|
|
[livekitUrl]="LIVEKIT_URL"
|
|
(onTokenRequested)="onTokenRequested($event)"
|
|
>
|
|
<!-- Participant Panel Items -->
|
|
<div *ovParticipantPanelItem="let participant" style="display: flex">
|
|
<p>{{ participant.name }}</p>
|
|
|
|
<!-- More Options Menu -->
|
|
<button mat-icon-button [matMenuTriggerFor]="menu">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
|
|
<!-- Menu Content -->
|
|
<mat-menu #menu="matMenu">
|
|
<button mat-menu-item>Button 1</button>
|
|
<button mat-menu-item>Button 2</button>
|
|
</mat-menu>
|
|
</div>
|
|
</ov-videoconference>
|
|
`,
|
|
styles: [],
|
|
standalone: true,
|
|
imports: [
|
|
OpenViduAngularModule,
|
|
ApiDirectiveModule,
|
|
OpenViduAngularDirectiveModule,
|
|
MatIconButton,
|
|
MatMenuTrigger,
|
|
MatIcon,
|
|
MatMenu,
|
|
MatMenuItem,
|
|
],
|
|
})
|
|
export class AppComponent {
|
|
// For local development, leave these variables empty
|
|
// For production, configure them with correct URLs depending on your deployment
|
|
APPLICATION_SERVER_URL = '';
|
|
LIVEKIT_URL = '';
|
|
|
|
// Define the name of the room and initialize the token variable
|
|
roomName = 'participant-panel-item';
|
|
token!: string;
|
|
|
|
constructor(private httpClient: HttpClient) {
|
|
this.configureUrls();
|
|
}
|
|
|
|
private configureUrls() {
|
|
// If APPLICATION_SERVER_URL is not configured, use default value from local development
|
|
if (!this.APPLICATION_SERVER_URL) {
|
|
if (window.location.hostname === 'localhost') {
|
|
this.APPLICATION_SERVER_URL = 'http://localhost:6080/';
|
|
} else {
|
|
this.APPLICATION_SERVER_URL =
|
|
'https://' + window.location.hostname + ':6443/';
|
|
}
|
|
}
|
|
|
|
// If LIVEKIT_URL is not configured, use default value from local development
|
|
if (!this.LIVEKIT_URL) {
|
|
if (window.location.hostname === 'localhost') {
|
|
this.LIVEKIT_URL = 'ws://localhost:7880/';
|
|
} else {
|
|
this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function to request a token when a participant joins the room
|
|
async onTokenRequested(participantName: string) {
|
|
const { token } = await this.getToken(this.roomName, participantName);
|
|
this.token = token;
|
|
}
|
|
|
|
// Function to get a token from the server
|
|
getToken(roomName: string, participantName: string): Promise<any> {
|
|
try {
|
|
// Send a POST request to the server to obtain a token
|
|
return lastValueFrom(
|
|
this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'token', {
|
|
roomName,
|
|
participantName,
|
|
})
|
|
);
|
|
} catch (error: any) {
|
|
// Handle errors, e.g., if the server is not reachable
|
|
if (error.status === 404) {
|
|
throw {
|
|
status: error.status,
|
|
message:
|
|
'Cannot connect with the backend. ' + error.url + ' not found',
|
|
};
|
|
}
|
|
throw error;
|
|
}
|
|
}
|
|
}
|