diff --git a/openvidu-browser/ts/KurentoUtils/kurento-utils-js/WebRtcPeer.js b/openvidu-browser/ts/KurentoUtils/kurento-utils-js/WebRtcPeer.js index 62675c38..cd75fcfc 100644 --- a/openvidu-browser/ts/KurentoUtils/kurento-utils-js/WebRtcPeer.js +++ b/openvidu-browser/ts/KurentoUtils/kurento-utils-js/WebRtcPeer.js @@ -32,7 +32,7 @@ var logger = window.Logger || console // }).eror(callback)); // } -try { +/*try { require('kurento-browser-extensions') } catch (error) { if (typeof getScreenConstraints === 'undefined') { @@ -42,7 +42,7 @@ try { callback(new Error("This library is not enabled for screen sharing")) } } -} +}*/ var MEDIA_CONSTRAINTS = { audio: true, diff --git a/openvidu-ng-testapp/e2e/app.e2e-spec.ts b/openvidu-ng-testapp/e2e/app.e2e-spec.ts deleted file mode 100644 index 950be7ad..00000000 --- a/openvidu-ng-testapp/e2e/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { OpenviduNgTestappPage } from './app.po'; - -describe('openvidu-ng-testapp App', () => { - let page: OpenviduNgTestappPage; - - beforeEach(() => { - page = new OpenviduNgTestappPage(); - }); - - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('app works!'); - }); -}); diff --git a/openvidu-ng-testapp/e2e/tsconfig.e2e.json b/openvidu-ng-testapp/e2e/tsconfig.e2e.json deleted file mode 100644 index 74c2bca1..00000000 --- a/openvidu-ng-testapp/e2e/tsconfig.e2e.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "compilerOptions": { - "sourceMap": true, - "declaration": false, - "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ - "es2016" - ], - "outDir": "../dist/out-tsc-e2e", - "module": "commonjs", - "target": "es6", - "types":[ - "jasmine", - "node" - ] - } -} diff --git a/openvidu-ng-testapp/package.json b/openvidu-ng-testapp/package.json deleted file mode 100644 index f55b9b19..00000000 --- a/openvidu-ng-testapp/package.json +++ /dev/null @@ -1,48 +0,0 @@ -{ - "name": "openvidu-ng-testapp", - "version": "1.1.0", - "license": "Apache-2.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@angular/common": "^2.4.0", - "@angular/compiler": "^2.4.0", - "@angular/core": "^2.4.0", - "@angular/forms": "^2.4.0", - "@angular/http": "^2.4.0", - "@angular/platform-browser": "^2.4.0", - "@angular/platform-browser-dynamic": "^2.4.0", - "@angular/router": "^3.4.0", - "core-js": "^2.4.1", - "rxjs": "^5.1.0", - "ts-helpers": "^1.1.1", - "zone.js": "^0.7.6", - "openvidu-browser": "1.0.2" - }, - "devDependencies": { - "@angular/cli": "1.0.0-rc.1", - "@angular/compiler-cli": "^2.4.0", - "@types/jasmine": "2.5.38", - "@types/node": "~6.0.60", - "codelyzer": "~2.0.0", - "jasmine-core": "~2.5.2", - "jasmine-spec-reporter": "~3.2.0", - "karma": "~1.4.1", - "karma-chrome-launcher": "~2.0.0", - "karma-cli": "~1.0.1", - "karma-jasmine": "~1.1.0", - "karma-jasmine-html-reporter": "^0.2.2", - "karma-coverage-istanbul-reporter": "^0.2.0", - "protractor": "~5.1.0", - "ts-node": "~2.0.0", - "tslint": "~4.4.2", - "typescript": "~2.0.0" - } -} diff --git a/openvidu-ng-testapp/src/app/app.component.html b/openvidu-ng-testapp/src/app/app.component.html deleted file mode 100644 index faa82782..00000000 --- a/openvidu-ng-testapp/src/app/app.component.html +++ /dev/null @@ -1,82 +0,0 @@ -
-

Join a video session

-
-
- - -
-
- - -
-
- Send video -
- - - - - - - - - - - - - - - - - -
ConstraintValue
width
height
frameRate
-
-
-
- Send audio -
-
- -
-
-
- -
-

{{sessionId}}

- - Toggle your video - Toggle your audio -
-
-
-
-
-
- Show conexion state -
-

Signaling state: {{signalingState[i]}}

-

ICE connection state: {{iceConnectionState[i]}}

-
- Show - statistics -
-

Bitrate: {{stats[i].bitrate}}

-

Framerate: {{stats[i].framerate}}

