projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovToolbar directive allows to replace the default toolbar component with a custom one. In the example below we've replaced the default toolbar and added the toggleAudio and toggleVideo buttons. Here we are using the OpenViduService for publishing/unpublishing the audio and video.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens">
<div *ovToolbar style="text-align: center;">
<button (click)="toggleVideo()">Toggle Video</button>
<button (click)="toggleAudio()">Toggle Audio</button>
</div>
</ov-videoconference>export class ToolbarDirectiveComponent {
sessionId = 'toolbar-directive-example';
tokens!: TokenModel;
publishVideo = true;
publishAudio = true;
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
toggleVideo() {
this.publishVideo = !this.publishVideo;
this.participantService.publishVideo(this.publishVideo);
}
toggleAudio() {
this.publishAudio = !this.publishAudio;
this.participantService.publishAudio(this.publishAudio);
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovToolbar] |