99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { HttpClient } from "@angular/common/http";
|
|
import { Component } from "@angular/core";
|
|
import { lastValueFrom } from "rxjs";
|
|
|
|
import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular";
|
|
import { environment } from 'src/environments/environment';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
template: `
|
|
<!-- OpenVidu Video Conference Component -->
|
|
<ov-videoconference
|
|
(onRoomCreated)="onRoomCreated($event)"
|
|
[token]="token"
|
|
[toolbarDisplaySessionName]="false"
|
|
(onTokenRequested)="onTokenRequested($event)"
|
|
>
|
|
<!-- Chat Panel -->
|
|
<div *ovChatPanel id="my-panel">
|
|
<h3>Chat</h3>
|
|
<div>
|
|
<ul>
|
|
<li *ngFor="let msg of messages">{{ msg }}</li>
|
|
</ul>
|
|
</div>
|
|
<input value="Hello" #input />
|
|
<button (click)="send(input.value)">Send</button>
|
|
</div>
|
|
</ov-videoconference>
|
|
`,
|
|
styleUrls: ['./app.component.scss'],
|
|
})
|
|
export class AppComponent {
|
|
// Define the URL of the application server
|
|
APPLICATION_SERVER_URL = environment.applicationServerUrl;
|
|
// Define the name of the room and initialize the token variable
|
|
roomName = 'chat-panel-directive-example';
|
|
token!: string;
|
|
messages: string[] = [];
|
|
|
|
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Event handler for room creation
|
|
onRoomCreated(room: Room) {
|
|
room.on(
|
|
RoomEvent.DataReceived,
|
|
(
|
|
payload: Uint8Array,
|
|
participant?: RemoteParticipant,
|
|
_?: DataPacket_Kind,
|
|
topic?: string
|
|
) => {
|
|
if (topic === DataTopic.CHAT) {
|
|
const { message } = JSON.parse(new TextDecoder().decode(payload));
|
|
const participantName = participant?.name || 'Unknown';
|
|
this.messages.push(message);
|
|
console.log(`Message received from ${participantName}:`, message);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
// Function to send a chat message
|
|
async send(message: string): Promise<void> {
|
|
const strData = JSON.stringify({ message });
|
|
const data: Uint8Array = new TextEncoder().encode(strData);
|
|
const options: DataPublishOptions = { topic: DataTopic.CHAT };
|
|
await this.participantService.publishData(data, options);
|
|
this.messages.push(message);
|
|
}
|
|
|
|
// 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 + 'api/sessions', {
|
|
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;
|
|
}
|
|
}
|
|
} |