-
- - - - - - - - - - - -
TypeTimeOther attributes
{{st.type}}{{st.timestamp}}{{getStatAttributes(st.res)}}
-
-
-
-
-
diff --git a/openvidu-ng-testapp/src/app/app.component.ts b/openvidu-ng-testapp/src/app/app.component.ts deleted file mode 100644 index 8d939101..00000000 --- a/openvidu-ng-testapp/src/app/app.component.ts +++ /dev/null @@ -1,278 +0,0 @@ -import { Observable } from 'rxjs/Rx'; -import { enableDebugTools } from '@angular/platform-browser'; -import { Component } from '@angular/core'; -import { OpenVidu, Session, Publisher, Stream } from 'openvidu-browser'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html' -}) -export class AppComponent { - - private openVidu: OpenVidu; - private session: Session; - private publisher: Publisher; - - cameraOptions: any; - - // Join form - sessionId: string; - participantId: string; - - // Session - streams: Stream[] = []; - - // Publish options - joinWithVideo: boolean = false; - joinWithAudio: boolean = false; - toggleVideo: boolean; - toggleAudio: boolean; - - //Statistics - stats = []; - bytesPrev = []; - framesPrev = []; - timestampPrev = []; - signalingState = []; - iceConnectionState = []; - - - constructor() { - this.generateParticipantInfo(); - //this.obtainSupportedConstraints(); - } - - private generateParticipantInfo() { - this.sessionId = "SessionA"; - this.participantId = "Participant" + Math.floor(Math.random() * 100); - } - - private addVideoTag(stream: Stream) { - console.log("Stream added"); - let ind = (this.streams.push(stream) - 1); - - this.signalingState[ind] = ''; - this.iceConnectionState[ind] = ''; - - //Connection events - stream.getRTCPeerConnection().onsignalingstatechange = (event) => { - this.signalingState[ind] += " => " + stream.getRTCPeerConnection().signalingState; - console.info("Stream " + stream.getId() + " signaling state: " + stream.getRTCPeerConnection().signalingState); - } - - stream.getRTCPeerConnection().oniceconnectionstatechange = (event) => { - /*if (stream.getRTCPeerConnection().iceconnectionstate === "failed" || - stream.getRTCPeerConnection().iceconnectionstate === "disconnected" || - stream.getRTCPeerConnection().iceconnectionstate === "closed") { - // Handle the failure - };*/ - this.iceConnectionState[ind] += " => " + stream.getRTCPeerConnection().iceConnectionState; - console.info("Stream " + stream.getId() + " ice connection state: " + stream.getRTCPeerConnection().iceConnectionState); - } - - //For statistics - this.timestampPrev.push(0); - this.bytesPrev.push(0); - this.framesPrev.push(0); - } - - private removeVideoTag(stream: Stream) { - console.log("Stream removed"); - let index = this.streams.indexOf(stream); - this.streams.splice(index, 1); - - this.stats.splice(index, 1); - this.timestampPrev.splice(index, 1); - this.bytesPrev.splice(index, 1); - this.framesPrev.splice(index, 1); - - this.signalingState.splice(index, 1); - this.iceConnectionState.splice(index, 1); - } - - joinSession() { - let mediaConstraints = this.generateMediaConstraints(); - - console.log(mediaConstraints); - - this.cameraOptions = { - audio: this.joinWithAudio, - video: this.joinWithVideo, - data: true, - mediaConstraints: mediaConstraints - } - this.joinSessionShared(); - } - - joinSessionShared() { - - this.toggleVideo = this.joinWithVideo; - this.toggleAudio = this.joinWithAudio; - - this.openVidu = new OpenVidu("wss://" + location.hostname + ":8443/"); - this.session = this.openVidu.initSession(this.sessionId); - - this.session.on('streamCreated', (event) => { - this.session.subscribe(event.stream, 'subscriber', { - insertMode: 'append', - width: '100%', - height: '100%' - }); - this.addVideoTag(event.stream); - }); - - this.session.on('streamDestroyed', (event) => { - this.removeVideoTag(event.stream); - }); - - this.session.connect(this.participantId, (error) => { - - // If the connection is successful, initialize a publisher and publish to the session - if (!error) { - - // 4) Get your own camera stream with the desired resolution and publish it, only if the user is supposed to do so - this.publisher = this.openVidu.initPublisher('publisher', this.cameraOptions); - - // 5) Publish your stream - this.session.publish(this.publisher); - - this.intervalStats().subscribe(); - - } else { - console.log('There was an error connecting to the session:', error.code, error.message); - } - }); - } - - leaveSession() { - this.session.disconnect(); - this.session = null; - this.streams = []; - this.generateParticipantInfo(); - } - - updateToggleVideo(event) { - this.publisher.publishVideo(event.target.checked); - let msg = (event.target.checked) ? 'Publishing video...' : 'Unpublishing video...' - console.log(msg); - } - - updateToggleAudio(event) { - this.publisher.publishAudio(event.target.checked); - let msg = (event.target.checked) ? 'Publishing audio...' : 'Unpublishing audio...' - console.log(msg); - } - - updateToggleStatistics(i) { - let table = (document.getElementById('table-' + i)); - (table.style.display == "none") ? table.style.display = "block" : table.style.display = "none"; - } - - updateToggleState(i) { - let state = (document.getElementById('state-' + i)); - (state.style.display == "none") ? state.style.display = "block" : state.style.display = "none"; - } - - /*obtainSupportedConstraints() { - let constraints = Object.keys(navigator.mediaDevices.getSupportedConstraints()); - this.supportedVideoContstraints = constraints.filter((e) => { - return this.mediaTrackSettingsVideo.indexOf(e) > -1; - }); - this.supportedAudioContstraints = constraints.filter((e) => { - return this.mediaTrackSettingsAudio.indexOf(e) > -1; - }); - - console.log(constraints); - console.log(this.supportedVideoContstraints); - console.log(this.supportedAudioContstraints); - }*/ - - generateMediaConstraints() { - let mediaConstraints = { - audio: true, - video: {} - } - if (this.joinWithVideo) { - mediaConstraints.video['width'] = { exact: Number((document.getElementById('width')).value) }; - mediaConstraints.video['height'] = { exact: Number((document.getElementById('height')).value) }; - mediaConstraints.video['frameRate'] = { ideal: Number((document.getElementById('frameRate')).value) }; - } - - return mediaConstraints; - } - - - intervalStats() { - return Observable - .interval(1000) - .flatMap(() => { - let i = 0; - for (let str of this.streams) { - if (str.getWebRtcPeer().peerConnection) { - this.intervalStatsAux(i, str); - i++; - } - } - return []; - }); - } - - intervalStatsAux(i: number, stream: Stream) { - stream.getWebRtcPeer().peerConnection.getStats(null) - .then((results) => { - this.stats[i] = this.dumpStats(results, i); - console.info(results); - }); - } - - - dumpStats(results, i) { - var statsArray = []; - let bitrate; - let frames; - - results.forEach((res) => { - let date = new Date(res.timestamp); - statsArray.push({ res: res, type: res.type, timestamp: date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() }); - - let now = res.timestamp; - - if (res.type === 'inbound-rtp' && res.mediaType === 'video') { - // firefox calculates the bitrate for us - // https://bugzilla.mozilla.org/show_bug.cgi?id=951496 - bitrate = Math.floor(res.bitrateMean / 1024); - if (res.framerateMean !== undefined && res.frameRate != "0") { - frames = (res.framerateMean).toFixed(2); - } - - } else if (res.type === 'ssrc' && res.bytesReceived && res.googFrameRateReceived) { - // chrome does not so we need to do it ourselves - var bytes = res.bytesReceived; - frames = (res.googFrameRateOutput == "0") ? Number(this.framesPrev[i]) : Number(res.googFrameRateOutput); - if (this.timestampPrev[i]) { - bitrate = 8 * (bytes - this.bytesPrev[i]) / (now - this.timestampPrev[i]); - bitrate = Math.floor(bitrate); - } - this.bytesPrev[i] = bytes; - this.timestampPrev[i] = now; - } - - }); - if (bitrate) { - bitrate += ' kbits/sec'; - } - if (frames) { - this.framesPrev[i] = frames; - frames += ' fps'; - } - return { statsArray: statsArray, bitrate: bitrate, framerate: frames }; - } - - getStatAttributes(stat) { - let s = ''; - Object.keys(stat).forEach((key) => { - if (key != 'type' && key != 'timestamp') s += (' | ' + key + ' | '); - }); - return s; - } -} \ No newline at end of file diff --git a/openvidu-ng-testapp/src/app/app.module.ts b/openvidu-ng-testapp/src/app/app.module.ts deleted file mode 100644 index 9d91ef7c..00000000 --- a/openvidu-ng-testapp/src/app/app.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { HttpModule } from '@angular/http'; - -import { AppComponent } from './app.component'; -import { StreamComponent } from "./stream.component"; - -@NgModule({ - declarations: [ - AppComponent, StreamComponent - ], - imports: [ - BrowserModule, - FormsModule, - HttpModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/openvidu-ng-testapp/src/app/index.ts b/openvidu-ng-testapp/src/app/index.ts deleted file mode 100644 index 875bdb2f..00000000 --- a/openvidu-ng-testapp/src/app/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './app.component'; -export * from './app.module'; diff --git a/openvidu-ng-testapp/src/app/stream.component.ts b/openvidu-ng-testapp/src/app/stream.component.ts deleted file mode 100644 index 1f47dd8a..00000000 --- a/openvidu-ng-testapp/src/app/stream.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Component, OnInit, Input, ViewChild } from '@angular/core'; -import { Stream, Session } from 'openvidu-browser'; -import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; - -@Component({ - selector: 'stream', - styles: [` - .participant { - margin: 10px; - } - .participant video { - - }`], - template: ` -
-

