neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Angular tutorial to use event handling

Browse Source
This commit is contained in:
juancarmore 2024-05-29 15:49:47 +02:00
parent c0006fb2cd
commit e040890661
2 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
application-client/openvidu-angular/src/app/app.component.html
View File

@ -22,25 +22,21 @@
<button class="btn btn-danger" id="leave-room-button" (click)="leaveRoom()">Leave Room</button>
</div>
<div id="layout-container">
@if (room.localParticipant) {
@for (trackPublication of room.localParticipant.videoTrackPublications.values(); track trackPublication.trackSid) {
<video-component
[track]="trackPublication.videoTrack!"
[participantIdentity]="room.localParticipant.identity"
[local]="true"
></video-component>
}
@if (localTrack) {
<video-component
[track]="localTrack"
[participantIdentity]="roomForm.value.participantName!"
[local]="true"
></video-component>
}
@for (participant of room.remoteParticipants.values(); track participant.identity) {
@for (trackPublication of participant.trackPublications.values(); track trackPublication.trackSid) {
@if (trackPublication.kind === 'video') {
<video-component
[track]="trackPublication.videoTrack!"
[participantIdentity]="participant.identity"
></video-component>
} @else {
<audio-component [track]="trackPublication.audioTrack!" hidden></audio-component>
}
@for (remoteTrack of remoteTracksMap.values(); track remoteTrack.trackPublication.trackSid) {
@if (remoteTrack.trackPublication.kind === 'video') {
<video-component
[track]="remoteTrack.trackPublication.videoTrack!"
[participantIdentity]="remoteTrack.participantIdentity"
></video-component>
} @else {
<audio-component [track]="remoteTrack.trackPublication.audioTrack!" hidden></audio-component>
}
}
</div>

41
application-client/openvidu-angular/src/app/app.component.ts
View File

@ -1,11 +1,23 @@
import { Component, HostListener, OnDestroy } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
import { Room } from 'livekit-client';
import {
LocalVideoTrack,
RemoteParticipant,
RemoteTrack,
RemoteTrackPublication,
Room,
RoomEvent,
} from 'livekit-client';
import { VideoComponent } from './video/video.component';
import { AudioComponent } from './audio/audio.component';
import { HttpClient } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';
type TrackInfo = {
trackPublication: RemoteTrackPublication;
participantIdentity: string;
};
// For local development, leave these variables empty
// For production, configure them with correct URLs depending on your deployment
var APPLICATION_SERVER_URL = '';
@ -25,6 +37,8 @@ export class AppComponent implements OnDestroy {
});
room?: Room;
localTrack?: LocalVideoTrack;
remoteTracksMap: Map<string, TrackInfo> = new Map();
constructor(private httpClient: HttpClient) {
this.configureUrls();
@ -54,6 +68,23 @@ export class AppComponent implements OnDestroy {
// Initialize a new Room object
this.room = new Room();
// Specify the actions when events take place in the room
// On every new Track received...
this.room.on(
RoomEvent.TrackSubscribed,
(_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {
this.remoteTracksMap.set(publication.trackSid, {
trackPublication: publication,
participantIdentity: participant.identity,
});
}
);
// On every new Track destroyed...
this.room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {
this.remoteTracksMap.delete(publication.trackSid);
});
try {
// Get the room name and participant name from the form
const roomName = this.roomForm.value.roomName!;
@ -67,8 +98,12 @@ export class AppComponent implements OnDestroy {
// Publish your camera and microphone
await this.room.localParticipant.enableCameraAndMicrophone();
this.localTrack = this.room.localParticipant.videoTrackPublications.values().next().value.videoTrack;
} catch (error: any) {
console.log('There was an error connecting to the room:', error?.error?.errorMessage || error?.message || error);
console.log(
'There was an error connecting to the room:',
error?.error?.errorMessage || error?.message || error
);
await this.leaveRoom();
}
}
@ -77,6 +112,8 @@ export class AppComponent implements OnDestroy {
// Leave the room by calling 'disconnect' method over the Room object
await this.room?.disconnect();
delete this.room;
delete this.localTrack;
this.remoteTracksMap.clear();
}
@HostListener('window:beforeunload')