ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

openvidu-components: Updated testapp

pull/739/head
csantosm 2022-06-22 12:42:02 +02:00
parent 26f96761cd
commit fd45988bfc
9 changed files with 7619 additions and 2228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9561
openvidu-components-angular/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
openvidu-components-angular/package.json
View File

@ -35,7 +35,7 @@
"@angular/platform-browser-dynamic": "13.0.0",
"@angular/router": "13.0.0",
"autolinker": "3.14.3",
"openvidu-browser": "2.22.0",
"openvidu-browser": "^2.22.0",
"rxjs": "7.5.4",
"tslib": "2.3.1",
"zone.js": "0.11.4"
@ -70,7 +70,7 @@
"karma-notify-reporter": "1.3.0",
"mocha": "9.2.2",
"ng-packagr": "13.0.3",
"selenium-webdriver": "4.1.2",
"selenium-webdriver": "4.2.0",
"ts-node": "10.4.0",
"tslint": "6.1.3",
"typescript": "4.4.4",

12
openvidu-components-angular/src/app/admin/admin-dashboard/admin-dashboard.component.html
View File

@ -1 +1,11 @@
<p>admin-dashboard works!</p>
<ov-admin-login *ngIf="!logged" [error]="error" (onLoginButtonClicked)="login($event)"></ov-admin-login>
<ov-admin-dashboard
*ngIf="logged"
[recordingsList]="recordings"
(onLogoutClicked)="onLogoutClicked()"
(onRefreshRecordingsClicked)="onRefreshRecordingsClicked()"
(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
(onDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
></ov-admin-dashboard>

56
openvidu-components-angular/src/app/admin/admin-dashboard/admin-dashboard.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { RecordingService } from 'openvidu-angular';
import { RestService } from 'src/app/services/rest.service';
@Component({
selector: 'app-admin-dashboard',
@ -6,10 +8,58 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./admin-dashboard.component.scss']
})
export class AdminDashboardComponent implements OnInit {
recordings: any[] = [];
logged: boolean;
error: any;
constructor(private restService: RestService, private recordingService: RecordingService) {}
constructor() { }
ngOnInit(): void {
async ngOnInit() {
try {
const resp: any = await this.restService.login('');
this.logged = true;
this.recordings = resp.recordings;
} catch (error) {}
}
async login(pass: string) {
try {
const resp: any = await this.restService.login(pass);
this.logged = true;
this.recordings = resp.recordings;
} catch (error) {
this.error = error;
console.log(error);
}
}
async onLogoutClicked() {
this.logged = false;
await this.restService.logout();
}
async onRefreshRecordingsClicked() {
console.log('GET ALL ');
const ecordings = await this.restService.getRecordings();
console.log(this.recordings);
this.recordings = ecordings;
}
async onDeleteRecordingClicked(recordingId: string) {
console.warn('DELETE RECORDING CLICKED');
try {
this.recordings = await this.restService.deleteRecording(recordingId);
} catch (error) {
console.error(error);
}
}
async onDownloadRecordingClicked(recordingId: string) {
try {
const file = await this.restService.getRecording(recordingId);
this.recordingService.downloadRecording(recordingId, file);
} catch (error) {
console.error(error);
}
}
}

3
openvidu-components-angular/src/app/app.module.ts
View File

@ -25,7 +25,7 @@ import { ParticipantsPanelDirectiveComponent } from './examples/participantsPane
import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
import { ParticipantPanelItemElementsDirectiveComponent } from './examples/participantPanelItemElements-directive/participantPanelItemElements-directive.component';
import { ChatPanelDirectiveComponent } from './examples/chatPanel-directive/chatPanel-directive.component';
import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
// openvidu-angular
import { OpenViduAngularModule } from 'openvidu-angular';
import { ExamplesDashboardComponent } from './examples/examples-dashboard/examples-dashboard.component';
@ -34,6 +34,7 @@ import { ExamplesDashboardComponent } from './examples/examples-dashboard/exampl
declarations: [
AppComponent,
DashboardComponent,
AdminDashboardComponent,
CallComponent,
TestingComponent,
ExamplesDashboardComponent,

2
openvidu-components-angular/src/app/app.routing.module.ts
View File

@ -16,11 +16,13 @@ import { ParticipantPanelItemElementsDirectiveComponent } from './examples/parti
import { ParticipantPanelItemDirectiveComponent } from './examples/participantPanelItem-directive/participantPanelItem-directive.component';
import { ToolbarAdditionalPanelButtonsDirectiveComponent } from './examples/toolbarAdditionalPanelButtons-directive/toolbarAdditionalPanelButtons-directive.component';
import { AdditionalPanelsDirectiveComponent } from './examples/additionalPanels-directive/additionalPanels-directive.component';
import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component';
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'call', component: CallComponent },
{ path: 'testing', component: TestingComponent },
{ path: 'admin', component: AdminDashboardComponent },
{ path: 'examples', component: ExamplesDashboardComponent},
{ path: 'examples/toolbarDirective', component: ToolbarDirectiveComponent },

15
openvidu-components-angular/src/app/openvidu-call/call.component.html
View File

@ -8,6 +8,21 @@
(onToolbarFullscreenButtonClicked)="onToolbarFullscreenButtonClicked()"
(onToolbarParticipantsPanelButtonClicked)="onToolbarParticipantsPanelButtonClicked()"
(onToolbarChatPanelButtonClicked)="onToolbarChatPanelButtonClicked()"
(onToolbarStartRecordingClicked)="onStartRecordingClicked()"
(onToolbarStopRecordingClicked)="onStopRecordingClicked()"
(onActivitiesPanelStartRecordingClicked)="onStartRecordingClicked()"
(onActivitiesPanelStopRecordingClicked)="onStopRecordingClicked()"
(onActivitiesPanelDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
(onActivitiesPanelDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
[minimal]="false"
[prejoin]="true"
[activitiesPanelRecordingActivity]="true"
[recordingActivityRecordingsList]="recordingList"
[recordingActivityRecordingError]="recordingError"
[toolbarSettingsButton]="true"
>
<!-- <div *ovActivitiesPanel>HOLA</div> -->
<!-- <ov-toolbar *ovToolbar [activitiesPanelButton]="false"
[chatPanelButton]="false"></ov-toolbar> -->
</ov-videoconference>

67
openvidu-components-angular/src/app/openvidu-call/call.component.ts
View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { TokenModel } from 'dist/openvidu-angular/public-api';
import { RecordingInfo, TokenModel, RecordingService } from 'openvidu-angular';
import { RestService } from '../services/rest.service';
@Component({
@ -17,17 +17,28 @@ export class CallComponent implements OnInit {
joinSessionClicked: boolean = false;
closeClicked: boolean = false;
isSessionAlive: boolean = false;
recordingList: RecordingInfo[] = [];
recordingError: any;
constructor(private restService: RestService) {}
constructor(private restService: RestService, private recordingService: RecordingService) {}
async ngOnInit() {
// this.tokens = {
// webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
// screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
// };
// console.log(this.tokens)
const response = await this.restService.getTokensFromBackend(this.sessionId);
this.recordingList = response.recordings;
this.tokens = {
webcam: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET),
screen: await this.restService.getToken(this.sessionId, this.OPENVIDU_URL, this.OPENVIDU_SECRET)
webcam: response.cameraToken,
screen: response.screenToken
};
console.log(this.tokens)
console.log(this.tokens);
}
onJoinClicked() {
@ -81,4 +92,48 @@ export class CallComponent implements OnInit {
this.isSessionAlive = false;
console.log('TOOLBAR LEAVE CLICKED');
}
async onStartRecordingClicked() {
console.warn('START RECORDING CLICKED');
try {
await this.restService.startRecording(this.sessionId);
} catch (error) {
this.recordingError = error;
}
}
async onStopRecordingClicked() {
console.warn('STOP RECORDING CLICKED');
try {
// await this.restService.startRecording(this.sessionId);
this.recordingList = await this.restService.stopRecording(this.sessionId);
console.log('RECORDING LIST ', this.recordingList);
} catch (error) {
this.recordingError = error;
}
}
async onDeleteRecordingClicked(recordingId: string) {
console.warn('DELETE RECORDING CLICKED');
try {
this.recordingList = await this.restService.deleteRecording(recordingId);
} catch (error) {
this.recordingError = error;
console.error('?', error)
}
}
async onDownloadRecordingClicked(recordingId: string) {
try {
const file = await this.restService.getRecording(recordingId);
this.recordingService.downloadRecording(recordingId, file);
} catch (error) {
this.recordingError = error;
}
}
}

121
openvidu-components-angular/src/app/services/rest.service.ts
View File

@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, lastValueFrom } from 'rxjs';
import { throwError as observableThrowError } from 'rxjs/internal/observable/throwError';
import { RecordingInfo } from 'openvidu-angular';
@Injectable({
providedIn: 'root'
@ -17,14 +18,117 @@ export class RestService {
const _sessionId = await this.createSession(sessionId, openviduServerUrl, openviduSecret);
return await this.createToken(_sessionId, openviduServerUrl, openviduSecret);
}
// try {
// return lastValueFrom(this.http.post<any>(this.baseHref + 'call', { sessionId }));
// } catch (error) {
// if (error.status === 404) {
// throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
// }
// throw error;
// }
}
async getTokensFromBackend(sessionId: string): Promise<{ cameraToken: string; screenToken: string; recordings?: RecordingInfo[] }> {
try {
return lastValueFrom(this.http.post<any>(this.baseHref + 'sessions', { sessionId }));
} catch (error) {
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
async startRecording(sessionId: string) {
try {
return lastValueFrom(this.http.post<any>(this.baseHref + 'recordings/start', { sessionId }));
} catch (error) {
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
async stopRecording(sessionId: string) {
try {
return lastValueFrom(this.http.post<any>(this.baseHref + 'recordings/stop', { sessionId }));
} catch (error) {
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
async login(password: string): Promise<any[]> {
try {
return lastValueFrom(
this.http.post<any>(`${this.baseHref}admin/login`, {
password
})
);
} catch (error) {
console.log(error);
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
async logout(): Promise<void> {
try {
return lastValueFrom(
this.http.post<any>(`${this.baseHref}admin/logout`, {})
);
} catch (error) {
console.log(error);
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
async deleteRecording(id: string): Promise<any[]> {
try {
return lastValueFrom(this.http.delete<any>(`${this.baseHref}recordings/delete/${id}`));
} catch (error) {
console.log(error);
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
getRecordings(): Promise<any[]> {
return lastValueFrom(
this.http.get<any>(`${this.baseHref}recordings`)
);
}
getRecording(recordingId: string) {
try {
return lastValueFrom(
this.http.get(`${this.baseHref}recordings/${recordingId}`, {
responseType: 'blob'
})
);
} catch (error) {
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
getRecording2(recordingId: string) {
try {
return lastValueFrom(
this.http.get(`${this.baseHref}recordings/${recordingId}`,{
responseType: 'blob'
})
);
} catch (error) {
if (error.status === 404) {
throw { status: error.status, message: 'Cannot connect with backend. ' + error.url + ' not found' };
}
throw error;
}
}
/**
@ -79,7 +183,6 @@ export class RestService {
})
)
.subscribe((response) => {
console.warn(response);
resolve(response.token);