neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update all openvidu-components to use a server application

Browse Source
This commit is contained in:
pabloFuente 2022-08-04 18:13:53 +02:00
parent 5c6e052efa
commit 38145508e6
16 changed files with 592 additions and 1375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
openvidu-components/openvidu-additional-panels/src/app/app.component.ts
View File

@ -1,7 +1,8 @@
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel, PanelService, PanelType } from "openvidu-angular";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
@Component({
selector: "app-root",
@ -27,8 +28,7 @@ import { HttpClient, HttpHeaders } from "@angular/common/http";
</div>
</ov-videoconference>
`,
styles: [
`
styles: [`
#my-panels {
height: 100%;
overflow: hidden;
@ -45,15 +45,15 @@ import { HttpClient, HttpHeaders } from "@angular/common/http";
#my-panel2 {
background: #ddf2ff;
}
`,
],
`]
})
export class AppComponent {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = "openvidu-additional-panels";
tokens!: TokenModel;
sessionId = "toolbar-additionalbtn-directive-example";
OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = "MY_SECRET";
tokens!: TokenModel;
showExternalPanel: boolean = false;
showExternalPanel2: boolean = false;
@ -61,9 +61,9 @@ export class AppComponent {
constructor(
private httpClient: HttpClient,
private panelService: PanelService
) {}
) { }
ngOnInit() {
async ngOnInit() {
this.subscribeToPanelToggling();
this.tokens = {
webcam: await this.getToken(),
@ -84,102 +84,39 @@ export class AppComponent {
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["id"]);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["token"]);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

2
openvidu-components/openvidu-custom-activities-panel/package.json
View File

@ -19,7 +19,7 @@
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"openvidu-angular": "file:openvidu-angular-2.22.0.tgz",
"openvidu-angular": "2.22.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"

142
openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel } from "openvidu-angular";
@ -10,8 +10,7 @@ import { TokenModel } from "openvidu-angular";
<ov-videoconference
[tokens]="tokens"
[toolbarRecordingButton]="false"
[toolbarDisplaySessionName]="false"
>
[toolbarDisplaySessionName]="false">
<div *ovActivitiesPanel id="my-panel">
<h3>ACTIVITIES</h3>
<div>
@ -20,24 +19,24 @@ import { TokenModel } from "openvidu-angular";
</div>
</ov-videoconference>
`,
styles: [
`
styles: [`
#my-panel {
background: #aafffc;
height: 100%;
overflow: hidden;
text-align: center;
}
`,
],
`]
})
export class AppComponent implements OnInit{
export class AppComponent implements OnInit {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = "openvidu-custom-activities-panel";
tokens!: TokenModel;
sessionId = "activities-panel-directive-example";
OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = "MY_SECRET";
constructor(private httpClient: HttpClient) {}
tokens!: TokenModel;
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
@ -47,102 +46,39 @@ export class AppComponent implements OnInit{
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["id"]);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["token"]);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

143
openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel, Signal } from "openvidu-angular";
import { Session, SignalOptions } from "openvidu-browser";
@ -11,8 +11,7 @@ import { Session, SignalOptions } from "openvidu-browser";
<ov-videoconference
(onSessionCreated)="onSessionCreated($event)"
[tokens]="tokens"
[toolbarDisplaySessionName]="false"
>
[toolbarDisplaySessionName]="false">
<div *ovChatPanel id="my-panel">
<h3>Chat</h3>
<div>
@ -25,26 +24,27 @@ import { Session, SignalOptions } from "openvidu-browser";
</div>
</ov-videoconference>
`,
styles: [
`
styles: [`
#my-panel {
background: #aafffc;
height: 100%;
overflow: hidden;
text-align: center;
}
`,
],
`]
})
export class AppComponent implements OnInit{
export class AppComponent implements OnInit {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = "openvidu-custom-chat-panel";
tokens!: TokenModel;
sessionId = "chat-panel-directive-example";
OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = "MY_SECRET";
tokens!: TokenModel;
session!: Session;
messages: string[] = [];
constructor(private httpClient: HttpClient) {}
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
@ -71,102 +71,39 @@ export class AppComponent implements OnInit{
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["id"]);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["token"]);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

133
openvidu-components/openvidu-custom-layout/src/app/app.component.ts
View File

@ -1,9 +1,8 @@
import { Component, OnInit } from "@angular/core";
import { Subscription } from 'rxjs';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClient } from "@angular/common/http";
import { Subscription, lastValueFrom } from "rxjs";
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
import { TokenModel, ParticipantService, ParticipantAbstractModel } from "openvidu-angular";
@Component({
selector: "app-root",
@ -14,7 +13,6 @@ import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvi
<div class="item" *ngFor="let stream of localParticipant | streams">
<ov-stream [stream]="stream"></ov-stream>
</div>
<div class="item" *ngFor="let stream of remoteParticipants | streams">
<ov-stream [stream]="stream"></ov-stream>
</div>
@ -22,36 +20,35 @@ import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvi
</div>
</ov-videoconference>
`,
styles: [
`
styles: [`
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 0 50%;
height: 250px;
margin-bottom: 2%;
}
`,
],
`]
})
export class AppComponent implements OnInit{
export class AppComponent implements OnInit {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = "openvidu-custom-layout";
tokens!: TokenModel;
sessionId = 'layout-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
tokens!: TokenModel;
localParticipant!: ParticipantAbstractModel;
remoteParticipants!: ParticipantAbstractModel[];
localParticipantSubs!: Subscription;
remoteParticipantsSubs!: Subscription;
constructor(private httpClient: HttpClient, private participantService: ParticipantService) {}
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
ngOnInit(): void {
async ngOnInit() {
this.subscribeToParticipants();
this.tokens = {
webcam: await this.getToken(),
@ -73,88 +70,40 @@ export class AppComponent implements OnInit{
});
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
/**
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

140
openvidu-components/openvidu-custom-panels/src/app/app.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel } from "openvidu-angular";
@ -16,8 +16,7 @@ import { TokenModel } from "openvidu-angular";
</ov-panel>
</ov-videoconference>
`,
styles: [
`
styles: [`
#my-chat-panel,
#my-participants-panel {
text-align: center;
@ -30,17 +29,17 @@ import { TokenModel } from "openvidu-angular";
#my-participants-panel {
background: #ddf2ff;
}
`,
],
`]
})
export class AppComponent implements OnInit {
title = "openvidu-custom-panels";
tokens!: TokenModel;
sessionId = "panel-directive-example";
OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = "MY_SECRET";
constructor(private httpClient: HttpClient) {}
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = "openvidu-custom-panels";
sessionId = "panel-directive-example";
tokens!: TokenModel;
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
@ -50,102 +49,39 @@ export class AppComponent implements OnInit {
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["id"]);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["token"]);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

141
openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts
View File

@ -1,8 +1,8 @@
import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { OpenViduService, TokenModel } from "openvidu-angular";
import { TokenModel, OpenViduService } from "openvidu-angular";
@Component({
selector: "app-root",
@ -10,31 +10,31 @@ import { OpenViduService, TokenModel } from "openvidu-angular";
<ov-videoconference
*ngIf="connected"
[tokens]="tokens"
[toolbarDisplaySessionName]="false"
>
[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: [],
styles: []
})
export class AppComponent implements OnInit {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = "openvidu-custom-participant-panel-item-elements";
tokens!: TokenModel;
connected = true;
sessionId = "participants-panel-directive-example";
OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = "MY_SECRET";
tokens!: TokenModel;
connected = true;
constructor(
private httpClient: HttpClient,
private openviduService: OpenViduService
) {}
) { }
async ngOnInit() {
this.tokens = {
@ -49,102 +49,39 @@ export class AppComponent implements OnInit {
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["id"]);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["token"]);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

134
openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts
View File

@ -1,12 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { TokenModel } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel } from "openvidu-angular";
@Component({
selector: 'app-root',
template: `
selector: 'app-root',
template: `
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantPanelItem="let participant" style="display: flex">
<p>{{ participant.nickname }}</p>
@ -18,16 +18,17 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
</div>
</ov-videoconference>
`,
styles: []
styles: []
})
export class AppComponent implements OnInit{
title = 'openvidu-custom-participant-panel-item';
tokens!: TokenModel;
sessionId = 'participants-panel-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
export class AppComponent implements OnInit {
constructor(private httpClient: HttpClient) {}
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = 'openvidu-custom-participant-panel-item';
sessionId = 'participants-panel-directive-example';
tokens!: TokenModel;
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
@ -36,89 +37,40 @@ export class AppComponent implements OnInit{
};
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
/**
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

139
openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts
View File

@ -1,28 +1,24 @@
import { Component, OnInit } from '@angular/core';
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
import { Subscription } from 'rxjs';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Subscription, lastValueFrom } from "rxjs";
import { ParticipantAbstractModel, ParticipantService, TokenModel } from "openvidu-angular";
@Component({
selector: 'app-root',
template: `
selector: 'app-root',
template: `
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantsPanel id="my-panel">
<ul id="local">
<li>{{localParticipant.nickname}}</li>
</ul>
<ul id="remote">
<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
</ul>
</div>
</ov-videoconference>
`,
styles: [
`
styles: [`
#my-panel {
background: #faff7f;
height: 100%;
@ -34,15 +30,16 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
#my-panel > #remote {
background: #7fb8ff;
}
`
]
`]
})
export class AppComponent implements OnInit {
title = 'openvidu-custom-participants-panel';
tokens!: TokenModel;
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = 'openvidu-custom-participants-panel';
sessionId = 'participants-panel-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
tokens!: TokenModel;
localParticipant!: ParticipantAbstractModel;
remoteParticipants!: ParticipantAbstractModel[];
localParticipantSubs!: Subscription;
@ -51,7 +48,7 @@ export class AppComponent implements OnInit {
constructor(
private httpClient: HttpClient,
private participantService: ParticipantService
) {}
) { }
async ngOnInit() {
this.subscribeToParticipants();
@ -76,90 +73,40 @@ export class AppComponent implements OnInit {
});
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
/**
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

144
openvidu-components/openvidu-custom-stream/src/app/app.component.ts
View File

@ -1,39 +1,37 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<ov-videoconference [tokens]="tokens">
selector: 'app-root',
template: `
<ov-videoconference [tokens]="tokens">
<div *ovStream="let stream">
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
<p>{{ stream.participant.nickname }}</p>
</div>
</ov-videoconference>
`,
styles: [
`
p {
position: absolute;
bottom: 0;
border: 2px solid;
background: #000000;
}
`
]
styles: [`
p {
position: absolute;
bottom: 0;
border: 2px solid;
background: #000000;
}
`]
})
export class AppComponent implements OnInit {
title = 'openvidu-custom-stream';
tokens!: TokenModel;
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = 'openvidu-custom-stream';
sessionId = 'toolbar-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
tokens!: TokenModel;
constructor(private httpClient: HttpClient) {}
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
@ -42,88 +40,40 @@ export class AppComponent implements OnInit {
};
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
/**
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

129
openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts
View File

@ -1,11 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { OpenViduService, TokenModel } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { OpenViduService, TokenModel } from "openvidu-angular";
@Component({
selector: 'app-root',
selector: 'app-root',
template: `
<ov-videoconference [tokens]="tokens">
<div *ovToolbar style="text-align: center;">
@ -15,15 +15,18 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
</ov-videoconference>
`
})
export class AppComponent implements OnInit{
title = 'openvidu-custom-toolbar';
tokens!: TokenModel;
export class AppComponent implements OnInit {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = 'openvidu-custom-toolbar';
sessionId = 'toolbar-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
tokens!: TokenModel;
publishVideo = true;
publishAudio = true;
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
async ngOnInit() {
this.tokens = {
@ -42,88 +45,40 @@ export class AppComponent implements OnInit{
this.openviduService.publishAudio(this.publishAudio);
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
/**
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

142
openvidu-components/openvidu-custom-ui/src/app/app.component.ts
View File

@ -1,22 +1,23 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component } from '@angular/core';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel } from 'openvidu-angular';
import { TokenModel } from "openvidu-angular";
@Component({
selector: 'app-root',
template: ` <ov-videoconference [tokens]="tokens"></ov-videoconference> `,
styles: [''],
styles: ['']
})
export class AppComponent {
title = 'openvidu-custom-ui';
tokens!: TokenModel;
private sessionId = 'openvidu-custom-ui';
private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
private OPENVIDU_SERVER_SECRET = 'MY_SECRET';
constructor(private httpClient: HttpClient) {}
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = 'openvidu-custom-ui';
sessionId = 'openvidu-custom-ui';
tokens!: TokenModel;
constructor(private httpClient: HttpClient) { }
async ngOnInit() {
this.tokens = {
@ -26,106 +27,39 @@ export class AppComponent {
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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> {
try {
const sessionId = await this.createSession(this.sessionId);
return this.createToken(sessionId);
} catch (error) {
console.error(error);
return Promise.reject(error);
}
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json',
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions',
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + '/accept-certificate'
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json',
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
'/openvidu/api/sessions/' +
sessionId +
'/connection',
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

127
openvidu-components/openvidu-toggle-hand/src/app/app.component.ts
View File

@ -1,11 +1,12 @@
import { trigger, transition, style, animate } from '@angular/animations';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { ParticipantService, OpenViduService } from 'openvidu-angular';
import { ParticipantAppModel } from './models/participant-app.model';
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { trigger, transition, style, animate } from "@angular/animations";
import { lastValueFrom } from "rxjs";
import { Session, SignalOptions } from 'openvidu-browser';
import { ParticipantService, OpenViduService } from "openvidu-angular";
import { ParticipantAppModel } from "./models/participant-app.model";
import { Session, SignalOptions } from "openvidu-browser";
enum SignalApp {
HAND_TOGGLE = 'handToggle'
@ -29,14 +30,15 @@ enum SignalApp {
]
})
export class AppComponent implements OnInit {
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
tokens: { webcam: string; screen: string };
hasHandRaised: boolean = false;
session: Session;
private sessionId = 'openvidu-toggle-hand';
private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
private OPENVIDU_SERVER_SECRET = 'MY_SECRET';
constructor(private httpClient: HttpClient, private openviduService: OpenViduService, private participantService: ParticipantService) {}
constructor(private httpClient: HttpClient, private openviduService: OpenViduService, private participantService: ParticipantService) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
@ -84,86 +86,39 @@ export class AppComponent implements OnInit {
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId) {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response) => {
console.log(response);
resolve(response['id']);
});
});
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): Promise<string> {
return new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response) => {
console.log(response);
resolve(response['token']);
});
});
createToken(sessionId: string): Promise<string> {
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

137
openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts
View File

@ -1,11 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { OpenViduService, TokenModel, ParticipantService } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel, OpenViduService, ParticipantService } from "openvidu-angular";
@Component({
selector: 'app-root',
template: `
selector: 'app-root',
template: `
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalButtons style="text-align: center;">
<button mat-icon-button (click)="toggleVideo()">
@ -17,20 +18,21 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
</div>
</ov-videoconference>
`,
styles: []
styles: []
})
export class AppComponent implements OnInit {
title = 'openvidu-toolbar-buttons';
tokens!: TokenModel;
sessionId = 'toolbar-additionalbtn-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
constructor(
private httpClient: HttpClient,
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
title = 'openvidu-toolbar-buttons';
sessionId = 'toolbar-additionalbtn-directive-example';
tokens!: TokenModel;
constructor(
private httpClient: HttpClient,
private openviduService: OpenViduService,
private participantService: ParticipantService
) {}
) { }
async ngOnInit() {
this.tokens = {
@ -49,89 +51,40 @@ export class AppComponent implements OnInit {
this.openviduService.publishAudio(publishAudio);
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
/**
* --------------------------------------------
* 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.
*/
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
async getToken(): Promise<string> {
const sessionId = await this.createSession(this.sessionId);
return await this.createToken(sessionId);
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate');
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
});
});
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 new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
};
return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
});
});
return lastValueFrom(this.httpClient.post(
this.APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}
}

