-
-
-
-
Send
-
- Audio
- Video
-
-
-
-
Enter active
-
- Audio
- Video
-
-
+
+
+
-
-
-
- Video
-
-
- Screen
-
-
-
Subscribe
to remote
+
+
+ Subscribe
+ Publish
-
+
-
-
+
+
+
Send
+
+ Audio
+ Video
+
+
+
+
Enter active
+
+ Audio
+ Video
+
+
+
-
-
+
+
+
+ Video
+
+
+ Screen
+
+
+
Subscribe
to remote
+
-
-
-
+
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
index b7a37a89..ce1d4df5 100644
--- a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
+++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts
@@ -1,4 +1,7 @@
-import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import {
+ Component, Input, HostListener, ChangeDetectorRef, SimpleChanges, ElementRef, ViewChild,
+ OnInit, OnDestroy, OnChanges
+} from '@angular/core';
import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser';
declare var $: any;
@@ -8,10 +11,10 @@ declare var $: any;
templateUrl: './openvidu-instance.component.html',
styleUrls: ['./openvidu-instance.component.css']
})
-export class OpenviduInstanceComponent implements OnInit, OnDestroy {
+export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
@Input()
- openviduURL: string;
+ openviduUrl: string;
@Input()
openviduSecret: string;
@@ -59,12 +62,23 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
audioIcon = 'mic';
videoIcon = 'videocam';
+ events: string[] = [];
+
constructor(private changeDetector: ChangeDetectorRef) {
this.generateSessionInfo();
}
ngOnInit() { }
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes.openviduSecret) {
+ this.openviduSecret = changes.openviduSecret.currentValue;
+ }
+ if (changes.openviduUrl) {
+ this.openviduUrl = changes.openviduUrl.currentValue;
+ }
+ }
+
ngOnDestroy() {
this.leaveSession();
}
@@ -90,7 +104,7 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
const OV: OpenVidu = new OpenVidu();
this.session = OV.initSession('wss://'
- + this.removeHttps(this.openviduURL)
+ + this.removeHttps(this.openviduUrl)
+ '/'
+ this.sessionName + '?secret='
+ this.openviduSecret);
@@ -103,19 +117,29 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
subscriber.on('videoElementCreated', (e) => {
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
+ this.updateEventList('videoElementCreated');
});
subscriber.on('videoPlaying', (e) => {
+ this.updateEventList('videoPlaying');
});
}
+ this.updateEventList('streamCreated');
});
this.session.on('streamDestroyed', (event) => {
this.removeUserData(event.stream.connection);
+ this.updateEventList('streamDestroyed');
});
- this.session.on('connectionCreated', (event) => { });
- this.session.on('connetionDestroyed', (event) => { });
- this.session.on('sessionDisconnected', (event) => { });
+ this.session.on('connectionCreated', (event) => {
+ this.updateEventList('connectionCreated');
+ });
+ this.session.on('connetionDestroyed', (event) => {
+ this.updateEventList('connetionDestroyed');
+ });
+ this.session.on('sessionDisconnected', (event) => {
+ this.updateEventList('sessionDisconnected');
+ });
this.session.connect(null, this.clientData, (error) => {
if (!error) {
@@ -135,9 +159,15 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
});
this.publisher.on('videoElementCreated', (event) => {
+ this.updateEventList('videoElementCreated');
});
this.publisher.on('videoPlaying', (e) => {
+ this.updateEventList('videoPlaying');
+ });
+
+ this.publisher.on('remoteVideoPlaying', (e) => {
+ this.updateEventList('remoteVideoPlaying');
});
if (this.subscribeToRemote) {
@@ -194,6 +224,10 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
$('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove();
}
+ private updateEventList(event: string) {
+ this.events.push(event);
+ }
+
toggleSubscribeTo(): void {
this.subscribeTo = !this.subscribeTo;
}
diff --git a/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css
new file mode 100644
index 00000000..8ab4d9fb
--- /dev/null
+++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.css
@@ -0,0 +1,23 @@
+table {
+ width: 100%;
+}
+
+table tr {
+ text-align: left;
+}
+
+#table-row {
+ margin-top: 40px;
+}
+
+.first-col {
+ padding-right: 20px;
+}
+
+th {
+ padding-bottom: 20px;
+}
+
+#server-data-field {
+ padding-top: 16px;
+}
diff --git a/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html
new file mode 100644
index 00000000..0b8f2bde
--- /dev/null
+++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | sessionIds |
+ tokens |
+ Session |
+
+
+ |
+ {{sid[0]}}
+ |
+
+
+ {{token}}
+
+ |
+
+
+ |
+
+
+
+
+
+
\ No newline at end of file
diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts
similarity index 53%
rename from openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts
rename to openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts
index 9c996c37..c6c28ee7 100644
--- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts
+++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.spec.ts
@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DashboardComponent } from './dashboard.component';
+import { TestApirestComponent } from './test-apirest.component';
-describe('DashboardComponent', () => {
- let component: DashboardComponent;
- let fixture: ComponentFixture
;
+describe('TestApirestComponent', () => {
+ let component: TestApirestComponent;
+ let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ DashboardComponent ]
+ declarations: [ TestApirestComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(DashboardComponent);
+ fixture = TestBed.createComponent(TestApirestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts
similarity index 57%
rename from openvidu-testapp/src/app/components/dashboard/dashboard.component.ts
rename to openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts
index a5f38f3f..1f7269ea 100644
--- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts
+++ b/openvidu-testapp/src/app/components/test-apirest/test-apirest.component.ts
@@ -1,26 +1,22 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
import { OpenviduRestService } from '../../services/openvidu-rest.service';
-import { DataSource } from '@angular/cdk/table';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
+import { OpenviduParamsService } from '../../services/openvidu-params.service';
import * as colormap from 'colormap';
const numColors = 64;
-declare var $: any;
-
@Component({
- selector: 'app-dashboard',
- templateUrl: './dashboard.component.html',
- styleUrls: ['./dashboard.component.css'],
+ selector: 'app-test-apirest',
+ templateUrl: './test-apirest.component.html',
+ styleUrls: ['./test-apirest.component.css']
})
-export class DashboardComponent implements OnInit {
+export class TestApirestComponent implements OnInit, OnDestroy {
- openviduURL = 'https://localhost:8443';
- openviduSecret = 'MY_SECRET';
+ openviduUrl: string;
+ openviduSecret: string;
- // OpenViduInstance collection
- users = [true];
+ paramsSubscription: Subscription;
// API REST params
serverData = 'data_test';
@@ -33,7 +29,7 @@ export class DashboardComponent implements OnInit {
cg;
- constructor(private openviduRestService: OpenviduRestService) {
+ constructor(private openviduRestService: OpenviduRestService, private openviduParamsService: OpenviduParamsService) {
const options = {
colormap: [
{ 'index': 0, 'rgb': [135, 196, 213] },
@@ -44,16 +40,24 @@ export class DashboardComponent implements OnInit {
this.cg = colormap(options);
}
- ngOnInit() { }
+ ngOnInit() {
+ const openviduParams = this.openviduParamsService.getParams();
+ this.openviduUrl = openviduParams.openviduUrl;
+ this.openviduSecret = openviduParams.openviduSecret;
- private addUser() {
- this.users.push(true);
+ this.paramsSubscription = this.openviduParamsService.newParams$.subscribe(
+ params => {
+ this.openviduUrl = params.openviduUrl;
+ this.openviduSecret = params.openviduSecret;
+ });
}
- /* API REST TAB */
+ ngOnDestroy() {
+ this.paramsSubscription.unsubscribe();
+ }
private getSessionId() {
- this.openviduRestService.getSessionId(this.openviduURL, this.openviduSecret)
+ this.openviduRestService.getSessionId(this.openviduUrl, this.openviduSecret)
.then((sessionId) => {
this.updateData();
})
@@ -65,7 +69,7 @@ export class DashboardComponent implements OnInit {
private getToken() {
const sessionId = this.data[this.selectedRadioIndex][0];
- this.openviduRestService.getToken(this.openviduURL, this.openviduSecret, sessionId, this.selectedRole, this.serverData)
+ this.openviduRestService.getToken(this.openviduUrl, this.openviduSecret, sessionId, this.selectedRole, this.serverData)
.then((token) => {
this.updateData();
})
@@ -92,6 +96,4 @@ export class DashboardComponent implements OnInit {
this.openviduRestService.sessionIdTokenOpenViduRole.clear();
}
- /* API REST TAB */
-
}
diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css
new file mode 100644
index 00000000..c4725e6c
--- /dev/null
+++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.css
@@ -0,0 +1,8 @@
+app-openvidu-instance {
+ display: inline-flex;
+ margin: 25px 5px 0px 0px;
+}
+
+.scenario-div {
+ float: right;
+}
diff --git a/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
new file mode 100644
index 00000000..0525e85f
--- /dev/null
+++ b/openvidu-testapp/src/app/components/test-sessions/test-sessions.component.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ Load scenario
+
+
+
+
+
TestApp
-