{{stream.getId()}}

- - -
` -}) -export class StreamComponent { - - @Input() - stream: Stream; - - videoSrc: SafeUrl; - - constructor(private sanitizer: DomSanitizer) { } - - ngOnInit() { - - let int = setInterval(() => { - if (this.stream.getWrStream()) { - this.videoSrc = this.sanitizer.bypassSecurityTrustUrl( - URL.createObjectURL(this.stream.getWrStream())); - console.log("Video tag src=" + this.videoSrc); - clearInterval(int); - } - }, 1000); - - //this.stream.addEventListener('src-added', () => { - // this.video.src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(this.stream.getWrStream())).toString(); - //}); - } - -} \ No newline at end of file diff --git a/openvidu-ng-testapp/src/polyfills.ts b/openvidu-ng-testapp/src/polyfills.ts deleted file mode 100644 index 3b4c55b0..00000000 --- a/openvidu-ng-testapp/src/polyfills.ts +++ /dev/null @@ -1,19 +0,0 @@ -// This file includes polyfills needed by Angular 2 and is loaded before -// the app. You can add your own extra polyfills to this file. -import 'core-js/es6/symbol'; -import 'core-js/es6/object'; -import 'core-js/es6/function'; -import 'core-js/es6/parse-int'; -import 'core-js/es6/parse-float'; -import 'core-js/es6/number'; -import 'core-js/es6/math'; -import 'core-js/es6/string'; -import 'core-js/es6/date'; -import 'core-js/es6/array'; -import 'core-js/es6/regexp'; -import 'core-js/es6/map'; -import 'core-js/es6/set'; -import 'core-js/es6/reflect'; - -import 'core-js/es7/reflect'; -import 'zone.js/dist/zone'; diff --git a/openvidu-ng-testapp/src/styles.css b/openvidu-ng-testapp/src/styles.css deleted file mode 100644 index e50a47e7..00000000 --- a/openvidu-ng-testapp/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ \ No newline at end of file diff --git a/openvidu-ng-testapp/src/test.ts b/openvidu-ng-testapp/src/test.ts deleted file mode 100644 index 7727c8e6..00000000 --- a/openvidu-ng-testapp/src/test.ts +++ /dev/null @@ -1,34 +0,0 @@ -import './polyfills.ts'; - -import 'zone.js/dist/long-stack-trace-zone'; -import 'zone.js/dist/proxy.js'; -import 'zone.js/dist/sync-test'; -import 'zone.js/dist/jasmine-patch'; -import 'zone.js/dist/async-test'; -import 'zone.js/dist/fake-async-test'; - -// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. -declare var __karma__: any; -declare var require: any; - -// Prevent Karma from running prematurely. -__karma__.loaded = function () {}; - - -Promise.all([ - System.import('@angular/core/testing'), - System.import('@angular/platform-browser-dynamic/testing') -]) - // First, initialize the Angular testing environment. - .then(([testing, testingBrowser]) => { - testing.getTestBed().initTestEnvironment( - testingBrowser.BrowserDynamicTestingModule, - testingBrowser.platformBrowserDynamicTesting() - ); - }) - // Then we find all the tests. - .then(() => require.context('./', true, /\.spec\.ts/)) - // And load the modules. - .then(context => context.keys().map(context)) - // Finally, start Karma to run the tests. - .then(__karma__.start, __karma__.error); diff --git a/openvidu-ng-testapp/src/tsconfig.app.json b/openvidu-ng-testapp/src/tsconfig.app.json deleted file mode 100644 index 9f12c4b8..00000000 --- a/openvidu-ng-testapp/src/tsconfig.app.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "compilerOptions": { - "sourceMap": true, - "declaration": false, - "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ - "es2016", - "dom" - ], - "outDir": "../out-tsc/app", - "target": "es5", - "module": "es2015", - "baseUrl": "", - "types": [] - }, - "exclude": [ - "test.ts", - "**/*.spec.ts" - ] -} diff --git a/openvidu-ng-testapp/src/tsconfig.spec.json b/openvidu-ng-testapp/src/tsconfig.spec.json deleted file mode 100644 index 6c5160e1..00000000 --- a/openvidu-ng-testapp/src/tsconfig.spec.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "sourceMap": true, - "declaration": false, - "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ - "es2016" - ], - "outDir": "../out-tsc/spec", - "module": "commonjs", - "target": "es6", - "baseUrl": "", - "types": [ - "jasmine", - "node" - ] - }, - "files": [ - "test.ts" - ], - "include": [ - "**/*.spec.ts" - ] -} diff --git a/openvidu-ng-testapp/src/typings.d.ts b/openvidu-ng-testapp/src/typings.d.ts deleted file mode 100644 index a73f5867..00000000 --- a/openvidu-ng-testapp/src/typings.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -// Typings reference file, see links for more information -// https://github.com/typings/typings -// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html - -declare var System: any; diff --git a/openvidu-ng-testapp/.angular-cli.json b/openvidu-testapp/.angular-cli.json similarity index 74% rename from openvidu-ng-testapp/.angular-cli.json rename to openvidu-testapp/.angular-cli.json index 55bd2927..5e1d83ee 100644 --- a/openvidu-ng-testapp/.angular-cli.json +++ b/openvidu-testapp/.angular-cli.json @@ -1,7 +1,7 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { - "name": "openvidu-ng-testapp" + "name": "openvidu-testapp" }, "apps": [ { @@ -19,7 +19,8 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "styles.css" + "styles.css", + "openvidu-theme.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", @@ -36,13 +37,16 @@ }, "lint": [ { - "project": "src/tsconfig.app.json" + "project": "src/tsconfig.app.json", + "exclude": "**/node_modules/**" }, { - "project": "src/tsconfig.spec.json" + "project": "src/tsconfig.spec.json", + "exclude": "**/node_modules/**" }, { - "project": "e2e/tsconfig.e2e.json" + "project": "e2e/tsconfig.e2e.json", + "exclude": "**/node_modules/**" } ], "test": { diff --git a/openvidu-ng-testapp/.editorconfig b/openvidu-testapp/.editorconfig similarity index 100% rename from openvidu-ng-testapp/.editorconfig rename to openvidu-testapp/.editorconfig diff --git a/openvidu-ng-testapp/.gitignore b/openvidu-testapp/.gitignore similarity index 93% rename from openvidu-ng-testapp/.gitignore rename to openvidu-testapp/.gitignore index 8ce87385..54bfd200 100644 --- a/openvidu-ng-testapp/.gitignore +++ b/openvidu-testapp/.gitignore @@ -3,6 +3,7 @@ # compiled output /dist /tmp +/out-tsc # dependencies /node_modules @@ -26,7 +27,7 @@ # misc /.sass-cache /connect.lock -/coverage/* +/coverage /libpeerconnection.log npm-debug.log testem.log @@ -36,6 +37,6 @@ testem.log /e2e/*.js /e2e/*.map -#System Files +# System Files .DS_Store Thumbs.db diff --git a/openvidu-ng-testapp/README.md b/openvidu-testapp/README.md similarity index 80% rename from openvidu-ng-testapp/README.md rename to openvidu-testapp/README.md index 0157fda7..79588e52 100644 --- a/openvidu-ng-testapp/README.md +++ b/openvidu-testapp/README.md @@ -1,13 +1,14 @@ -# OpenviduNgTestapp +# OpenviduTestApp -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.1. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.3. ## Development server + Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`. +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. ## Build @@ -20,7 +21,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. ## Running end-to-end tests Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). -Before running the tests make sure you are serving the app via `ng serve`. ## Further help diff --git a/openvidu-testapp/e2e/app.e2e-spec.ts b/openvidu-testapp/e2e/app.e2e-spec.ts new file mode 100644 index 00000000..c8389373 --- /dev/null +++ b/openvidu-testapp/e2e/app.e2e-spec.ts @@ -0,0 +1,14 @@ +import { AppPage } from './app.po'; + +describe('openvidu-testapp App', () => { + let page: AppPage; + + beforeEach(() => { + page = new AppPage(); + }); + + it('should display welcome message', () => { + page.navigateTo(); + expect(page.getParagraphText()).toEqual('Welcome to app!'); + }); +}); diff --git a/openvidu-ng-testapp/e2e/app.po.ts b/openvidu-testapp/e2e/app.po.ts similarity index 60% rename from openvidu-ng-testapp/e2e/app.po.ts rename to openvidu-testapp/e2e/app.po.ts index 06b2b502..82ea75ba 100644 --- a/openvidu-ng-testapp/e2e/app.po.ts +++ b/openvidu-testapp/e2e/app.po.ts @@ -1,6 +1,6 @@ -import { browser, element, by } from 'protractor'; +import { browser, by, element } from 'protractor'; -export class OpenviduNgTestappPage { +export class AppPage { navigateTo() { return browser.get('/'); } diff --git a/openvidu-testapp/e2e/tsconfig.e2e.json b/openvidu-testapp/e2e/tsconfig.e2e.json new file mode 100644 index 00000000..1d9e5edf --- /dev/null +++ b/openvidu-testapp/e2e/tsconfig.e2e.json @@ -0,0 +1,14 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/e2e", + "baseUrl": "./", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "jasminewd2", + "node" + ] + } +} diff --git a/openvidu-ng-testapp/karma.conf.js b/openvidu-testapp/karma.conf.js similarity index 65% rename from openvidu-ng-testapp/karma.conf.js rename to openvidu-testapp/karma.conf.js index 84b4cd5a..af139fad 100644 --- a/openvidu-ng-testapp/karma.conf.js +++ b/openvidu-testapp/karma.conf.js @@ -1,5 +1,5 @@ // Karma configuration file, see link for more information -// https://karma-runner.github.io/0.13/config/configuration-file.html +// https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { config.set({ @@ -15,15 +15,6 @@ module.exports = function (config) { client:{ clearContext: false // leave Jasmine Spec Runner output visible in browser }, - files: [ - { pattern: './src/test.ts', watched: false } - ], - preprocessors: { - './src/test.ts': ['@angular/cli'] - }, - mime: { - 'text/x-typescript': ['ts','tsx'] - }, coverageIstanbulReporter: { reports: [ 'html', 'lcovonly' ], fixWebpackSourcePaths: true @@ -31,9 +22,7 @@ module.exports = function (config) { angularCli: { environment: 'dev' }, - reporters: config.angularCli && config.angularCli.codeCoverage - ? ['progress', 'coverage-istanbul'] - : ['progress', 'kjhtml'], + reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, diff --git a/openvidu-testapp/package.json b/openvidu-testapp/package.json new file mode 100644 index 00000000..2e2bf3d7 --- /dev/null +++ b/openvidu-testapp/package.json @@ -0,0 +1,55 @@ +{ + "name": "openvidu-testapp", + "version": "0.0.0", + "license": "Apache-2.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "private": true, + "dependencies": { + "@angular/animations": "^4.4.3", + "@angular/cdk": "^2.0.0-beta.11", + "@angular/common": "^4.2.4", + "@angular/compiler": "^4.2.4", + "@angular/core": "^4.2.4", + "@angular/flex-layout": "^2.0.0-beta.9", + "@angular/forms": "^4.2.4", + "@angular/http": "^4.2.4", + "@angular/material": "^2.0.0-beta.11", + "@angular/platform-browser": "^4.2.4", + "@angular/platform-browser-dynamic": "^4.2.4", + "@angular/router": "^4.2.4", + "core-js": "^2.4.1", + "hammerjs": "^2.0.8", + "openvidu-browser": "1.1.0", + "openvidu-node-client": "1.1.0", + "rxjs": "^5.4.2", + "zone.js": "^0.8.14" + }, + "devDependencies": { + "@angular/cli": "1.4.3", + "@angular/compiler-cli": "^4.2.4", + "@angular/language-service": "^4.2.4", + "@types/jasmine": "~2.5.53", + "@types/jasminewd2": "~2.0.2", + "@types/node": "~6.0.60", + "codelyzer": "~3.1.1", + "jasmine-core": "~2.6.2", + "jasmine-spec-reporter": "~4.1.0", + "karma": "~1.7.0", + "karma-chrome-launcher": "~2.1.1", + "karma-cli": "~1.0.1", + "karma-coverage-istanbul-reporter": "^1.2.1", + "karma-jasmine": "~1.1.0", + "karma-jasmine-html-reporter": "^0.2.2", + "protractor": "~5.1.2", + "ts-node": "~3.2.0", + "tslint": "~5.3.2", + "typescript": "~2.3.3" + } +} diff --git a/openvidu-ng-testapp/protractor.conf.js b/openvidu-testapp/protractor.conf.js similarity index 95% rename from openvidu-ng-testapp/protractor.conf.js rename to openvidu-testapp/protractor.conf.js index 1c5e1e5a..7ee3b5ee 100644 --- a/openvidu-ng-testapp/protractor.conf.js +++ b/openvidu-testapp/protractor.conf.js @@ -19,12 +19,10 @@ exports.config = { defaultTimeoutInterval: 30000, print: function() {} }, - beforeLaunch: function() { + onPrepare() { require('ts-node').register({ project: 'e2e/tsconfig.e2e.json' }); - }, - onPrepare() { jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); } }; diff --git a/openvidu-testapp/src/app/app.component.css b/openvidu-testapp/src/app/app.component.css new file mode 100644 index 00000000..cc54e7cd --- /dev/null +++ b/openvidu-testapp/src/app/app.component.css @@ -0,0 +1,8 @@ +#nav-img { + height: 32px; + vertical-align: middle; +} + +main { + padding: 50px +} diff --git a/openvidu-testapp/src/app/app.component.html b/openvidu-testapp/src/app/app.component.html new file mode 100644 index 00000000..f47d98fc --- /dev/null +++ b/openvidu-testapp/src/app/app.component.html @@ -0,0 +1,10 @@ + + + + +
+ +
+ \ No newline at end of file diff --git a/openvidu-testapp/src/app/app.component.spec.ts b/openvidu-testapp/src/app/app.component.spec.ts new file mode 100644 index 00000000..bcbdf36b --- /dev/null +++ b/openvidu-testapp/src/app/app.component.spec.ts @@ -0,0 +1,27 @@ +import { TestBed, async } from '@angular/core/testing'; +import { AppComponent } from './app.component'; +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); + })); +}); diff --git a/openvidu-testapp/src/app/app.component.ts b/openvidu-testapp/src/app/app.component.ts new file mode 100644 index 00000000..655c40c9 --- /dev/null +++ b/openvidu-testapp/src/app/app.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + + constructor(private router: Router) { } + + isVideoSessionUrl() { + return (this.router.url.substring(0, '/lesson/'.length) === '/lesson/'); + } + +} diff --git a/openvidu-testapp/src/app/app.material.module.ts b/openvidu-testapp/src/app/app.material.module.ts new file mode 100644 index 00000000..7fed5df1 --- /dev/null +++ b/openvidu-testapp/src/app/app.material.module.ts @@ -0,0 +1,33 @@ +import { NgModule } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { + MdButtonModule, + MdIconModule, + MdCheckboxModule, + MdCardModule, + MdInputModule, + MdProgressSpinnerModule, + MdTooltipModule, + MdDialogModule, + MdToolbarModule, + MdTabsModule, + MdSlideToggleModule +} from '@angular/material'; + +@NgModule({ + exports: [ + BrowserAnimationsModule, + MdButtonModule, + MdIconModule, + MdCheckboxModule, + MdCardModule, + MdInputModule, + MdProgressSpinnerModule, + MdTooltipModule, + MdDialogModule, + MdToolbarModule, + MdTabsModule, + MdSlideToggleModule + ], +}) +export class AppMaterialModule { } diff --git a/openvidu-testapp/src/app/app.module.ts b/openvidu-testapp/src/app/app.module.ts new file mode 100644 index 00000000..24a2504e --- /dev/null +++ b/openvidu-testapp/src/app/app.module.ts @@ -0,0 +1,32 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { AppMaterialModule } from './app.material.module'; + +import { routing } from './app.routing'; +import { AppComponent } from './app.component'; +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { SessionComponent } from './components/session/session.component'; + +import { OpenviduRestService } from './services/openvidu-rest.service'; + +@NgModule({ + declarations: [ + AppComponent, + DashboardComponent, + SessionComponent + ], + imports: [ + BrowserModule, + FormsModule, + BrowserAnimationsModule, + AppMaterialModule, + FlexLayoutModule, + routing + ], + providers: [OpenviduRestService], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/openvidu-testapp/src/app/app.routing.ts b/openvidu-testapp/src/app/app.routing.ts new file mode 100644 index 00000000..909bf8f4 --- /dev/null +++ b/openvidu-testapp/src/app/app.routing.ts @@ -0,0 +1,18 @@ +import { ModuleWithProviders } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { DashboardComponent } from './components/dashboard/dashboard.component'; +import { SessionComponent } from './components/session/session.component'; + +const appRoutes: Routes = [ + { + path: '', + component: DashboardComponent + }, + { + path: 'session/:session-name', + component: SessionComponent + } +]; + +export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); diff --git a/openvidu-testapp/src/app/components/dashboard/app.material.module.ts b/openvidu-testapp/src/app/components/dashboard/app.material.module.ts new file mode 100644 index 00000000..314e4aec --- /dev/null +++ b/openvidu-testapp/src/app/components/dashboard/app.material.module.ts @@ -0,0 +1,41 @@ +import { NgModule } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { + MdButtonModule, + MdIconModule, + MdCheckboxModule, + MdCardModule, + MdInputModule, + MdProgressSpinnerModule, + MdTooltipModule, + MdDialogModule, + MdSlideToggleModule +} from '@angular/material'; + +@NgModule({ + imports: [ + BrowserAnimationsModule, + MdButtonModule, + MdIconModule, + MdCheckboxModule, + MdCardModule, + MdInputModule, + MdProgressSpinnerModule, + MdTooltipModule, + MdDialogModule, + MdSlideToggleModule + ], + exports: [ + BrowserAnimationsModule, + MdButtonModule, + MdIconModule, + MdCheckboxModule, + MdCardModule, + MdInputModule, + MdProgressSpinnerModule, + MdTooltipModule, + MdDialogModule, + MdSlideToggleModule + ], +}) +export class AppMaterialModule { } diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.css b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css new file mode 100644 index 00000000..506bed37 --- /dev/null +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.css @@ -0,0 +1,93 @@ +#join-dialog h1 { + color: #4d4d4d; + font-weight: bold; + text-align: center; +} + +#img-div { + text-align: center; + position: absolute; + top: 19%; + left: 50%; + transform: translate(-50%, -50%); +} + +#img-div img { + height: 15%; +} + +#join-dialog label { + color: #0088aa; +} + +#join-dialog input.btn { + margin-top: 15px; +} + +#session-header { + margin-bottom: 20px; +} + +#session-title { + display: inline-block; +} + +#buttonLeaveSession { + float: right; + margin-top: 20px; +} + +#video-container video { + position: relative; + float: left; + cursor: pointer; +} + +#video-container p { + display: inline-block; + background: #f8f8f8; + padding-right: 5px; + padding-left: 5px; + color: #777777; + font-weight: bold; + border-bottom-right-radius: 4px; +} + +video { + width: 100%; + height: auto; +} + +#main-video p { + position: absolute; + display: inline-block; + background: #f8f8f8; + padding-right: 5px; + padding-left: 5px; + left: 0; + font-size: 22px; + color: #777777; + font-weight: bold; + border-bottom-right-radius: 4px; +} + +#main-video video { + cursor: initial; +} + +#session img { + width: 100%; + height: auto; + display: inline-block; + object-fit: contain; + vertical-align: baseline; +} + +#session #video-container img { + position: relative; + float: left; + width: 50%; + cursor: pointer; + object-fit: cover; + height: 180px; +} diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.html b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html new file mode 100644 index 00000000..e9457a7d --- /dev/null +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.html @@ -0,0 +1,47 @@ + + +
+ +
+ + +
+ +
+ + + + + +
+ +
+ + + + + + + + + + + diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts b/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts new file mode 100644 index 00000000..9c996c37 --- /dev/null +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts new file mode 100644 index 00000000..8ce9494d --- /dev/null +++ b/openvidu-testapp/src/app/components/dashboard/dashboard.component.ts @@ -0,0 +1,45 @@ +import { Component, OnInit } from '@angular/core'; +import { OpenviduRestService } from '../../services/openvidu-rest.service'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.css'] +}) +export class DashboardComponent implements OnInit { + + // Join form + sessionName: string; + clientData: string; + + constructor(private openviduRestService: OpenviduRestService) { + this.generateSessionInfo(); + } + + ngOnInit() { } + + private generateSessionInfo() { + this.sessionName = 'TestSession'; + this.clientData = 'RandomClient' + Math.floor(Math.random() * 100); + } + + private getSessionId() { + this.openviduRestService.getSessionId() + .then((sessionId) => { + alert(sessionId); + }) + .catch((error) => { + console.error('Error getting a sessionId', error); + }); + } + + private getToken() { + this.openviduRestService.getToken() + .then((token) => { + alert(token); + }) + .catch((error) => { + console.error('Error getting a token', error); + }); + } +} diff --git a/openvidu-ng-testapp/src/assets/.gitkeep b/openvidu-testapp/src/app/components/session/session.component.css similarity index 100% rename from openvidu-ng-testapp/src/assets/.gitkeep rename to openvidu-testapp/src/app/components/session/session.component.css diff --git a/openvidu-testapp/src/app/components/session/session.component.html b/openvidu-testapp/src/app/components/session/session.component.html new file mode 100644 index 00000000..6a817399 --- /dev/null +++ b/openvidu-testapp/src/app/components/session/session.component.html @@ -0,0 +1,11 @@ +
+
+

{{sessionName}}

+ +
+
+

+ +
+
+
\ No newline at end of file diff --git a/openvidu-testapp/src/app/components/session/session.component.spec.ts b/openvidu-testapp/src/app/components/session/session.component.spec.ts new file mode 100644 index 00000000..b6161fd6 --- /dev/null +++ b/openvidu-testapp/src/app/components/session/session.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SessionComponent } from './session.component'; + +describe('SessionComponent', () => { + let component: SessionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SessionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SessionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/openvidu-testapp/src/app/components/session/session.component.ts b/openvidu-testapp/src/app/components/session/session.component.ts new file mode 100644 index 00000000..50ee54ee --- /dev/null +++ b/openvidu-testapp/src/app/components/session/session.component.ts @@ -0,0 +1,135 @@ +import { OpenVidu, Session } from 'openvidu-browser'; +import { Component, ElementRef, ViewChild, HostListener, OnDestroy } from '@angular/core'; + +declare var $: any; + +@Component({ + selector: 'app-session', + templateUrl: './session.component.html', + styleUrls: ['./session.component.css'] +}) +export class SessionComponent implements OnDestroy { + + @ViewChild('mainVideoElement') elementRef: ElementRef; + mainVideoElement: HTMLVideoElement; + + // OpenVidu objects + OV: OpenVidu; + session: Session; + + // Join form + sessionName: string; + clientData: string; + + constructor() { } + + @HostListener('window:beforeunload') + beforeunloadHandler() { + // On window closed leave session + this.leaveSession(); + } + + ngOnDestroy() { + // On component destroyed leave session + this.leaveSession(); + } + + joinSession() { + + this.OV = new OpenVidu(); + + this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionName + '?secret=MY_SECRET'); + + this.mainVideoElement = this.elementRef.nativeElement; + + 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); + }); + }); + + 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.initMainVideo(event.element, this.clientData); + this.appendUserData(event.element, this.clientData); + event.element['muted'] = true; + }); + + this.session.publish(publisher); + + } else { + console.log('There was an error connecting to the session:', error.code, error.message); + } + }); + + return false; + } + + leaveSession() { + if (this.OV) { + this.session.disconnect(); + } + this.removeAllUserData(); + this.session = null; + this.OV = null; + } + + private appendUserData(videoElement, connection) { + let userData; + let nodeId; + if (typeof connection === 'string') { + userData = connection; + nodeId = connection; + } else { + userData = JSON.parse(connection.data).clientData; + nodeId = connection.connectionId; + } + const dataNode = document.createElement('div'); + dataNode.className = 'data-node'; + dataNode.id = 'data-' + nodeId; + dataNode.innerHTML = '

' + userData + '

'; + videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling); + this.addClickListener(videoElement, userData); + } + + private removeUserData(connection) { + const dataNode = $('#data-' + connection.connectionId); + dataNode.parentNode.removeChild(dataNode); + } + + private removeAllUserData() { + const nicknameElements = $('.data-node'); + while (nicknameElements[0]) { + nicknameElements[0].parentNode.removeChild(nicknameElements[0]); + } + } + + private addClickListener(videoElement: HTMLVideoElement, userData) { + videoElement.addEventListener('click', () => { + const mainUserData = $('#main-video p'); + if (this.mainVideoElement.srcObject !== videoElement.srcObject) { + mainUserData.innerHTML = userData; + this.mainVideoElement.srcObject = videoElement.srcObject; + } + }); + } + + private initMainVideo(videoElement: HTMLVideoElement, userData) { + this.mainVideoElement.srcObject = videoElement.srcObject; + $('#main-video p').innerHTML = userData; + this.mainVideoElement['muted'] = true; + } +} diff --git a/openvidu-testapp/src/app/services/openvidu-rest.service.spec.ts b/openvidu-testapp/src/app/services/openvidu-rest.service.spec.ts new file mode 100644 index 00000000..f2273860 --- /dev/null +++ b/openvidu-testapp/src/app/services/openvidu-rest.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { OpenviduRestService } from './openvidu-rest.service'; + +describe('OpenviduRestService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [OpenviduRestService] + }); + }); + + it('should be created', inject([OpenviduRestService], (service: OpenviduRestService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/openvidu-testapp/src/app/services/openvidu-rest.service.ts b/openvidu-testapp/src/app/services/openvidu-rest.service.ts new file mode 100644 index 00000000..54bd9a85 --- /dev/null +++ b/openvidu-testapp/src/app/services/openvidu-rest.service.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { + OpenVidu as OpenViduAPI, + Session as SessionAPI, + TokenOptions as TokenOptionsAPI, + OpenViduRole as OpenViduRoleAPI +} from 'openvidu-node-client'; +import { environment } from '../../environments/environment'; + +@Injectable() +export class OpenviduRestService { + + constructor() { } + + getSessionId(): Promise { + const OV = new OpenViduAPI(environment.OPENVIDU_URL, environment.OPENVIDU_SECRET); + const session = OV.createSession(); + + return new Promise(resolve => { + session.getSessionId((sessionId) => { + resolve(sessionId); + }); + }); + } + + getToken(): Promise { + const OV = new OpenViduAPI(environment.OPENVIDU_URL, environment.OPENVIDU_SECRET); + const session = OV.createSession(); + + return new Promise(resolve => { + let tokenOptions: TokenOptionsAPI; + session.generateToken((token) => { + resolve(token); + }); + }); + } + +} diff --git a/openvidu-testapp/src/app/services/session-conf.service.spec.ts b/openvidu-testapp/src/app/services/session-conf.service.spec.ts new file mode 100644 index 00000000..a4b153e8 --- /dev/null +++ b/openvidu-testapp/src/app/services/session-conf.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { SessionConfService } from './session-conf.service'; + +describe('SessionConfService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [SessionConfService] + }); + }); + + it('should be created', inject([SessionConfService], (service: SessionConfService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/openvidu-testapp/src/app/services/session-conf.service.ts b/openvidu-testapp/src/app/services/session-conf.service.ts new file mode 100644 index 00000000..2fd946ba --- /dev/null +++ b/openvidu-testapp/src/app/services/session-conf.service.ts @@ -0,0 +1,17 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; + +@Injectable() +export class SessionConfService { + + private conf$ = new Subject(); + + getConf() { + return this.conf$; + } + + updateConf(configuration: any) { + this.conf$.next(configuration); + } + +} diff --git a/openvidu-ng-testapp/src/assets/.npmignore b/openvidu-testapp/src/assets/.gitkeep similarity index 100% rename from openvidu-ng-testapp/src/assets/.npmignore rename to openvidu-testapp/src/assets/.gitkeep diff --git a/openvidu-testapp/src/assets/.npmignore b/openvidu-testapp/src/assets/.npmignore new file mode 100644 index 00000000..e69de29b diff --git a/openvidu-testapp/src/assets/images/openvidu_globe_bg_transp_cropped.png b/openvidu-testapp/src/assets/images/openvidu_globe_bg_transp_cropped.png new file mode 100644 index 00000000..e0309e62 Binary files /dev/null and b/openvidu-testapp/src/assets/images/openvidu_globe_bg_transp_cropped.png differ diff --git a/openvidu-testapp/src/assets/images/openvidu_grey_bg_transp_cropped.png b/openvidu-testapp/src/assets/images/openvidu_grey_bg_transp_cropped.png new file mode 100644 index 00000000..49f311a6 Binary files /dev/null and b/openvidu-testapp/src/assets/images/openvidu_grey_bg_transp_cropped.png differ diff --git a/openvidu-testapp/src/assets/images/openvidu_vert_white_bg_trans.png b/openvidu-testapp/src/assets/images/openvidu_vert_white_bg_trans.png new file mode 100644 index 00000000..a8b94582 Binary files /dev/null and b/openvidu-testapp/src/assets/images/openvidu_vert_white_bg_trans.png differ diff --git a/openvidu-testapp/src/assets/images/openvidu_vert_white_bg_trans_cropped.png b/openvidu-testapp/src/assets/images/openvidu_vert_white_bg_trans_cropped.png new file mode 100644 index 00000000..a1c8b2d7 Binary files /dev/null and b/openvidu-testapp/src/assets/images/openvidu_vert_white_bg_trans_cropped.png differ diff --git a/openvidu-ng-testapp/src/environments/environment.prod.ts b/openvidu-testapp/src/environments/environment.prod.ts similarity index 100% rename from openvidu-ng-testapp/src/environments/environment.prod.ts rename to openvidu-testapp/src/environments/environment.prod.ts diff --git a/openvidu-ng-testapp/src/environments/environment.ts b/openvidu-testapp/src/environments/environment.ts similarity index 62% rename from openvidu-ng-testapp/src/environments/environment.ts rename to openvidu-testapp/src/environments/environment.ts index 00313f16..9c78397b 100644 --- a/openvidu-ng-testapp/src/environments/environment.ts +++ b/openvidu-testapp/src/environments/environment.ts @@ -1,8 +1,10 @@ // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. -// The list of which env maps to which file can be found in `angular-cli.json`. +// The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { - production: false + production: false, + OPENVIDU_URL: 'https://localhost:8443', + OPENVIDU_SECRET: 'MY_SECRET' }; diff --git a/openvidu-ng-testapp/src/favicon.ico b/openvidu-testapp/src/favicon.ico similarity index 100% rename from openvidu-ng-testapp/src/favicon.ico rename to openvidu-testapp/src/favicon.ico diff --git a/openvidu-ng-testapp/src/index.html b/openvidu-testapp/src/index.html similarity index 64% rename from openvidu-ng-testapp/src/index.html rename to openvidu-testapp/src/index.html index 08101d16..94e061e0 100644 --- a/openvidu-ng-testapp/src/index.html +++ b/openvidu-testapp/src/index.html @@ -1,14 +1,20 @@ - + + - OpenviduNg2Example + OpenVidu TestApp + + + + Loading... + diff --git a/openvidu-ng-testapp/src/main.ts b/openvidu-testapp/src/main.ts similarity index 60% rename from openvidu-ng-testapp/src/main.ts rename to openvidu-testapp/src/main.ts index 5c3c5204..a7ea96c2 100644 --- a/openvidu-ng-testapp/src/main.ts +++ b/openvidu-testapp/src/main.ts @@ -1,12 +1,14 @@ -import './polyfills.ts'; - -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; -import { AppModule } from './app/'; + +import 'hammerjs'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule); +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.log(err)); diff --git a/openvidu-testapp/src/openvidu-theme.scss b/openvidu-testapp/src/openvidu-theme.scss new file mode 100644 index 00000000..893960bb --- /dev/null +++ b/openvidu-testapp/src/openvidu-theme.scss @@ -0,0 +1,57 @@ +@import '~@angular/material/theming'; +// Plus imports for other components in your app. + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat-core(); + +$mat-openvidu: ( + 50: #eaeaea, + 100: #cacaca, + 200: #a6a6a6, + 300: #828282, + 400: #686868, + 500: #4d4d4d, + 600: #464646, + 700: #3d3d3d, + 800: #343434, + 900: #252525, + A100: #83E9B1, + A200: #06D362, + A400: #04C850, + A700: #02B734, + contrast: ( + 50 : #fff9e0, + 100 : #fff0b3, + 200 : #ffe680, + 300 : #ffdb4d, + 400 : #ffd426, + 500 : #ffcc00, + 600 : #ffc700, + 700 : #ffc000, + 800 : #ffb900, + 900 : #ffad00, + A100 : #ffffff, + A200 : #fffaf2, + A400 : #ffe8bf, + A700 : #ffdfa6, + ) +); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. +$openvidu-primary: mat-palette($mat-openvidu); +$openvidu-accent: mat-palette($mat-openvidu, A200, A100, A400); + +// The warn palette is optional (defaults to red). +$openvidu-warn: mat-palette($mat-red); + +// Create the theme object (a Sass map containing all of the palettes). +$openvidu-theme: mat-light-theme($openvidu-primary, $openvidu-accent, $openvidu-warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($openvidu-theme); \ No newline at end of file diff --git a/openvidu-testapp/src/polyfills.ts b/openvidu-testapp/src/polyfills.ts new file mode 100644 index 00000000..581aadfe --- /dev/null +++ b/openvidu-testapp/src/polyfills.ts @@ -0,0 +1,72 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ + +/** IE9, IE10 and IE11 requires all of the following polyfills. **/ +// import 'core-js/es6/symbol'; +// import 'core-js/es6/object'; +// import 'core-js/es6/function'; +// import 'core-js/es6/parse-int'; +// import 'core-js/es6/parse-float'; +// import 'core-js/es6/number'; +// import 'core-js/es6/math'; +// import 'core-js/es6/string'; +// import 'core-js/es6/date'; +// import 'core-js/es6/array'; +// import 'core-js/es6/regexp'; +// import 'core-js/es6/map'; +// import 'core-js/es6/weak-map'; +// import 'core-js/es6/set'; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +// import 'classlist.js'; // Run `npm install --save classlist.js`. + +/** Evergreen browsers require these. **/ +import 'core-js/es6/reflect'; +import 'core-js/es7/reflect'; + + +/** + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + **/ +// import 'web-animations-js'; // Run `npm install --save web-animations-js`. + + + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + + + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import 'intl'; // Run `npm install --save intl`. +/** + * Need to import at least one locale-data with intl. + */ +// import 'intl/locale-data/jsonp/en'; diff --git a/openvidu-testapp/src/styles.css b/openvidu-testapp/src/styles.css new file mode 100644 index 00000000..8285dafe --- /dev/null +++ b/openvidu-testapp/src/styles.css @@ -0,0 +1,79 @@ +* { + font-family: 'Exo 2', sans-serif; +} + +html, +body { + height: 100%; + margin: 0; + padding: 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05); +} + +a { + color: inherit; + cursor: inherit; + text-decoration: inherit; +} + + +/* Elevation */ + +.z-depth-1 { + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); +} + +.z-depth-1-half { + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); +} + +.z-depth-2 { + box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); +} + +.z-depth-3 { + box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3); +} + +.z-depth-4 { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3); +} + +.z-depth-5 { + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); +} + + +/* Colors of Deep Purple Material Theme */ + +.back-primary { + background: #673ab7 !important; +} + +.back-accent { + background: #ffd740; +} + +.back-warn { + background: #f44336; +} + +.back-secondary { + background: #D1C4E9; +} + +.color-primary { + color: #673ab7 !important; +} + +.color-accent { + color: #ffd740; +} + +.color-warn { + color: #f44336; +} + +.color-secondary { + color: #D1C4E9; +} diff --git a/openvidu-testapp/src/test.ts b/openvidu-testapp/src/test.ts new file mode 100644 index 00000000..cd612eeb --- /dev/null +++ b/openvidu-testapp/src/test.ts @@ -0,0 +1,32 @@ +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'zone.js/dist/long-stack-trace-zone'; +import 'zone.js/dist/proxy.js'; +import 'zone.js/dist/sync-test'; +import 'zone.js/dist/jasmine-patch'; +import 'zone.js/dist/async-test'; +import 'zone.js/dist/fake-async-test'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. +declare const __karma__: any; +declare const require: any; + +// Prevent Karma from running prematurely. +__karma__.loaded = function () {}; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); +// Finally, start Karma to run the tests. +__karma__.start(); diff --git a/openvidu-testapp/src/tsconfig.app.json b/openvidu-testapp/src/tsconfig.app.json new file mode 100644 index 00000000..39ba8dba --- /dev/null +++ b/openvidu-testapp/src/tsconfig.app.json @@ -0,0 +1,13 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "baseUrl": "./", + "module": "es2015", + "types": [] + }, + "exclude": [ + "test.ts", + "**/*.spec.ts" + ] +} diff --git a/openvidu-testapp/src/tsconfig.spec.json b/openvidu-testapp/src/tsconfig.spec.json new file mode 100644 index 00000000..63d89ff2 --- /dev/null +++ b/openvidu-testapp/src/tsconfig.spec.json @@ -0,0 +1,20 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/spec", + "baseUrl": "./", + "module": "commonjs", + "target": "es5", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/openvidu-testapp/src/typings.d.ts b/openvidu-testapp/src/typings.d.ts new file mode 100644 index 00000000..ef5c7bd6 --- /dev/null +++ b/openvidu-testapp/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/openvidu-ng-testapp/tsconfig.json b/openvidu-testapp/tsconfig.json similarity index 80% rename from openvidu-ng-testapp/tsconfig.json rename to openvidu-testapp/tsconfig.json index 7a9d9e8c..a6c016bf 100644 --- a/openvidu-ng-testapp/tsconfig.json +++ b/openvidu-testapp/tsconfig.json @@ -8,8 +8,11 @@ "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", + "typeRoots": [ + "node_modules/@types" + ], "lib": [ - "es2016", + "es2017", "dom" ] } diff --git a/openvidu-ng-testapp/tslint.json b/openvidu-testapp/tslint.json similarity index 77% rename from openvidu-ng-testapp/tslint.json rename to openvidu-testapp/tslint.json index 9113f136..b6e591b2 100644 --- a/openvidu-ng-testapp/tslint.json +++ b/openvidu-testapp/tslint.json @@ -3,6 +3,7 @@ "node_modules/codelyzer" ], "rules": { + "arrow-return-shorthand": true, "callable-types": true, "class-name": true, "comment-format": [ @@ -12,7 +13,10 @@ "curly": true, "eofline": true, "forin": true, - "import-blacklist": [true, "rxjs"], + "import-blacklist": [ + true, + "rxjs" + ], "import-spacing": true, "indent": [ true, @@ -27,8 +31,14 @@ "member-access": false, "member-ordering": [ true, - "static-before-instance", - "variables-before-functions" + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } ], "no-arg": true, "no-bitwise": true, @@ -42,16 +52,22 @@ ], "no-construct": true, "no-debugger": true, - "no-duplicate-variable": true, + "no-duplicate-super": true, "no-empty": false, "no-empty-interface": true, "no-eval": true, - "no-inferrable-types": [true, "ignore-params"], + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-misused-new": true, + "no-non-null-assertion": true, "no-shadowed-variable": true, "no-string-literal": false, "no-string-throw": true, "no-switch-case-fall-through": true, "no-trailing-whitespace": true, + "no-unnecessary-initializer": true, "no-unused-expression": true, "no-use-before-declare": true, "no-var-keyword": true, @@ -70,6 +86,7 @@ ], "radix": true, "semicolon": [ + true, "always" ], "triple-equals": [ @@ -97,9 +114,18 @@ "check-separator", "check-type" ], - - "directive-selector": [true, "attribute", "app", "camelCase"], - "component-selector": [true, "element", "app", "kebab-case"], + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ], "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, @@ -109,8 +135,6 @@ "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true, - "no-access-missing-member": true, - "templates-use-public": true, "invoke-injectable": true } }