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

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 { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { TokenModel } from 'openvidu-angular';
import { TokenModel } from "openvidu-angular";
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
selector: "app-root",
template: `
<ov-videoconference [tokens]="tokens">
<ov-panel *ovPanel>
<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-videoconference>
`,
styles: [
`
#my-chat-panel, #my-participants-panel {
`,
styles: [
`
#my-chat-panel,
#my-participants-panel {
text-align: center;
height: calc(100% - 40px);
margin: 20px;
@ -28,26 +30,26 @@ import { TokenModel } from 'openvidu-angular';
#my-participants-panel {
background: #ddf2ff;
}
`
]
`,
],
})
export class AppComponent {
title = 'openvidu-custom-panels';
tokens!: TokenModel;
sessionId = 'panel-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
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) {}
constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
screen: await this.getToken(),
};
}
/**
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
@ -70,19 +72,25 @@ export class AppComponent {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
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)
.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
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
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);
@ -102,7 +112,7 @@ export class AppComponent {
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
resolve(response["id"]);
});
});
}
@ -112,12 +122,20 @@ export class AppComponent {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
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)
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
@ -126,9 +144,8 @@ export class AppComponent {
)
.subscribe((response: any) => {
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 { HttpClient, HttpHeaders } from "@angular/common/http";
@ -9,7 +9,6 @@ import { OpenViduService, TokenModel } from "openvidu-angular";
template: `
<ov-videoconference
*ngIf="connected"
(onJoinButtonClicked)="onJoinButtonClicked()"
[tokens]="tokens"
[toolbarDisplaySessionName]="false"
>
@ -24,7 +23,7 @@ import { OpenViduService, TokenModel } from "openvidu-angular";
`,
styles: [],
})
export class AppComponent {
export class AppComponent implements OnInit {
title = "openvidu-custom-participant-panel-item-elements";
tokens!: TokenModel;
connected = true;
@ -37,7 +36,7 @@ export class AppComponent {
private openviduService: OpenViduService
) {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: 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 { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -7,7 +7,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantPanelItem="let participant" style="display: flex">
<p>{{ participant.nickname }}</p>
<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: []
})
export class AppComponent {
export class AppComponent implements OnInit{
title = 'openvidu-custom-participant-panel-item';
tokens!: TokenModel;
sessionId = 'participants-panel-directive-example';
@ -29,7 +29,7 @@ export class AppComponent {
constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: 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 { Subscription } from 'rxjs';
import { catchError, throwError as observableThrowError } from 'rxjs';
@ -8,7 +8,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantsPanel id="my-panel">
<ul id="local">
<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';
tokens!: TokenModel;
sessionId = 'participants-panel-directive-example';
@ -53,8 +53,12 @@ export class AppComponent {
private participantService: ParticipantService
) {}
ngOnInit(): void {
async ngOnInit() {
this.subscribeToParticipants();
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
ngOnDestroy() {
@ -62,13 +66,6 @@ export class AppComponent {
this.remoteParticipantsSubs.unsubscribe();
}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((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 { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -6,7 +6,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<ov-videoconference [tokens]="tokens">
<div *ovStream="let stream">
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
<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';
tokens!: TokenModel;
@ -35,7 +35,7 @@ export class AppComponent {
constructor(private httpClient: HttpClient) {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: 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 { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -7,7 +7,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens">
<ov-videoconference [tokens]="tokens">
<div *ovToolbar style="text-align: center;">
<button (click)="toggleVideo()">Toggle Video</button>
<button (click)="toggleAudio()">Toggle Audio</button>
@ -15,7 +15,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
</ov-videoconference>
`
})
export class AppComponent {
export class AppComponent implements OnInit{
title = 'openvidu-custom-toolbar';
tokens!: TokenModel;
sessionId = 'toolbar-directive-example';
@ -25,9 +25,7 @@ export class AppComponent {
publishAudio = true;
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
ngOnInit(): void {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: 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({
selector: 'app-root',
template: `
<ov-videoconference
(onJoinButtonClicked)="onJoinButtonClicked()"
[tokens]="tokens"
></ov-videoconference>
`,
styleUrls: ['./app.component.scss'],
template: ` <ov-videoconference [tokens]="tokens"></ov-videoconference> `,
styles: [''],
})
export class AppComponent {
title = 'openvidu-custom-ui';
tokens!: TokenModel;
private sessionId = 'openvidu-toggle-hand';
private sessionId = 'openvidu-custom-ui';
private OPENVIDU_SERVER_URL = 'https://' + location.hostname + ':4443';
private OPENVIDU_SERVER_SECRET = 'MY_SECRET';
constructor(private httpClient: HttpClient) {}
ngOnInit() {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: 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 { 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 { 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 (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
selector: "app-root",
template: `
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button>MY PANEL</button>
<button (click)="onButtonClicked()">MY PANEL</button>
</div>
</ov-videoconference>
`,
styles: []
`,
styles: [],
})
export class AppComponent {
title = 'openvidu-panel-buttons';
tokens!: TokenModel;
sessionId = 'toolbar-additionalPanelbtn';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
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) {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
screen: await this.getToken(),
};
}
/**
onButtonClicked() {
alert('button clicked');
}
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
@ -54,19 +57,25 @@ export class AppComponent {
const body = JSON.stringify({ customSessionId: sessionId });
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
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)
.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
"No connection to OpenVidu Server. This may be a certificate error at " +
this.OPENVIDU_SERVER_URL
);
if (
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);
@ -86,7 +97,7 @@ export class AppComponent {
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
resolve(response["id"]);
});
});
}
@ -96,12 +107,20 @@ export class AppComponent {
const body = {};
const options = {
headers: new HttpHeaders({
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + this.OPENVIDU_SERVER_SECRET),
'Content-Type': 'application/json'
})
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)
.post(
this.OPENVIDU_SERVER_URL +
"/openvidu/api/sessions/" +
sessionId +
"/connection",
body,
options
)
.pipe(
catchError((error) => {
reject(error);
@ -110,10 +129,8 @@ export class AppComponent {
)
.subscribe((response: any) => {
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
*.angular
*.browserslistrc
/.idea
.project
.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
(onJoinButtonClicked)="onJoinButtonClicked()"
(onSessionCreated)="onSessionCreated($event)"
[tokens]="tokens"
[prejoin]="true"
>
<ov-videoconference (onSessionCreated)="onSessionCreated($event)" [tokens]="tokens" [prejoin]="true">
<div *ovToolbarAdditionalButtons>
<button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
<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) {
this.session = session;
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 { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@ -6,7 +6,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalButtons style="text-align: center;">
<button mat-icon-button (click)="toggleVideo()">
<mat-icon>videocam</mat-icon>
@ -19,7 +19,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
`,
styles: []
})
export class AppComponent {
export class AppComponent implements OnInit {
title = 'openvidu-toolbar-buttons';
tokens!: TokenModel;
sessionId = 'toolbar-additionalbtn-directive-example';
@ -32,7 +32,7 @@ export class AppComponent {
private participantService: ParticipantService
) {}
async onJoinButtonClicked() {
async ngOnInit() {
this.tokens = {
webcam: 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,
MatIconModule,
OpenViduAngularModule.forRoot(config)
],
providers: [],
bootstrap: [AppComponent]