projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovToolbarAdditionalButtons directive allows to add additional buttons to center buttons group. In the example below we've added the same buttons as the ToolbarDirective. Here we are using the ParticipantService to check the audio or video status.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalButtons style="text-align: center;">
<button mat-icon-button (click)="toggleVideo()">
<mat-icon>videocam</mat-icon>
</button>
<button mat-icon-button (click)="toggleAudio()">
<mat-icon>mic</mat-icon>
</button>
</div>
</ov-videoconference>export class ToolbarAdditionalButtonsDirectiveComponent {
sessionId = "panel-directive-example";
tokens!: TokenModel;
sessionId = 'toolbar-additionalbtn-directive-example';
tokens!: TokenModel;
constructor(
private httpClient: HttpClient,
private openviduService: OpenViduService,
private participantService: ParticipantService
) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
toggleVideo() {
const publishVideo = !this.participantService.isMyVideoActive();
this.openviduService.publishVideo(publishVideo);
}
toggleAudio() {
const publishAudio = !this.participantService.isMyAudioActive();
this.openviduService.publishAudio(publishAudio);
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovToolbarAdditionalButtons] |