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

openvidu-components: Fixed tutorials

Browse Source
This commit is contained in:
csantosm 2022-07-04 16:26:11 +02:00
parent 0a5801a364
commit 696cde2777
29 changed files with 194671 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15908
openvidu-components/openvidu-additional-panels/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,39 +1,40 @@
import { Component } from '@angular/core'; import { Component } from "@angular/core";
import { TokenModel, PanelService, PanelType } from 'openvidu-angular'; import { TokenModel, PanelService, PanelType } from "openvidu-angular";
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from "@angular/common/http";
@Component({ @Component({
selector: 'app-root', selector: "app-root",
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false"> <ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;"> <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button mat-icon-button (click)="toggleMyPanel('my-panel')"> <button mat-icon-button (click)="toggleMyPanel('my-panel')">
<mat-icon>360</mat-icon> <mat-icon>360</mat-icon>
</button> </button>
<button mat-icon-button (click)="toggleMyPanel('my-panel2')"> <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
<mat-icon>star</mat-icon> <mat-icon>star</mat-icon>
</button> </button>
</div> </div>
<div *ovAdditionalPanels id="my-panels"> <div *ovAdditionalPanels id="my-panels">
<div id="my-panel1" *ngIf="showExternalPanel"> <div id="my-panel1" *ngIf="showExternalPanel">
<h2>NEW PANEL</h2> <h2>NEW PANEL</h2>
<p>This is my new additional panel</p> <p>This is my new additional panel</p>
</div> </div>
<div id="my-panel2" *ngIf="showExternalPanel2"> <div id="my-panel2" *ngIf="showExternalPanel2">
<h2>NEW PANEL 2</h2> <h2>NEW PANEL 2</h2>
<p>This is other new panel</p> <p>This is other new panel</p>
</div> </div>
</div> </div>
</ov-videoconference> </ov-videoconference>
`, `,
styles: [ styles: [
` `
#my-panels { #my-panels {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
#my-panel1, #my-panel2 { #my-panel1,
#my-panel2 {
text-align: center; text-align: center;
height: calc(100% - 40px); height: calc(100% - 40px);
margin: 20px; margin: 20px;
@ -44,44 +45,45 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
#my-panel2 { #my-panel2 {
background: #ddf2ff; background: #ddf2ff;
} }
` `,
] ],
}) })
export class AppComponent { export class AppComponent {
title = 'openvidu-additional-panels'; title = "openvidu-additional-panels";
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'toolbar-additionalbtn-directive-example'; sessionId = "toolbar-additionalbtn-directive-example";
OPENVIDU_SERVER_URL = 'https://localhost:4443'; OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = 'MY_SECRET'; OPENVIDU_SERVER_SECRET = "MY_SECRET";
showExternalPanel: boolean = false; showExternalPanel: boolean = false;
showExternalPanel2: boolean = false; showExternalPanel2: boolean = false;
constructor( constructor(
private httpClient: HttpClient, private httpClient: HttpClient,
private panelService: PanelService private panelService: PanelService
) {} ) {}
ngOnInit() { ngOnInit() {
this.subscribeToPanelToggling(); this.subscribeToPanelToggling();
}
subscribeToPanelToggling() {
this.panelService.panelOpenedObs.subscribe((ev: { opened: boolean; type?: PanelType | string }) => {
this.showExternalPanel = ev.opened && ev.type === 'my-panel';
this.showExternalPanel2 = ev.opened && ev.type === 'my-panel2';
});
}
async onJoinButtonClicked() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken(),
}; };
} }
subscribeToPanelToggling() {
this.panelService.panelOpenedObs.subscribe(
(ev: { opened: boolean; type?: PanelType | string }) => {
this.showExternalPanel = ev.opened && ev.type === "my-panel";
this.showExternalPanel2 = ev.opened && ev.type === "my-panel2";
}
);
}
toggleMyPanel(type: string) { toggleMyPanel(type: string) {
this.panelService.togglePanel(type); this.panelService.togglePanel(type);
} }
/** /**
* -------------------------- * --------------------------
* SERVER-SIDE RESPONSIBILITY * SERVER-SIDE RESPONSIBILITY
* -------------------------- * --------------------------
@ -104,19 +106,25 @@ export class AppComponent {
const body = JSON.stringify({ customSessionId: sessionId }); const body = JSON.stringify({ customSessionId: sessionId });
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), Authorization:
'Content-Type': 'application/json' "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
}) "Content-Type": "application/json",
}),
}; };
return this.httpClient return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) .post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe( .pipe(
catchError((error) => { catchError((error) => {
if (error.status === 409) { if (error.status === 409) {
resolve(sessionId); resolve(sessionId);
} else { } else {
console.warn( console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL "No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
); );
if ( if (
window.confirm( window.confirm(
@ -128,7 +136,9 @@ export class AppComponent {
'"' '"'
) )
) { ) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
} }
} }
return observableThrowError(error); return observableThrowError(error);
@ -136,7 +146,7 @@ export class AppComponent {
) )
.subscribe((response: any) => { .subscribe((response: any) => {
console.log(response); console.log(response);
resolve(response['id']); resolve(response["id"]);
}); });
}); });
} }
@ -146,12 +156,20 @@ export class AppComponent {
const body = {}; const body = {};
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), Authorization:
'Content-Type': 'application/json' "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
}) "Content-Type": "application/json",
}),
}; };
return this.httpClient return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) .post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe( .pipe(
catchError((error) => { catchError((error) => {
reject(error); reject(error);
@ -160,10 +178,8 @@ export class AppComponent {
) )
.subscribe((response: any) => { .subscribe((response: any) => {
console.log(response); console.log(response);
resolve(response['token']); resolve(response["token"]);
}); });
}); });
} }
} }

15908
openvidu-components/openvidu-custom-chat-panel/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -9,7 +9,6 @@ import { Session, SignalOptions } from "openvidu-browser";
selector: "app-root", selector: "app-root",
template: ` template: `
<ov-videoconference <ov-videoconference
(onJoinButtonClicked)="onJoinButtonClicked()"
(onSessionCreated)="onSessionCreated($event)" (onSessionCreated)="onSessionCreated($event)"
[tokens]="tokens" [tokens]="tokens"
[toolbarDisplaySessionName]="false" [toolbarDisplaySessionName]="false"
@ -37,7 +36,7 @@ import { Session, SignalOptions } from "openvidu-browser";
`, `,
], ],
}) })
export class AppComponent { export class AppComponent implements OnInit{
title = "openvidu-custom-chat-panel"; title = "openvidu-custom-chat-panel";
tokens!: TokenModel; tokens!: TokenModel;
sessionId = "chat-panel-directive-example"; sessionId = "chat-panel-directive-example";
@ -47,7 +46,7 @@ export class AppComponent {
messages: string[] = []; messages: string[] = [];
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken(), screen: await this.getToken(),

15908
openvidu-components/openvidu-custom-layout/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -8,10 +8,7 @@ import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvi
@Component({ @Component({
selector: "app-root", selector: "app-root",
template: ` template: `
<ov-videoconference <ov-videoconference [tokens]="tokens">
(onJoinButtonClicked)="onJoinButtonClicked()"
[tokens]="tokens"
>
<div *ovLayout> <div *ovLayout>
<div class="container"> <div class="container">
<div class="item" *ngFor="let stream of localParticipant | streams"> <div class="item" *ngFor="let stream of localParticipant | streams">
@ -41,7 +38,7 @@ import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvi
`, `,
], ],
}) })
export class AppComponent { export class AppComponent implements OnInit{
title = "openvidu-custom-layout"; title = "openvidu-custom-layout";
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'layout-directive-example'; sessionId = 'layout-directive-example';
@ -56,9 +53,13 @@ export class AppComponent {
ngOnInit(): void { ngOnInit(): void {
this.subscribeToParticipants(); this.subscribeToParticipants();
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
} }
ngOnDestroy() { async ngOnDestroy() {
this.localParticipantSubs.unsubscribe(); this.localParticipantSubs.unsubscribe();
this.remoteParticipantsSubs.unsubscribe(); this.remoteParticipantsSubs.unsubscribe();
} }
@ -72,13 +73,6 @@ export class AppComponent {
}); });
} }
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
/** /**
* -------------------------- * --------------------------
* SERVER-SIDE RESPONSIBILITY * SERVER-SIDE RESPONSIBILITY

15908
openvidu-components/openvidu-custom-panels/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,23 +1,25 @@
import { Component } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from "@angular/common/http";
import { TokenModel } from 'openvidu-angular'; import { TokenModel } from "openvidu-angular";
@Component({ @Component({
selector: 'app-root', selector: "app-root",
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> <ov-videoconference [tokens]="tokens">
<ov-panel *ovPanel> <ov-panel *ovPanel>
<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div> <div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
<div *ovParticipantsPanel id="my-participants-panel">This is my custom participants panel</div> <div *ovParticipantsPanel id="my-participants-panel">
This is my custom participants panel
</div>
</ov-panel> </ov-panel>
</ov-videoconference> </ov-videoconference>
`,
`, styles: [
styles: [ `
` #my-chat-panel,
#my-chat-panel, #my-participants-panel { #my-participants-panel {
text-align: center; text-align: center;
height: calc(100% - 40px); height: calc(100% - 40px);
margin: 20px; margin: 20px;
@ -28,26 +30,26 @@ import { TokenModel } from 'openvidu-angular';
#my-participants-panel { #my-participants-panel {
background: #ddf2ff; background: #ddf2ff;
} }
` `,
] ],
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'openvidu-custom-panels'; title = "openvidu-custom-panels";
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'panel-directive-example'; sessionId = "panel-directive-example";
OPENVIDU_SERVER_URL = 'https://localhost:4443'; OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = 'MY_SECRET'; OPENVIDU_SERVER_SECRET = "MY_SECRET";
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken(),
}; };
} }
/** /**
* -------------------------- * --------------------------
* SERVER-SIDE RESPONSIBILITY * SERVER-SIDE RESPONSIBILITY
* -------------------------- * --------------------------
@ -70,19 +72,25 @@ export class AppComponent {
const body = JSON.stringify({ customSessionId: sessionId }); const body = JSON.stringify({ customSessionId: sessionId });
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), Authorization:
'Content-Type': 'application/json' "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
}) "Content-Type": "application/json",
}),
}; };
return this.httpClient return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) .post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe( .pipe(
catchError((error) => { catchError((error) => {
if (error.status === 409) { if (error.status === 409) {
resolve(sessionId); resolve(sessionId);
} else { } else {
console.warn( console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL "No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
); );
if ( if (
window.confirm( window.confirm(
@ -94,7 +102,9 @@ export class AppComponent {
'"' '"'
) )
) { ) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
} }
} }
return observableThrowError(error); return observableThrowError(error);
@ -102,7 +112,7 @@ export class AppComponent {
) )
.subscribe((response: any) => { .subscribe((response: any) => {
console.log(response); console.log(response);
resolve(response['id']); resolve(response["id"]);
}); });
}); });
} }
@ -112,12 +122,20 @@ export class AppComponent {
const body = {}; const body = {};
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), Authorization:
'Content-Type': 'application/json' "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
}) "Content-Type": "application/json",
}),
}; };
return this.httpClient return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) .post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe( .pipe(
catchError((error) => { catchError((error) => {
reject(error); reject(error);
@ -126,9 +144,8 @@ export class AppComponent {
) )
.subscribe((response: any) => { .subscribe((response: any) => {
console.log(response); console.log(response);
resolve(response['token']); resolve(response["token"]);
}); });
}); });
} }
} }

15908
openvidu-components/openvidu-custom-participant-panel-item-elements/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs"; import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http"; import { HttpClient, HttpHeaders } from "@angular/common/http";
@ -9,7 +9,6 @@ import { OpenViduService, TokenModel } from "openvidu-angular";
template: ` template: `
<ov-videoconference <ov-videoconference
*ngIf="connected" *ngIf="connected"
(onJoinButtonClicked)="onJoinButtonClicked()"
[tokens]="tokens" [tokens]="tokens"
[toolbarDisplaySessionName]="false" [toolbarDisplaySessionName]="false"
> >
@ -24,7 +23,7 @@ import { OpenViduService, TokenModel } from "openvidu-angular";
`, `,
styles: [], styles: [],
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = "openvidu-custom-participant-panel-item-elements"; title = "openvidu-custom-participant-panel-item-elements";
tokens!: TokenModel; tokens!: TokenModel;
connected = true; connected = true;
@ -37,7 +36,7 @@ export class AppComponent {
private openviduService: OpenViduService private openviduService: OpenViduService
) {} ) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken(), screen: await this.getToken(),

15939
openvidu-components/openvidu-custom-participant-panel-item/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { TokenModel } from 'openvidu-angular'; import { TokenModel } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -7,7 +7,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false"> <ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantPanelItem="let participant" style="display: flex"> <div *ovParticipantPanelItem="let participant" style="display: flex">
<p>{{ participant.nickname }}</p> <p>{{ participant.nickname }}</p>
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button> <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
@ -20,7 +20,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
`, `,
styles: [] styles: []
}) })
export class AppComponent { export class AppComponent implements OnInit{
title = 'openvidu-custom-participant-panel-item'; title = 'openvidu-custom-participant-panel-item';
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'participants-panel-directive-example'; sessionId = 'participants-panel-directive-example';
@ -29,7 +29,7 @@ export class AppComponent {
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken()

15908
openvidu-components/openvidu-custom-participants-panel/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular'; import { ParticipantAbstractModel, ParticipantService, TokenModel } from 'openvidu-angular';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from 'rxjs';
@ -8,7 +8,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false"> <ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantsPanel id="my-panel"> <div *ovParticipantsPanel id="my-panel">
<ul id="local"> <ul id="local">
<li>{{localParticipant.nickname}}</li> <li>{{localParticipant.nickname}}</li>
@ -37,7 +37,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
` `
] ]
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'openvidu-custom-participants-panel'; title = 'openvidu-custom-participants-panel';
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'participants-panel-directive-example'; sessionId = 'participants-panel-directive-example';
@ -53,8 +53,12 @@ export class AppComponent {
private participantService: ParticipantService private participantService: ParticipantService
) {} ) {}
ngOnInit(): void { async ngOnInit() {
this.subscribeToParticipants(); this.subscribeToParticipants();
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
} }
ngOnDestroy() { ngOnDestroy() {
@ -62,13 +66,6 @@ export class AppComponent {
this.remoteParticipantsSubs.unsubscribe(); this.remoteParticipantsSubs.unsubscribe();
} }
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
subscribeToParticipants() { subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => { this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p; this.localParticipant = p;

15908
openvidu-components/openvidu-custom-stream/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { TokenModel } from 'openvidu-angular'; import { TokenModel } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -6,7 +6,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> <ov-videoconference [tokens]="tokens">
<div *ovStream="let stream"> <div *ovStream="let stream">
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream> <ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
<p>{{ stream.participant.nickname }}</p> <p>{{ stream.participant.nickname }}</p>
@ -25,7 +25,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
` `
] ]
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'openvidu-custom-stream'; title = 'openvidu-custom-stream';
tokens!: TokenModel; tokens!: TokenModel;
@ -35,7 +35,7 @@ export class AppComponent {
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken()

17222
openvidu-components/openvidu-custom-toolbar/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { OpenViduService, TokenModel } from 'openvidu-angular'; import { OpenViduService, TokenModel } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -7,7 +7,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens"> <ov-videoconference [tokens]="tokens">
<div *ovToolbar style="text-align: center;"> <div *ovToolbar style="text-align: center;">
<button (click)="toggleVideo()">Toggle Video</button> <button (click)="toggleVideo()">Toggle Video</button>
<button (click)="toggleAudio()">Toggle Audio</button> <button (click)="toggleAudio()">Toggle Audio</button>
@ -15,7 +15,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
</ov-videoconference> </ov-videoconference>
` `
}) })
export class AppComponent { export class AppComponent implements OnInit{
title = 'openvidu-custom-toolbar'; title = 'openvidu-custom-toolbar';
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'toolbar-directive-example'; sessionId = 'toolbar-directive-example';
@ -25,9 +25,7 @@ export class AppComponent {
publishAudio = true; publishAudio = true;
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {} constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
ngOnInit(): void {} async ngOnInit() {
async onJoinButtonClicked() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken()

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

@ -6,26 +6,19 @@ import { TokenModel } from 'openvidu-angular';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: ` <ov-videoconference [tokens]="tokens"></ov-videoconference> `,
<ov-videoconference styles: [''],
(onJoinButtonClicked)="onJoinButtonClicked()"
[tokens]="tokens"
></ov-videoconference>
`,
styleUrls: ['./app.component.scss'],
}) })
export class AppComponent { export class AppComponent {
title = 'openvidu-custom-ui'; title = 'openvidu-custom-ui';
tokens!: TokenModel; tokens!: TokenModel;
private sessionId = 'openvidu-toggle-hand'; private sessionId = 'openvidu-custom-ui';
private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443'; private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
private OPENVIDU_SERVER_SECRET = 'MY_SECRET'; private OPENVIDU_SERVER_SECRET = 'MY_SECRET';
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
ngOnInit() {} async ngOnInit() {
async onJoinButtonClicked() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken(), screen: await this.getToken(),

15908
openvidu-components/openvidu-panel-buttons/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,37 +1,40 @@
import { Component } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { TokenModel } from 'openvidu-angular'; import { TokenModel } from "openvidu-angular";
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from "@angular/common/http";
@Component({ @Component({
selector: 'app-root', selector: "app-root",
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false"> <ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;"> <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button>MY PANEL</button> <button (click)="onButtonClicked()">MY PANEL</button>
</div> </div>
</ov-videoconference> </ov-videoconference>
`,
`, styles: [],
styles: []
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'openvidu-panel-buttons'; title = "openvidu-panel-buttons";
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'toolbar-additionalPanelbtn'; sessionId = "toolbar-additionalPanelbtn";
OPENVIDU_SERVER_URL = 'https://localhost:4443'; OPENVIDU_SERVER_URL = "https://localhost:4443";
OPENVIDU_SERVER_SECRET = 'MY_SECRET'; OPENVIDU_SERVER_SECRET = "MY_SECRET";
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken(),
}; };
} }
/** onButtonClicked() {
alert('button clicked');
}
/**
* -------------------------- * --------------------------
* SERVER-SIDE RESPONSIBILITY * SERVER-SIDE RESPONSIBILITY
* -------------------------- * --------------------------
@ -54,19 +57,25 @@ export class AppComponent {
const body = JSON.stringify({ customSessionId: sessionId }); const body = JSON.stringify({ customSessionId: sessionId });
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), Authorization:
'Content-Type': 'application/json' "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
}) "Content-Type": "application/json",
}),
}; };
return this.httpClient return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions', body, options) .post(
this.OPENVIDU_SERVER_URL + "/openvidu/api/sessions",
body,
options
)
.pipe( .pipe(
catchError((error) => { catchError((error) => {
if (error.status === 409) { if (error.status === 409) {
resolve(sessionId); resolve(sessionId);
} else { } else {
console.warn( console.warn(
'No connection to OpenVidu Server. This may be a certificate error at ' + this.OPENVIDU_SERVER_URL "No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
); );
if ( if (
window.confirm( window.confirm(
@ -78,7 +87,9 @@ export class AppComponent {
'"' '"'
) )
) { ) {
location.assign(this.OPENVIDU_SERVER_URL + '/accept-certificate'); location.assign(
this.OPENVIDU_SERVER_URL + "/accept-certificate"
);
} }
} }
return observableThrowError(error); return observableThrowError(error);
@ -86,7 +97,7 @@ export class AppComponent {
) )
.subscribe((response: any) => { .subscribe((response: any) => {
console.log(response); console.log(response);
resolve(response['id']); resolve(response["id"]);
}); });
}); });
} }
@ -96,12 +107,20 @@ export class AppComponent {
const body = {}; const body = {};
const options = { const options = {
headers: new HttpHeaders({ headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET), Authorization:
'Content-Type': 'application/json' "Basic " + btoa("OPENVIDUAPP:" + this.OPENVIDU_SERVER_SECRET),
}) "Content-Type": "application/json",
}),
}; };
return this.httpClient return this.httpClient
.post(this.OPENVIDU_SERVER_URL + '/openvidu/api/sessions/' + sessionId + '/connection', body, options) .post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe( .pipe(
catchError((error) => { catchError((error) => {
reject(error); reject(error);
@ -110,10 +129,8 @@ export class AppComponent {
) )
.subscribe((response: any) => { .subscribe((response: any) => {
console.log(response); console.log(response);
resolve(response['token']); resolve(response["token"]);
}); });
}); });
} }
} }

10
openvidu-components/openvidu-toggle-hand/.browserslistrc Normal file
View File

@ -0,0 +1,10 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist

1
openvidu-components/openvidu-toggle-hand/.gitignore vendored
View File

@ -16,7 +16,6 @@ speed-measure-plugin*.json
# IDEs and editors # IDEs and editors
*.angular *.angular
*.browserslistrc
/.idea /.idea
.project .project
.classpath .classpath

18100
openvidu-components/openvidu-toggle-hand/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

8
openvidu-components/openvidu-toggle-hand/src/app/app.component.html
View File

@ -1,10 +1,4 @@
<ov-videoconference <ov-videoconference (onSessionCreated)="onSessionCreated($event)" [tokens]="tokens" [prejoin]="true">
(onJoinButtonClicked)="onJoinButtonClicked()"
(onSessionCreated)="onSessionCreated($event)"
[tokens]="tokens"
[prejoin]="true"
>
<div *ovToolbarAdditionalButtons> <div *ovToolbarAdditionalButtons>
<button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised"> <button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
<mat-icon matTooltip="Toggle hand">front_hand</mat-icon> <mat-icon matTooltip="Toggle hand">front_hand</mat-icon>

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

@ -44,13 +44,6 @@ export class AppComponent implements OnInit {
}; };
} }
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
onSessionCreated(session: Session) { onSessionCreated(session: Session) {
this.session = session; this.session = session;
this.handleRemoteHand(); this.handleRemoteHand();

15908
openvidu-components/openvidu-toolbar-buttons/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { OpenViduService, TokenModel, ParticipantService } from 'openvidu-angular'; import { OpenViduService, TokenModel, ParticipantService } from 'openvidu-angular';
import { catchError, throwError as observableThrowError } from 'rxjs'; import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -6,7 +6,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
template: ` template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false"> <ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalButtons style="text-align: center;"> <div *ovToolbarAdditionalButtons style="text-align: center;">
<button mat-icon-button (click)="toggleVideo()"> <button mat-icon-button (click)="toggleVideo()">
<mat-icon>videocam</mat-icon> <mat-icon>videocam</mat-icon>
@ -19,7 +19,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
`, `,
styles: [] styles: []
}) })
export class AppComponent { export class AppComponent implements OnInit {
title = 'openvidu-toolbar-buttons'; title = 'openvidu-toolbar-buttons';
tokens!: TokenModel; tokens!: TokenModel;
sessionId = 'toolbar-additionalbtn-directive-example'; sessionId = 'toolbar-additionalbtn-directive-example';
@ -32,7 +32,7 @@ export class AppComponent {
private participantService: ParticipantService private participantService: ParticipantService
) {} ) {}
async onJoinButtonClicked() { async ngOnInit() {
this.tokens = { this.tokens = {
webcam: await this.getToken(), webcam: await this.getToken(),
screen: await this.getToken() screen: await this.getToken()

1
openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts
View File

@ -22,7 +22,6 @@ const config: OpenViduAngularConfig = {
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
OpenViduAngularModule.forRoot(config) OpenViduAngularModule.forRoot(config)
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]