projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovToolbarAdditionalPanelButtons directive allows to add additional panel buttons to the toolbar. In the example below we've added a simple button without any functionality. To learn how to toggle the panel check the AdditionalPanelsDirective.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button (click)="onButtonClicked()">MY PANEL</button>
</div>
</ov-videoconference>export class ToolbarAdditionalPanelButtonsDirectiveComponent {
sessionId = "toolbar-additionalPanelbtn";
tokens!: TokenModel;
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken(),
};
}
onButtonClicked() {
alert('button clicked');
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovToolbarAdditionalPanelButtons] |