projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovLayout directive allows to replace the default session layout with a custom one.
As the deafult StreamComponent needs the participant stream, and as the participants streams extraction is not trivial,
openvidu-angular provides a ParticipantStreamsPipe for easy extraction of the stream of each participant. In the example
below you can see that on the HTML template, as the last component of the *ngFor statements (| streams).
You can run the associated tutorial here.
Example :<ov-videoconference [tokens]="tokens" (onSessionCreated)="subscribeToParticipants()">
<div *ovLayout>
<div class="container">
<div class="item" *ngFor="let stream of localParticipant | streams">
<ov-stream [stream]="stream"></ov-stream>
</div>
<div class="item" *ngFor="let stream of remoteParticipants | streams">
<ov-stream [stream]="stream"></ov-stream>
</div>
</div>
</div>
</ov-videoconference>We need to get the participants in our Session, so we use the ParticipantService to subscribe to the required Observables. We'll get the local participant and the remote participants to display their streams in our custom session layout.
Example :export class LayoutDirectiveComponent implements OnInit, OnDestroy {
sessionId = 'layout-directive-example';
tokens!: TokenModel;
localParticipant!: ParticipantAbstractModel;
remoteParticipants!: ParticipantAbstractModel[];
localParticipantSubs!: Subscription;
remoteParticipantsSubs!: Subscription;
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
ngOnDestroy() {
this.localParticipantSubs.unsubscribe();
this.remoteParticipantsSubs.unsubscribe();
}
subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
});
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
this.remoteParticipants = participants;
});
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovLayout] |
Properties |
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public container |
Type : ViewContainerRef
|
| Public template |
Type : TemplateRef<any>
|