openvidu-insecure-angular update to Angular 6

openvidu-insecure-angular/.angular-cli.json

@@ -1,50 +0,0 @@
-{
-  "project": {
-    "version": "1.0.0-beta.17",
-    "name": "openvidu-insecure-angular"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "assets/images"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.json",
-      "prefix": "app",
-      "mobile": false,
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-	"dev": "environments/environment.ts",
-	"prod": "environments/environment.prod.ts"
-	}
-      }
-  ],
-  "addons": [],
-  "packages": [],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "build": {
-      "showCircularDependencies": false
-    },
-    "styleExt": "css",
-    "prefixInterfaces": false
-  }
-}

openvidu-insecure-angular/angular.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "openvidu-insecure-angular": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.json",
+            "showCircularDependencies": false,
+            "assets": [
+              "src/assets",
+              "src/assets/images"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "openvidu-insecure-angular:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "openvidu-insecure-angular:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "openvidu-insecure-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/assets/images"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "openvidu-insecure-angular-e2e": {
+      "root": "",
+      "sourceRoot": "",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "openvidu-insecure-angular:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "openvidu-insecure-angular",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

openvidu-insecure-angular/karma.conf.js

@@ -12,13 +12,13 @@ module.exports = function (config) {
       require('angular-cli/plugins/karma')
     ],
     files: [
-      { pattern: './src/test.ts', watched: false }
+      
     ],
     preprocessors: {
       './src/test.ts': ['angular-cli']
     },
     remapIstanbulReporter: {
-      reports: {
+      dir: require('path').join(__dirname, 'coverage'), reports: {
         html: 'coverage',
         lcovonly: './coverage/coverage.lcov'
       }

openvidu-insecure-angular/package.json

@@ -6,24 +6,25 @@
     "start": "ng serve"
   },
   "dependencies": {
-    "@angular/common": "5.2.10",
-    "@angular/compiler": "5.2.10",
-    "@angular/core": "5.2.10",
-    "@angular/forms": "5.2.10",
-    "@angular/platform-browser": "5.2.10",
-    "@angular/platform-browser-dynamic": "5.2.10",
+    "@angular/common": "6.0.1",
+    "@angular/compiler": "6.0.1",
+    "@angular/core": "6.0.1",
+    "@angular/http": "6.0.1",
+    "@angular/forms": "6.0.1",
+    "@angular/platform-browser": "6.0.1",
+    "@angular/platform-browser-dynamic": "6.0.1",
     "core-js": "2.5.6",
     "openvidu-browser": "2.0.0",
-    "openvidu-node-client": "2.0.0",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@types/node": "10.0.4",
-    "@angular/cli": "1.7.4",
-    "@angular/compiler-cli": "5.2.10",
+    "@types/node": "10.0.8",
+    "@angular/cli": "6.0.1",
+    "@angular/compiler-cli": "6.0.1",
+    "@angular-devkit/build-angular": "~0.6.1",
     "codelyzer": "4.3.0",
     "ts-node": "6.0.3",
     "tslint": "5.10.0",
     "typescript": "2.7.2"
   }
-}
+}

openvidu-insecure-angular/src/app/app.component.ts

@@ -1,6 +1,8 @@
 import { Component, HostListener, Input, OnDestroy } from '@angular/core';
+import { Http, Headers, RequestOptions } from '@angular/http';
+import { throwError as observableThrowError, Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 import { OpenVidu, Session, Stream, StreamEvent } from 'openvidu-browser';
-import { OpenVidu as OpenViduAPI } from 'openvidu-node-client';
 
 @Component({
   selector: 'app-root',
@@ -25,7 +27,7 @@ export class AppComponent implements OnDestroy {
   // updated by an Output event of StreamComponent children
   @Input() mainVideoStream: Stream;
 
-  constructor() {
+  constructor(private http: Http) {
     this.generateParticipantInfo();
   }
 
@@ -160,11 +162,56 @@ export class AppComponent implements OnDestroy {
    */
 
   getToken(): Promise<string> {
-    let OV_NodeClient = new OpenViduAPI('https://' + location.hostname + ':4443', 'MY_SECRET');
-    return OV_NodeClient.createSession({ customSessionId: this.mySessionId })
-      .then(session_NodeClient => {
-        return session_NodeClient.generateToken();
+    return this.createSession(this.mySessionId).then(
+      sessionId => {
+        return this.createToken(sessionId);
+      })
+  }
+
+  createSession(sessionId) {
+    return new Promise((resolve, reject) => {
+
+      const body = JSON.stringify({ customSessionId: sessionId });
+      const headers = new Headers({
+        'Authorization': 'Basic ' + btoa('OPENVIDUAPP:MY_SECRET'),
+        'Content-Type': 'application/json',
       });
+      const options = new RequestOptions({ headers });
+      return this.http.post('https://' + location.hostname + ':4443/api/sessions', body, options)
+        .pipe(
+          catchError(error => {
+            error.status === 409 ? resolve(sessionId) : reject(error);
+            return observableThrowError(error);
+          })
+        )
+        .subscribe(response => {
+          console.log(response);
+          resolve(response.json().id);
+        });
+    });
+  }
+
+  createToken(sessionId): Promise<string> {
+    return new Promise((resolve, reject) => {
+
+      const body = JSON.stringify({ session: sessionId });
+      const headers = new Headers({
+        'Authorization': 'Basic ' + btoa('OPENVIDUAPP:MY_SECRET'),
+        'Content-Type': 'application/json',
+      });
+      const options = new RequestOptions({ headers });
+      return this.http.post('https://' + location.hostname + ':4443/api/tokens', body, options)
+        .pipe(
+          catchError(error => {
+            reject(error);
+            return observableThrowError(error);
+          })
+        )
+        .subscribe(response => {
+          console.log(response);
+          resolve(response.json().token);
+        });
+    });
   }
 
 }

openvidu-insecure-angular/src/app/app.module.ts

@@ -1,6 +1,7 @@
 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';
@@ -11,7 +12,8 @@ import { StreamComponent } from './stream.component';
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]

openvidu-insecure-angular/src/polyfills.ts

@@ -1,4 +1,4 @@
-// This file includes polyfills needed by Angular 2 and is loaded before
+// This file includes polyfills needed by Angular 6 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';
@@ -17,3 +17,5 @@ import 'core-js/es6/reflect';
 
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
+
+(window as any).global = window;