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

openvidu-components: Updated samples

Browse Source
This commit is contained in:
csantosm 2022-04-29 13:22:29 +02:00
parent 0400106b20
commit 4e69fd7e19
5 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,8 +8,12 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
<button (click)="toggleMyPanel('my-panel')">MY PANEL</button>
<button (click)="toggleMyPanel('my-panel2')">OTHER PANEL</button>
<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">

4
openvidu-components/openvidu-additional-panels/src/app/app.module.ts
View File

@ -5,6 +5,8 @@ import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
import { environment } from 'src/environments/environment';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
const config: OpenViduAngularConfig = {
production: environment.production
@ -17,6 +19,8 @@ const config: OpenViduAngularConfig = {
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
OpenViduAngularModule.forRoot(config)
],
providers: [],

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

@ -1,43 +1,55 @@
import { Component } from '@angular/core';
import { catchError, throwError as observableThrowError } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { OpenViduService, TokenModel } from 'openvidu-angular';
import { Component } from "@angular/core";
import { catchError, throwError as observableThrowError } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { OpenViduService, TokenModel } from "openvidu-angular";
@Component({
selector: 'app-root',
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
selector: "app-root",
template: `
<ov-videoconference
*ngIf="connected"
(onJoinButtonClicked)="onJoinButtonClicked()"
[tokens]="tokens"
[toolbarDisplaySessionName]="false"
>
<div *ovParticipantPanelItemElements="let participant">
<button *ngIf="participant.local" (click)="leaveSession()">Leave</button>
<button *ngIf="participant.local" (click)="leaveSession()">
Leave
</button>
</div>
</ov-videoconference>
`,
styles: []
<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>
`,
styles: [],
})
export class AppComponent {
title = 'openvidu-custom-participant-panel-item-elements';
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;
sessionId = 'participants-panel-directive-example';
OPENVIDU_SERVER_URL = 'https://localhost:4443';
OPENVIDU_SERVER_SECRET = 'MY_SECRET';
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) {}
constructor(
private httpClient: HttpClient,
private openviduService: OpenViduService
) {}
async onJoinButtonClicked() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
screen: await this.getToken(),
};
}
leaveSession() {
this.openviduService.disconnect();
this.connected = false;
}
/**
/**
* --------------------------
* SERVER-SIDE RESPONSIBILITY
* --------------------------
@ -60,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(
@ -84,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);
@ -92,7 +112,7 @@ export class AppComponent {
)
.subscribe((response: any) => {
console.log(response);
resolve(response['id']);
resolve(response["id"]);
});
});
}
@ -102,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);
@ -116,10 +144,8 @@ export class AppComponent {
)
.subscribe((response: any) => {
console.log(response);
resolve(response['token']);
resolve(response["token"]);
});
});
}
}

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

@ -8,8 +8,12 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
template: `
<ov-videoconference (onJoinButtonClicked)="onJoinButtonClicked()" [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovToolbarAdditionalButtons style="text-align: center;">
<button (click)="toggleVideo()">Toggle Video</button>
<button (click)="toggleAudio()">Toggle Audio</button>
<button mat-icon-button (click)="toggleVideo()">
<mat-icon>videocam</mat-icon>
</button>
<button mat-icon-button (click)="toggleAudio()">
<mat-icon>mic</mat-icon>
</button>
</div>
</ov-videoconference>
`,

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

@ -5,6 +5,8 @@ import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
import { environment } from 'src/environments/environment';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
const config: OpenViduAngularConfig = {
production: environment.production
@ -17,6 +19,8 @@ const config: OpenViduAngularConfig = {
imports: [
BrowserModule,
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
OpenViduAngularModule.forRoot(config)
],