83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import { Component, OnInit } from "@angular/core";
|
|
import { HttpClient } from "@angular/common/http";
|
|
import { lastValueFrom } from "rxjs";
|
|
|
|
import { TokenModel, OpenViduService } from "openvidu-angular";
|
|
|
|
@Component({
|
|
selector: "app-root",
|
|
template: `
|
|
<ov-videoconference
|
|
*ngIf="connected"
|
|
[tokens]="tokens"
|
|
[toolbarDisplaySessionName]="false">
|
|
<div *ovParticipantPanelItemElements="let participant">
|
|
<button *ngIf="participant.local" (click)="leaveSession()">
|
|
Leave
|
|
</button>
|
|
</div>
|
|
</ov-videoconference>
|
|
<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>
|
|
`,
|
|
styles: []
|
|
})
|
|
export class AppComponent implements OnInit {
|
|
|
|
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
|
|
|
|
sessionId = "participants-panel-directive-example";
|
|
tokens!: TokenModel;
|
|
|
|
connected = true;
|
|
|
|
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
|
|
|
|
async ngOnInit() {
|
|
this.tokens = {
|
|
webcam: await this.getToken(),
|
|
screen: await this.getToken(),
|
|
};
|
|
}
|
|
|
|
leaveSession() {
|
|
this.openviduService.disconnect();
|
|
this.connected = false;
|
|
}
|
|
|
|
/**
|
|
* --------------------------------------------
|
|
* GETTING A TOKEN FROM YOUR APPLICATION SERVER
|
|
* --------------------------------------------
|
|
* The methods below request the creation of a Session and a Token to
|
|
* your application server. This keeps your OpenVidu deployment secure.
|
|
*
|
|
* In this sample code, there is no user control at all. Anybody could
|
|
* access your application server endpoints! In a real production
|
|
* environment, your application server must identify the user to allow
|
|
* access to the endpoints.
|
|
*
|
|
* Visit https://docs.openvidu.io/en/stable/application-server to learn
|
|
* more about the integration of OpenVidu in your application server.
|
|
*/
|
|
|
|
async getToken(): Promise<string> {
|
|
const sessionId = await this.createSession(this.sessionId);
|
|
return await this.createToken(sessionId);
|
|
}
|
|
|
|
createSession(sessionId: string): Promise<string> {
|
|
return lastValueFrom(this.httpClient.post(
|
|
this.APPLICATION_SERVER_URL + 'api/sessions',
|
|
{ customSessionId: sessionId },
|
|
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
|
));
|
|
}
|
|
|
|
createToken(sessionId: string): Promise<string> {
|
|
return lastValueFrom(this.httpClient.post(
|
|
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
|
|
{},
|
|
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
|
|
));
|
|
}
|
|
} |