diff --git a/openvidu-browser/ts/OpenVidu/Subscriber.ts b/openvidu-browser/ts/OpenVidu/Subscriber.ts index 79c5891b..0a82bde6 100644 --- a/openvidu-browser/ts/OpenVidu/Subscriber.ts +++ b/openvidu-browser/ts/OpenVidu/Subscriber.ts @@ -27,7 +27,7 @@ export class Subscriber { callback(event); }); if (eventName == 'videoElementCreated') { - if (this.stream.isReady) { + if (this.stream.isVideoELementCreated) { this.ee.emitEvent('videoElementCreated', [{ element: this.stream.getVideoElement() }]); diff --git a/openvidu-browser/ts/OpenViduInternal/Stream.ts b/openvidu-browser/ts/OpenViduInternal/Stream.ts index 4e552582..15978b9e 100644 --- a/openvidu-browser/ts/OpenViduInternal/Stream.ts +++ b/openvidu-browser/ts/OpenViduInternal/Stream.ts @@ -266,7 +266,7 @@ export class Stream { if (this.local && !this.displayMyRemote()) { this.video.muted = true; - this.video.onplay = () => { + this.video.onplaying = () => { console.info("Local 'Stream' with id [" + this.getId() + "] video is now playing"); this.ee.emitEvent('video-is-playing', [{ element: this.video @@ -595,7 +595,7 @@ export class Stream { let thumbnailId = videoElement.thumb; let video = videoElement.video; video.srcObject = this.wrStream; - video.onplay = () => { + video.onplaying = () => { if (this.local && this.displayMyRemote()) { console.info("Your own remote 'Stream' with id [" + this.getId() + "] video is now playing"); this.ee.emitEvent('remote-video-is-playing', [{ diff --git a/openvidu-testapp/src/app/app.component.css b/openvidu-testapp/src/app/app.component.css index cc54e7cd..e94a2539 100644 --- a/openvidu-testapp/src/app/app.component.css +++ b/openvidu-testapp/src/app/app.component.css @@ -4,5 +4,6 @@ } main { - padding: 50px + padding: 50px; + padding-top: 30px; } diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts index 1b8cac75..e97feffb 100644 --- a/openvidu-testapp/src/app/app.module.ts +++ b/openvidu-testapp/src/app/app.module.ts @@ -10,11 +10,13 @@ import { AppComponent } from './app.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; import { OpenviduRestService } from './services/openvidu-rest.service'; +import { OpenviduInstanceComponent } from './components/openvidu-instance/openvidu-instance.component'; @NgModule({ declarations: [ AppComponent, - DashboardComponent + DashboardComponent, + OpenviduInstanceComponent ], imports: [ BrowserModule, diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css index 6936f243..df4d8317 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css @@ -1,5 +1,7 @@ .demo-tab-content { - margin-top: 50px; + margin-top: 30px; + padding-left: 10px; + padding-right: 10px; } table { @@ -26,32 +28,6 @@ th { padding-top: 16px; } -md-card { - background-color: rgba(77, 77, 77, 0.05); -} - -.join-card { - width: fit-content; - margin: auto; - margin-bottom: 50px; - margin-top: 50px; -} - -.full-width { - width: 100%; -} - -.inner-card { - border: 1px solid #e1e1e1; - padding: 16px; - background: #ffffff; - margin-top: 20px; -} - -.inner-card h4 { - margin-top: 0; -} - -.inner-card md-radio-group { - padding-left: 20px; +app-openvidu-instance { + display: inline-block; } \ No newline at end of file diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html index f8cd7ce0..700ef276 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html @@ -10,73 +10,25 @@
- -
- - Join a session - -
- - - - - - -
-

Send...

-

- Video -

-

- - Video - Screen - -

-

- Audio -

-
-
-

Enter with active...

- Video - Audio -
-
- - - - - -
- -
-
-
-

{{sessionName}}

- -
-
-
+
+ +
+
-
- -
-
- +
- +
- +
diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts index 84543a58..a5f38f3f 100644 --- a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts @@ -1,11 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, HostListener, OnInit } from '@angular/core'; import { OpenviduRestService } from '../../services/openvidu-rest.service'; import { DataSource } from '@angular/cdk/table'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; -import { OpenVidu, Session } from 'openvidu-browser'; - import * as colormap from 'colormap'; const numColors = 64; @@ -20,32 +18,22 @@ export class DashboardComponent implements OnInit { openviduURL = 'https://localhost:8443'; openviduSecret = 'MY_SECRET'; + + // OpenViduInstance collection + users = [true]; + + // API REST params serverData = 'data_test'; - selectedRole = 'PUBLISHER'; selectedRadioIndex = 0; - + selectedRole = 'PUBLISHER'; openViduRoles = ['SUBSCRIBER', 'PUBLISHER', 'MODERATOR']; - sendAudio = true; - sendVideo = true; - optionVideo = 'video'; - activeAudio = true; - activeVideo = true; - - // Join form - clientData: string; - sessionName: string; - - // OpenVidu objects - OV: OpenVidu; - session: Session; - // API REST data collected data = []; + cg; constructor(private openviduRestService: OpenviduRestService) { - this.generateSessionInfo(); const options = { colormap: [ { 'index': 0, 'rgb': [135, 196, 213] }, @@ -58,92 +46,10 @@ export class DashboardComponent implements OnInit { ngOnInit() { } - - - - /* TEST SESSION TAB */ - - private generateSessionInfo() { - this.sessionName = 'TestSession'; - this.clientData = 'TestClient'; + private addUser() { + this.users.push(true); } - private removeHttps = input => input.replace(/^https?:\/\//, ''); - - private joinSession(): void { - this.OV = new OpenVidu(); - - this.session = this.OV.initSession('wss://' - + this.removeHttps(this.openviduURL) - + '/' - + this.sessionName + '?secret=' - + this.openviduSecret); - - this.session.on('streamCreated', (event) => { - const subscriber = this.session.subscribe(event.stream, 'video-container'); - subscriber.on('videoElementCreated', (e) => { - this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection); - }); - }); - - this.session.on('streamDestroyed', (event) => { - this.removeUserData(event.stream.connection); - }); - - this.session.connect(null, this.clientData, (error) => { - - if (!error) { - const publisher = this.OV.initPublisher('video-container', { - audio: true, - video: true, - quality: 'MEDIUM' - }); - - publisher.on('videoElementCreated', (event) => { - this.appendUserData(event.element, this.clientData, null); - event.element['muted'] = true; - }); - - this.session.publish(publisher); - - } else { - console.log('There was an error connecting to the session:', error.code, error.message); - } - }); - } - - private leaveSession(): void { - if (this.session) { - this.session.disconnect(); - } - this.session = null; - this.OV = null; - } - - private appendUserData(videoElement, data, connection) { - const dataNode = document.createElement('div'); - dataNode.className = 'data-node'; - dataNode.id = 'data-' + (connection ? connection.connectionId : data); - dataNode.innerHTML = '

' + data + '

'; - videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling); - } - - private removeUserData(connection) { - $('#data-' + connection.connectionId).remove(); - } - - private removeAllUserData() { - const nicknameElements = $('.data-node'); - while (nicknameElements[0]) { - nicknameElements[0].remove(); - } - } - - /* TEST SESSION TAB */ - - - - /* API REST TAB */ private getSessionId() { diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css new file mode 100644 index 00000000..420fe451 --- /dev/null +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css @@ -0,0 +1,40 @@ +md-card { + background-color: rgba(77, 77, 77, 0.05); + margin: 20px 0 5px 0; + padding: 20px; +} + +.session-form md-form-field { + width: 130px; +} + +.join-card { + width: fit-content; +} + +.join-card md-card-content { + margin-bottom: 0; +} + +.inner-card { + border: 1px solid #e1e1e1; + padding: 10px 15px 10px 15px; + background: #ffffff; +} + +.inner-card h4 { + margin-top: 0; + margin-bottom: 0; +} + +#join-session-btn { + margin: 0 0 4px 4px; +} + +md-radio-button { + margin-bottom: 8px; +} + +.video-container { + min-width: 140px; +} \ No newline at end of file diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html new file mode 100644 index 00000000..517c0691 --- /dev/null +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html @@ -0,0 +1,69 @@ +
+ +
+ + + +
+ + + + + + + + + +
+ +
+
+

Send...

+
+ Audio + Video +
+
+
+

Enter with
active...

+
+ Audio + Video +
+
+
+ +
+ + Video + Screen + +
+ +
+ +
+ + + + + + + +
+ +
+ + {{sessionName}} + +
+
+
+
+ +
+ +
diff --git a/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.spec.ts b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.spec.ts new file mode 100644 index 00000000..bcd59e7f --- /dev/null +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OpenviduInstanceComponent } from './openvidu-instance.component'; + +describe('OpenviduInstanceComponent', () => { + let component: OpenviduInstanceComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OpenviduInstanceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OpenviduInstanceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..ce61b1b7 --- /dev/null +++ b/openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts @@ -0,0 +1,147 @@ +import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core'; +import { OpenVidu, Session, Subscriber, Stream } from 'openvidu-browser'; + +declare var $: any; + +@Component({ + selector: 'app-openvidu-instance', + templateUrl: './openvidu-instance.component.html', + styleUrls: ['./openvidu-instance.component.css'] +}) +export class OpenviduInstanceComponent implements OnInit, OnDestroy { + + @Input() + openviduURL: string; + + @Input() + openviduSecret: string; + + sendAudio = true; + sendVideo = true; + optionVideo = 'video'; + activeAudio = true; + activeVideo = true; + sendVideoRadio = true; + + // Join form + clientData: string; + sessionName: string; + + // OpenVidu objects + OV: OpenVidu; + session: Session; + + constructor(private changeDetector: ChangeDetectorRef) { + this.generateSessionInfo(); + } + + ngOnInit() { } + + ngOnDestroy() { + this.leaveSession(); + } + + @HostListener('window:beforeunload') + beforeunloadHandler() { + this.leaveSession(); + } + + private generateSessionInfo(): void { + this.sessionName = 'TestSession'; + this.clientData = 'TestClient'; + } + + private removeHttps = input => input.replace(/^https?:\/\//, ''); + + private joinSession(): void { + + if (this.session) { + this.leaveSession(); + } + + const OV: OpenVidu = new OpenVidu(); + + this.session = OV.initSession('wss://' + + this.removeHttps(this.openviduURL) + + '/' + + this.sessionName + '?secret=' + + this.openviduSecret); + + this.session.on('streamCreated', (event) => { + + this.changeDetector.detectChanges(); + + 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); + }); + subscriber.on('videoPlaying', (e) => { + }); + }); + + this.session.on('streamDestroyed', (event) => { + this.removeUserData(event.stream.connection); + }); + + this.session.on('connectionCreated', (event) => { }); + this.session.on('connetionDestroyed', (event) => { }); + this.session.on('sessionDisconnected', (event) => { }); + + this.session.connect(null, this.clientData, (error) => { + if (!error) { + + const publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, { + audio: true, + video: true, + quality: 'MEDIUM' + }); + + publisher.on('videoElementCreated', (event) => { + this.appendUserData(event.element, this.clientData, null); + }); + + publisher.on('videoPlaying', (e) => { + }); + + this.session.publish(publisher); + + } else { + console.log('There was an error connecting to the session:', error.code, error.message); + } + }); + } + + + private leaveSession(): void { + if (this.session) { + this.session.disconnect(); + } + this.session = null; + this.OV = null; + this.removeAllUserData(); + } + + private appendUserData(videoElement, data, connection): void { + /*const dataNode = document.createElement('div'); + dataNode.className = 'data-node'; + dataNode.id = 'data-' + (connection ? connection.connectionId : data); + dataNode.innerHTML = '

' + data + '

'; + videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);*/ + } + + private removeUserData(connection): void { + /*$('#data-' + connection.connectionId).remove();*/ + } + + private removeAllUserData() { + /*const nicknameElements = $('.data-node'); + while (nicknameElements[0]) { + nicknameElements[0].remove(); + }*/ + } + + private toggleRadio(): void { + this.sendVideoRadio = !this.sendVideo; + } + +} diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css index 749e90ec..22addc6a 100644 --- a/openvidu-testapp/src/styles.css +++ b/openvidu-testapp/src/styles.css @@ -22,5 +22,14 @@ ul { } video { - max-width: 300px; + max-width: 125px; + margin-top: -5px; +} + +button { + font-weight: bold !important; +} + +.session-form label { + font-size: 12px; } \ No newline at end of file