projects/openvidu-components-angular/src/lib/directives/template/openvidu-components-angular.directive.ts
The *ovStream directive empowers you to substitute the default StreamComponent template with a custom one. In the example below, we demonstrate how to customize the position and styles of a participant's nickname by replacing the default stream component.
With the ovStream directive, you can access the track object within its context using the let
keyword and referencing the track
variable as follows: *ovStream="let track"
. This allows you to access the ParticipantModel object using track.participant
.
In the example provided below, we illustrate how to achieve this customization with just a few lines of code.
Example :import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { lastValueFrom } from 'rxjs';
import {
OpenViduComponentsModule,
ApiDirectiveModule,
OpenViduComponentsDirectiveModule,
} from 'openvidu-components-angular';
@Component({
selector: 'app-root',
template: `
<!-- OpenVidu Video Conference Component -->
<ov-videoconference
[token]="token"
[livekitUrl]="LIVEKIT_URL"
(onTokenRequested)="onTokenRequested($event)"
>
<!-- Display Video Streams -->
<div *ovStream="let track">
<!-- Video Stream Component -->
<ov-stream [track]="track" [displayParticipantName]="false"></ov-stream>
<!-- Display Participant's Name -->
<p>{{ track.participant.name }}</p>
</div>
</ov-videoconference>
`,
styles: `
p {
position: absolute;
bottom: 0;
border: 2px solid;
background: #000000;
}
`,
standalone: true,
imports: [OpenViduComponentsModule],
})
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 = 'custom-stream';
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;
}
}
}
For a detailed tutorial on customizing the stream component, please visit this link.
Selector | [ovStream] |
Properties |
constructor(template: TemplateRef
|
|||||||||
Parameters :
|
Public container |
Type : ViewContainerRef
|
Public template |
Type : TemplateRef<any>
|