projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovChatPanel directive allows to replace the default chat panel template with a custom one. In the example below we replace the chat template in a few lines of code.
You can run the associated tutorial here.
<ov-videoconference
(onSessionCreated)="onSessionCreated($event)"
[tokens]="tokens"
[toolbarDisplaySessionName]="false">
<div *ovChatPanel id="my-panel">
<h3>Chat</h3>
<div>
<ul>
<li *ngFor="let msg of messages">{{ msg }}</li>
</ul>
</div>
<input value="Hello" #input />
<button (click)="send(input.value)">Send</button>
</div>
</ov-videoconference>As we need to get the openvidu-browser Session
object for sending messages to others, we can get it from the onSessionCreated event fired by the VideoconferenceComponent
when the session has been created.
Once we have the session created, we can use the signal method to send our messages.
export class ChatPanelDirectiveComponent {
sessionId = "chat-panel-directive-example";
tokens!: TokenModel;
session!: Session;
messages: string[] = [];
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken(),
};
}
onSessionCreated(session: Session) {
this.session = session;
this.session.on(`signal:${Signal.CHAT}`, (event: any) => {
const msg = JSON.parse(event.data).message;
this.messages.push(msg);
});
}
send(message: string): void {
const signalOptions: SignalOptions = {
data: JSON.stringify({ message }),
type: Signal.CHAT,
to: undefined,
};
this.session.signal(signalOptions);
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovChatPanel] |
Properties |
|
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public template |
Type : TemplateRef<any>
|
| Public viewContainer |
Type : ViewContainerRef
|