99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
import { HttpClient } from '@angular/common/http';
|
|
import { Component } from '@angular/core';
|
|
import { lastValueFrom } from 'rxjs';
|
|
|
|
import {
|
|
OpenViduService,
|
|
OpenViduAngularModule,
|
|
ApiDirectiveModule,
|
|
OpenViduAngularDirectiveModule,
|
|
} from 'openvidu-angular';
|
|
import { environment } from 'src/environments/environment';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<!-- OpenVidu Video Conference Component -->
|
|
@if (connected) {
|
|
<ov-videoconference
|
|
[token]="token"
|
|
[livekitUrl]="LIVEKIT_URL"
|
|
[toolbarDisplayRoomName]="false"
|
|
(onTokenRequested)="onTokenRequested($event)"
|
|
>
|
|
<!-- Participant Panel Item Elements -->
|
|
<div *ovParticipantPanelItemElements="let participant">
|
|
<!-- Leave Button for Local Participant -->
|
|
@if (participant.isLocal) {
|
|
<button (click)="leaveSession()">Leave</button>
|
|
}
|
|
</div>
|
|
</ov-videoconference>
|
|
}
|
|
|
|
<!-- Session Disconnected Message -->
|
|
@if (!connected) {
|
|
<div style="text-align: center;">Session disconnected</div>
|
|
}
|
|
`,
|
|
styles: [],
|
|
standalone: true,
|
|
imports: [
|
|
OpenViduAngularModule,
|
|
ApiDirectiveModule,
|
|
OpenViduAngularDirectiveModule,
|
|
],
|
|
})
|
|
export class AppComponent {
|
|
// Define the URL of the application server
|
|
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
|
LIVEKIT_URL = environment.livekitUrl;
|
|
|
|
// Define the name of the room and initialize the token variable
|
|
roomName = 'participant-panel-item-elements';
|
|
token!: string;
|
|
|
|
// Flag to indicate session connection status
|
|
connected = true;
|
|
|
|
constructor(
|
|
private httpClient: HttpClient,
|
|
private openviduService: OpenViduService
|
|
) {}
|
|
|
|
// 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 leave the session
|
|
async leaveSession() {
|
|
await this.openviduService.disconnectRoom();
|
|
this.connected = false;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
}
|