4
openvidu-components/openvidu-toolbar-panel-buttons/package-lock.json generated
View File

@ -1,11 +1,11 @@
{
"name": "openvidu-panel-buttons",
"name": "openvidu-toolbar-panel-buttons",
"version": "2.21.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "openvidu-panel-buttons",
"name": "openvidu-toolbar-panel-buttons",
"version": "2.21.0",
"dependencies": {
"@angular/animations": "~13.3.0",

171
openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts
View File

@ -1,136 +1,75 @@
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { lastValueFrom } from "rxjs";
import { TokenModel } from "openvidu-angular";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
@Component({
selector: "app-root",
template: `
selector: "app-root",
template: `
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button (click)="onButtonClicked()">MY PANEL</button>
</div>
</ov-videoconference>
`,
styles: [],
styles: []
})
export class AppComponent implements OnInit {
title = "openvidu-panel-buttons";
tokens!: TokenModel;
sessionId = "toolbar-additionalPanelbtn";
OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = "MY_SECRET";
constructor(private httpClient: HttpClient) {}
APPLICATION_SERVER_URL = window.location.protocol + '//' + window.location.hostname + ':5000/';
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken(),
};
}
title = "openvidu-panel-buttons";
sessionId = "toolbar-additionalPanelbtn";
tokens!: TokenModel;
onButtonClicked() {
alert('button clicked');
}
constructor(private httpClient: HttpClient) { }
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
* This method retrieve the mandatory user token from OpenVidu Server,
* in this case making use Angular http API.
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION. In this case:
* 1) Initialize a Session in OpenVidu Server (POST /openvidu/api/sessions)
* 2) Create a Connection in OpenVidu Server (POST /openvidu/api/sessions/<SESSION_ID>/connection)
* 3) The Connection.token must be consumed in Session.connect() method
*/
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken(),
};
}
getToken(): Promise<string> {
return this.createSession(this.sessionId).then((sessionId: string) => {
return this.createToken(sessionId);
});
}
onButtonClicked() {
alert('button clicked');
}
createSession(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe(
catchError((error) => {
if (error.status === 409) {
resolve(sessionId);
} else {
console.warn(
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
window.confirm(
'No connection to OpenVidu Server. This may be a certificate error at "' +
this.OPENVIDU_SERVER_URL +
'"\n\nClick OK to navigate and accept it. If no certificate warning is shown, then check that your OpenVidu Server' +
'is up and running at "' +
this.OPENVIDU_SERVER_URL +
'"'
)
) {
location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
}
}
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["id"]);
});
});
}
/**
* --------------------------------------------
* 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.
*/
createToken(sessionId: string): Promise<string> {
return new Promise((resolve, reject) => {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization:
"Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
"Content-Type": "application/json",
}),
};
return this.httpClient
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
return observableThrowError(error);
})
)
.subscribe((response: any) => {
console.log(response);
resolve(response["token"]);
});
});
}
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',
{ customSessionId: sessionId },
{ headers: { 'Content-Type': 'application/json' }, responseType: 'text' }
));
}
}