Insecure tutorials to 2.0.0

openvidu-getaroom/docker/Dockerfile

@@ -42,7 +42,7 @@ RUN set -x \
  && chmod -R go=u,go-w /home/ngrok \
  && chmod go= /home/ngrok
 
-EXPOSE 8443
+EXPOSE 4443
 EXPOSE 4040
 
 # Exec supervisord

openvidu-getaroom/docker/ngrok.yml

@@ -1,5 +1,5 @@
 web_addr: 0.0.0.0:4040
 tunnels:
   app:
-    addr: 8443
+    addr: 4443
     proto: http

openvidu-getaroom/docker/supervisord.conf

@@ -9,7 +9,7 @@ command=/bin/bash /kms.sh
 redirect_stderr=true
 
 [program:openvidu-server]
-command=/bin/bash -c "java -Dspring.profiles.active=ngrok -Dserver.port=8443 -Dsecurity.ignored=/** -Dspring.resources.static-locations=file:///web/ -jar /openvidu-server.jar"
+command=/bin/bash -c "java -Dspring.profiles.active=ngrok -Dserver.port=4443 -Dsecurity.ignored=/** -Dspring.resources.static-locations=file:///web/ -jar /openvidu-server.jar"
 redirect_stderr=true
 
 [program:ngrok]

openvidu-getaroom/web/app.js

@@ -9,12 +9,12 @@ var numOfVideos = 0;		// Keeps track of the number of videos that are being show
 
 // Check if the URL already has a room
 window.addEventListener('load', function () {
-	sessionId = window.location.hash; // For 'https://myurl/#roomId', sessionId would be '#roomId'
+	sessionId = window.location.hash.slice(1); // For 'https://myurl/#roomId', sessionId would be 'roomId'
 	if (sessionId) {
 		// The URL has a session id. Join the room right away
 		console.log("Joining to room " + sessionId);
 		showSessionHideJoin();
-		joinRoom(sessionId);
+		joinRoom();
 	} else {
 		// The URL has not a session id. Show welcome page
 		showJoinHideSession();
@@ -27,23 +27,18 @@ window.addEventListener('beforeunload', function () {
 });
 
 
-function joinRoom(sessionId) {
+function joinRoom() {
 
 	if (!sessionId) {
 		// If the user is joining to a new room
-		sessionId = '#' + randomString();
+		sessionId = randomString();
 	}
 
-	// As insecure OpenVidu, the user's token can be a random string
-	var userId = randomString();
 
-	// --- 1) Get an OpenVidu object and init a session with a sessionId ---
+	// --- 1) Get an OpenVidu object and init a session ---
 
 	OV = new OpenVidu();
-
-	// We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of 
-	// OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end
-	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + "?secret=MY_SECRET");
+	session = OV.initSession();
 
 
 	// --- 2) Specify the actions when events take place ---
@@ -67,58 +62,60 @@ function joinRoom(sessionId) {
 	});
 
 
-	// --- 3) Connect to the session ---
+	// --- 3) Connect to the session with a valid user token ---
 
-	// Remember 'userId' param (usually called 'token') is irrelevant when using the insecure version of OpenVidu
-	session.connect(userId, function (error) {
+	// 'getToken' method is simulating what your server-side should do.
+	// 'token' parameter should be retrieved and returned by your own backend
+	getToken().then(token => {
 
-		// If the connection is successful, initialize a publisher and publish to the session
-		if (!error) {
+		// Connect with the token
+		session.connect(token)
+			.then(() => {
 
-			// --- 4) Get your own camera stream with the desired resolution ---
+				// --- 4) Get your own camera stream with the desired properties ---
 
-			publisher = OV.initPublisher('publisher', {
-				audio: true,        // Whether you want to transmit audio or not
-				video: true,        // Whether you want to transmit video or not
-				audioActive: true,  // Whether you want to start the publishing with your audio unmuted or muted
-				videoActive: true,  // Whether you want to start the publishing with your video enabled or disabled
-				quality: 'MEDIUM',  // The quality of your video ('LOW', 'MEDIUM', 'HIGH')
-				screen: false       // true to get your screen as video source instead of your camera
+				publisher = OV.initPublisher('publisher', {
+					audioSource: undefined, // The source of audio. If undefined default audio input
+					videoSource: undefined, // The source of video. If undefined default video input
+					publishAudio: true,  	// Whether you want to start the publishing with your audio unmuted or muted
+					publishVideo: true,  	// Whether you want to start the publishing with your video enabled or disabled
+					resolution: '640x480',  // The resolution of your video
+					frameRate: 30,			// The frame rate of your video
+					insertMode: 'APPEND',	// How the video will be inserted in the target element 'video-container'	
+					mirror: true       		// Whether to mirror your local video or not
+				});
+
+				publisher.on('videoElementCreated', function (event) {
+					// When your own video is added to DOM, update the page layout to fit it
+					numOfVideos++;
+					updateLayout();
+					$(event.element).prop('muted', true); // Mute local video
+				});
+
+				// --- 5) Publish your stream ---
+
+				session.publish(publisher);
+			})
+			.catch(error => {
+				console.log('There was an error connecting to the session:', error.code, error.message);
 			});
 
-			publisher.on('videoElementCreated', function (event) {
-				// When your own video is added to DOM, update the page layout to fit it
-				numOfVideos++;
-				updateLayout();
-				$(event.element).prop('muted', true); // Mute local video
-			});
+		// Update the URL shown in the browser's navigation bar to show the session id
+		var pathname = (location.pathname.slice(-1) === "/" ? location.pathname : location.pathname + "/");
+		window.history.pushState("", "", pathname + '#' + sessionId);
 
-			// --- 5) Publish your stream ---
-
-			session.publish(publisher);
-
-		} else {
-			console.log('There was an error connecting to the session:', error.code, error.message);
-		}
+		// Auxiliary methods to show the session's view
+		showSessionHideJoin();
+		initializeSessionView();
 	});
-
-	// Update the URL shown in the browser's navigation bar to show the session id
-	var pathname = (location.pathname.slice(-1) === "/" ? location.pathname : location.pathname+"/");
-	window.history.pushState("", "", pathname + sessionId);
-
-	// Auxiliary methods to show the session's view
-	showSessionHideJoin();
-	initializeSessionView();
-
-	return false;
 }
 
 
 function leaveRoom() {
-	
+
 	// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
 	session.disconnect();
-	
+
 	// Back to welcome page
 	window.location.href = window.location.origin + window.location.pathname;
 }
@@ -154,8 +151,6 @@ function muteVideo() {
 
 }
 
-
-// Generate a random string for sessionId and userId
 function randomString() {
 	return Math.random().toString(36).slice(2);
 }
@@ -249,4 +244,69 @@ function updateLayout() {
 	}
 }
 
-/* AUXILIARY METHODS */
+
+
+/**
+ * --------------------------
+ * SERVER-SIDE RESPONSABILITY
+ * --------------------------
+ * These methods retrieve the mandatory user token from OpenVidu Server.
+ * This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
+ * the API REST, openvidu-java-client or openvidu-node-client):
+ *   1) POST /api/sessions
+ *   2) POST /api/tokens
+ *   3) The value returned by /api/tokens must be consumed in Session.connect() method
+ */
+
+function getToken() {
+	return new Promise(async function (resolve) {
+		// POST /api/sessions
+		await apiSessions();
+		// POST /api/tokens
+		let t = await apiTokens();
+		// Return the user token
+		resolve(t);
+	});
+}
+
+function apiSessions() {
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: "https://" + location.hostname + ":4443/api/sessions",
+			data: JSON.stringify({ customSessionId: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:MY_SECRET"),
+				"Content-Type": "application/json"
+			},
+			success: (response) => {
+				resolve(response.id)
+			},
+			error: (error) => {
+				if (error.status === 409) {
+					resolve(sessionId);
+				} else {
+					reject(error)
+				}
+			}
+		});
+	});
+}
+
+function apiTokens() {
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: "https://" + location.hostname + ":4443/api/tokens",
+			data: JSON.stringify({ session: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:MY_SECRET"),
+				"Content-Type": "application/json"
+			},
+			success: (response) => {
+				resolve(response.id)
+			},
+			error: (error) => { reject(error) }
+		});
+	});
+}

openvidu-getaroom/web/index.html

@@ -7,17 +7,14 @@
 	<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
 
 	<!-- Bootstrap -->
-	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
-	    crossorigin="anonymous"></script>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-	    crossorigin="anonymous">
-	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
-	    crossorigin="anonymous"></script>
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 	<!-- Bootstrap -->
 
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.8.0.js"></script>
+	<script src="openvidu-browser-2.0.0.js"></script>
 	<script src="app.js"></script>
 </head>
 
@@ -50,11 +47,13 @@
 					</div>
 				</form>
 				<button id="mute-video" type="button" class="btn btn-primary float-right mute-button" onclick="muteVideo()">
-						<span class="glyphicon glyphicon-facetime-video"></span> <span class="hidden-xs">Video</span>
-					</button>
+					<span class="glyphicon glyphicon-facetime-video"></span>
+					<span class="hidden-xs">Video</span>
+				</button>
 				<button id="mute-audio" type="button" class="btn btn-primary float-right mute-button" onclick="muteAudio()">
-						<span class="glyphicon glyphicon-volume-up"></span> <span class="hidden-xs">Audio</span>
-					</button>
+					<span class="glyphicon glyphicon-volume-up"></span>
+					<span class="hidden-xs">Audio</span>
+				</button>
 			</div>
 		</div>
 	</nav>
@@ -63,10 +62,10 @@
 
 		<!-- Join page template -->
 		<div id="join" class="row no-margin" hidden>
-			<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
+			<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png"/></div>
 			<div id="join-dialog" class="jumbotron vertical-center">
 				<h1 class="arciform">Get a room</h1>
-				<button type="button" class="btn btn-lg btn-success" onclick="joinRoom()">Go!</button>
+				<button type="button" class="btn btn-lg btn-success" onclick="joinRoom(); return false;">Go!</button>
 			</div>
 		</div>
 

openvidu-hello-world/web/app.js

@@ -1,33 +1,33 @@
 var OV;
 var session;
+var sessionId;
 
 function joinSession() {
 
-	var sessionId = document.getElementById("sessionId").value;
-
 	OV = new OpenVidu();
-	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET');
+	session = OV.initSession();
 
 	session.on('streamCreated', function (event) {
 		session.subscribe(event.stream, 'subscriber');
 	});
 
-	session.connect(null, function (error) {
+	sessionId = document.getElementById("sessionId").value;
+	getToken().then(token => {
+
+		session.connect(token)
+			.then(() => {
+				var publisher = OV.initPublisher('publisher');
+				session.publish(publisher);
+			})
+			.catch(error => {
+				console.log('There was an error connecting to the session:', error.code, error.message);
+			});
 
-		if (!error) {
-			var publisher = OV.initPublisher('publisher');
-			session.publish(publisher);
-		} else {
-			console.log('There was an error connecting to the session:', error.code, error.message);
-		}
-		
 	});
 
 	document.getElementById('session-header').innerText = sessionId;
 	document.getElementById('join').style.display = 'none';
 	document.getElementById('session').style.display = 'block';
-
-	return false;
 }
 
 function leaveSession() {
@@ -40,4 +40,70 @@ function leaveSession() {
 
 window.onbeforeunload = function () {
 	if (session) session.disconnect()
-};
+};
+
+
+/**
+ * --------------------------
+ * SERVER-SIDE RESPONSABILITY
+ * --------------------------
+ * These methods retrieve the mandatory user token from OpenVidu Server.
+ * This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
+ * the API REST, openvidu-java-client or openvidu-node-client):
+ *   1) POST /api/sessions
+ *   2) POST /api/tokens
+ *   3) The value returned by /api/tokens must be consumed in Session.connect() method
+ */
+
+function getToken() {
+	return new Promise(async function (resolve) {
+		// POST /api/sessions
+		await apiSessions();
+		// POST /api/tokens
+		let t = await apiTokens();
+		// Return the user token
+		resolve(t);
+	});
+}
+
+function apiSessions() {
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: "https://" + location.hostname + ":4443/api/sessions",
+			data: JSON.stringify({ customSessionId: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:MY_SECRET"),
+				"Content-Type": "application/json"
+			},
+			success: (response) => {
+				resolve(response.id)
+			},
+			error: (error) => {
+				if (error.status === 409) {
+					resolve(sessionId);
+				} else {
+					reject(error)
+				}
+			}
+		});
+	});
+}
+
+function apiTokens() {
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: "https://" + location.hostname + ":4443/api/tokens",
+			data: JSON.stringify({ session: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:MY_SECRET"),
+				"Content-Type": "application/json"
+			},
+			success: (response) => {
+				resolve(response.id)
+			},
+			error: (error) => { reject(error) }
+		});
+	});
+}

openvidu-hello-world/web/index.html

@@ -2,15 +2,17 @@
 
 <head>
 	<title>openvidu-hello-world</title>
+	<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.8.0.js"></script>
+	<script src="openvidu-browser-2.0.0.js"></script>
 	<script src="app.js"></script>
 </head>
 
 <body>
 	<div id="join">
 		<h1>Join a video session</h1>
-		<form onsubmit="return joinSession()">
+		<form onsubmit="joinSession(); return false">
 			<p>
 				<label>Session:</label>
 				<input type="text" id="sessionId" value="SessionA" required>

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

@@ -7,7 +7,10 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": "assets",
+      "assets": [
+        "assets",
+        "assets/images"
+      ],
       "index": "index.html",
       "main": "main.ts",
       "test": "test.ts",

openvidu-insecure-angular/package.json

@@ -21,13 +21,13 @@
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
     "core-js": "^2.4.1",
-    "openvidu-browser": "1.5.0",
+    "openvidu-browser": "2.0.0",
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
-    "@angular/cli": "1.0.0",
+    "@angular/cli": "1.4.3",
     "@angular/compiler-cli": "^2.4.0",
     "codelyzer": "~2.0.0",
     "jasmine-core": "~2.5.2",

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

@@ -1,6 +1,6 @@
 <div id="main-container" class="container">
 	<div *ngIf="!session" id="join">
-		<div id="img-div"><img src="src/assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
+		<div id="img-div"><img src="assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
 		<div id="join-dialog" class="jumbotron vertical-center">
 			<h1>Join a video session</h1>
 			<form class="form-group" (submit)="joinSession()">

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

@@ -1,12 +1,14 @@
-import { OpenVidu, Session, Stream } from 'openvidu-browser';
-import { Component, HostListener, Input } from '@angular/core';
+import { OpenVidu, Session, Stream, StreamEvent } from 'openvidu-browser';
+import { Component, HostListener, Input, OnDestroy } from '@angular/core';
+
+declare var $;
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
 
   // OpenVidu objects
   OV: OpenVidu;
@@ -41,31 +43,27 @@ export class AppComponent {
 
   joinSession() {
 
-    // --- 1) Get an OpenVidu object and init a session with a sessionId ---
+    // --- 1) Get an OpenVidu object and init a session ---
 
-    // Init OpenVidu object
     this.OV = new OpenVidu();
-
-    // We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of
-    // OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end
-    this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionId + '?secret=MY_SECRET');
+    this.session = this.OV.initSession();
 
 
     // --- 2) Specify the actions when events take place ---
 
     // On every new Stream received...
-    this.session.on('streamCreated', (event) => {
+    this.session.on('streamCreated', (event: StreamEvent) => {
 
       // Add the new stream to 'remoteStreams' array
       this.remoteStreams.push(event.stream);
 
-      // Subscribe to the Stream to receive it. Second parameter is an empty string
+      // Subscribe to the Stream to receive it. Second parameter is undefined
       // so OpenVidu doesn't create an HTML video by its own
-      this.session.subscribe(event.stream, '');
+      this.session.subscribe(event.stream, undefined);
     });
 
     // On every Stream destroyed...
-    this.session.on('streamDestroyed', (event) => {
+    this.session.on('streamDestroyed', (event: StreamEvent) => {
 
       // Avoid OpenVidu trying to remove the HTML video element
       event.preventDefault();
@@ -75,43 +73,36 @@ export class AppComponent {
     });
 
 
-    // --- 3) Connect to the session ---
+    // --- 3) Connect to the session with a valid user token ---
 
-    // First param irrelevant if your app has no server-side. Second param will be received by every user
-    // in Stream.connection.data property, which will be appended to DOM as the user's nickname
-    this.session.connect(null, '{"clientData": "' + this.userName + '"}', (error) => {
+    // 'getToken' method is simulating what your server-side should do.
+    // 'token' parameter should be retrieved and returned by your own backend
+    this.getToken().then(token => {
 
-      // If connection successful, initialize a publisher and publish to the session
-      if (!error) {
+      // First param is the token retrieved from OpenVidu Server. Second param will be received by every user
+      // in Stream.connection.data property, which will be appended to DOM as the user's nickname
+      this.session.connect(token, '{"clientData": "' + this.userName + '"}')
+        .then(() => {
 
-        // --- 4) Get your own camera stream with the desired resolution ---
+          // --- 4) Get your own camera stream ---
 
-        // Both audio and video will be active. Second parameter is an empty string
-        // so OpenVidu doesn't create an HTML video by its own
-        let publisher = this.OV.initPublisher('', {
-          audio: true,        // Whether you want to transmit audio or not
-          video: true,        // Whether you want to transmit video or not
-          audioActive: true,  // Whether you want to start the publishing with your audio unmuted or muted
-          videoActive: true,  // Whether you want to start the publishing with your video enabled or disabled
-          quality: 'MEDIUM',  // The quality of your video ('LOW', 'MEDIUM', 'HIGH')
-          screen: false       // true to get your screen as video source instead of your camera
+          // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video
+          // element: we will manage it ourselves) and with no properties (default ones)
+          let publisher = this.OV.initPublisher(undefined);
+
+          // Store your webcam stream in 'localStream' object
+          this.localStream = publisher.stream;
+          // Set the main video in the page to display our webcam
+          this.mainVideoStream = this.localStream;
+
+          // --- 5) Publish your stream ---
+
+          this.session.publish(publisher);
+        })
+        .catch(error => {
+          console.log('There was an error connecting to the session:', error.code, error.message);
         });
-
-        // Store your webcam stream in 'localStream' object
-        this.localStream = publisher.stream;
-        // Set the main video in the page to display our webcam
-        this.mainVideoStream = this.localStream;
-
-        // --- 5) Publish your stream ---
-
-        this.session.publish(publisher);
-
-      } else {
-        console.log('There was an error connecting to the session:', error.code, error.message);
-      }
     });
-
-    return false;
   }
 
   leaveSession() {
@@ -144,4 +135,71 @@ export class AppComponent {
     this.mainVideoStream = stream;
   }
 
-}
+
+
+  /**
+   * --------------------------
+   * SERVER-SIDE RESPONSABILITY
+   * --------------------------
+   * These methods retrieve the mandatory user token from OpenVidu Server.
+   * This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
+   * the API REST, openvidu-java-client or openvidu-node-client):
+   *   1) POST /api/sessions
+   *   2) POST /api/tokens
+   *   3) The value returned by /api/tokens must be consumed in Session.connect() method
+   */
+
+  private getToken() {
+    return new Promise<string>(async (resolve) => {
+      // POST /api/sessions
+      await this.apiSessions();
+      // POST /api/tokens
+      let t = await this.apiTokens();
+      // Return the user token
+      resolve(<string>t);
+    });
+  }
+
+  private apiSessions() {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        type: 'POST',
+        url: 'https://' + location.hostname + ':4443/api/sessions',
+        data: JSON.stringify({ customSessionId: this.sessionId }),
+        headers: {
+          'Authorization': 'Basic ' + btoa('OPENVIDUAPP:MY_SECRET'),
+          'Content-Type': 'application/json'
+        },
+        success: (response) => {
+          resolve(response.id)
+        },
+        error: (error) => {
+          if (error.status === 409) {
+            resolve(this.sessionId);
+          } else {
+            reject(error)
+          }
+        }
+      });
+    });
+  }
+
+  private apiTokens() {
+    return new Promise((resolve, reject) => {
+      $.ajax({
+        type: 'POST',
+        url: 'https://' + location.hostname + ':4443/api/tokens',
+        data: JSON.stringify({ session: this.sessionId }),
+        headers: {
+          'Authorization': 'Basic ' + btoa('OPENVIDUAPP:MY_SECRET'),
+          'Content-Type': 'application/json'
+        },
+        success: (response) => {
+          resolve(response.id)
+        },
+        error: (error) => { reject(error) }
+      });
+    });
+  }
+
+}

openvidu-insecure-angular/src/index.html

@@ -3,18 +3,15 @@
 <head>
   <meta charset="utf-8">
   <title>openvidu-insecure-angular</title>
-  <link rel="shortcut icon" href="favicon.ico">
+  <link rel="shortcut icon" href="assets/images/favicon.ico">
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
 
   <!-- Bootstrap -->
-  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
-    crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-    crossorigin="anonymous">
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
-    crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <!-- Bootstrap -->
 </head>
@@ -24,7 +21,7 @@
   <nav class="navbar navbar-default">
     <div class="container">
       <div class="navbar-header">
-        <a class="navbar-brand" href="/"><img class="demo-logo" src="src/assets/images/openvidu_vert_white_bg_trans_cropped.png"/> Insecure Angular</a>
+        <a class="navbar-brand" href="/"><img class="demo-logo" src="assets/images/openvidu_vert_white_bg_trans_cropped.png"/> Insecure Angular</a>
         <a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-angular" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
 				<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-insecure-angular/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
       </div>
@@ -36,7 +33,7 @@
   <footer class="footer">
     <div class="container">
       <div class="text-muted">OpenVidu © 2017</div>
-      <a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="src/assets/images/openvidu_globe_bg_transp_cropped.png"/></a>
+      <a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="assets/images/openvidu_globe_bg_transp_cropped.png"/></a>
     </div>
   </footer>
 

openvidu-insecure-js/docker/Dockerfile

@@ -43,7 +43,7 @@ RUN set -x \
  && chmod go= /home/ngrok
 
 EXPOSE 4040
-EXPOSE 8443
+EXPOSE 4443
 
 # Exec supervisord
 CMD ["/usr/bin/supervisord"]

openvidu-insecure-js/docker/ngrok.yml

@@ -1,5 +1,5 @@
 web_addr: 0.0.0.0:4040
 tunnels:
   app:
-    addr: 8443
+    addr: 4443
     proto: http

openvidu-insecure-js/docker/supervisord.conf

@@ -9,7 +9,7 @@ command=/bin/bash /kms.sh
 redirect_stderr=true
 
 [program:openvidu-server]
-command=/bin/bash -c "java -Dspring.profiles.active=ngrok -Dserver.port=8443 -Dsecurity.ignored=/** -Dspring.resources.static-locations=file:///web/ -jar /openvidu-server.jar"
+command=/bin/bash -c "java -Dspring.profiles.active=ngrok -Dserver.port=4443 -Dsecurity.ignored=/** -Dspring.resources.static-locations=file:///web/ -jar /openvidu-server.jar"
 redirect_stderr=true
 
 [program:ngrok]

openvidu-insecure-js/web/app.js

@@ -1,22 +1,19 @@
 var OV;
 var session;
+var sessionId;
 
 
 /* OPENVIDU METHODS */
 
 function joinSession() {
 
-	var sessionId = document.getElementById("sessionId").value;
+	sessionId = document.getElementById("sessionId").value;
 	var userName = document.getElementById("userName").value;
 
-	// --- 1) Get an OpenVidu object and init a session with a sessionId ---
+	// --- 1) Get an OpenVidu object and init a session ---
 
-	// Init OpenVidu object
 	OV = new OpenVidu();
-
-	// We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of 
-	// OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end
-	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET');
+	session = OV.initSession();
 
 
 	// --- 2) Specify the actions when events take place ---
@@ -43,47 +40,49 @@ function joinSession() {
 	});
 
 
-	// --- 3) Connect to the session ---
+	// --- 3) Connect to the session with a valid user token ---
 
-	// First param irrelevant if your app has no server-side. Second param will be received by every user
-	// in Stream.connection.data property, which will be appended to DOM as the user's nickname
-	session.connect(null, '{"clientData": "' + userName + '"}', function (error) {
+	// 'getToken' method is simulating what your server-side should do.
+	// 'token' parameter should be retrieved and returned by your own backend
+	getToken().then(token => {
 
-		// If the connection is successful, initialize a publisher and publish to the session
-		if (!error) {
+		// First param is the token retrieved from OpenVidu Server. Second param will be received by every user
+		// in Stream.connection.data property, which will be appended to DOM as the user's nickname
+		session.connect(token, '{"clientData": "' + userName + '"}')
+			.then(() => {
 
-			// --- 4) Get your own camera stream with the desired resolution ---
+				// --- 4) Get your own camera stream with the desired properties ---
 
-			var publisher = OV.initPublisher('video-container', {
-				audio: true,        // Whether you want to transmit audio or not
-				video: true,        // Whether you want to transmit video or not
-				audioActive: true,  // Whether you want to start the publishing with your audio unmuted or muted
-				videoActive: true,  // Whether you want to start the publishing with your video enabled or disabled
-				quality: 'MEDIUM',  // The quality of your video ('LOW', 'MEDIUM', 'HIGH')
-				screen: false       // true to get your screen as video source instead of your camera
+				var publisher = OV.initPublisher('video-container', {
+					audioSource: undefined, // The source of audio. If undefined default audio input
+					videoSource: undefined, // The source of video. If undefined default video input
+					publishAudio: true,  	// Whether you want to start the publishing with your audio unmuted or muted
+					publishVideo: true,  	// Whether you want to start the publishing with your video enabled or disabled
+					resolution: '640x480',  // The resolution of your video
+					frameRate: 30,			// The frame rate of your video
+					insertMode: 'APPEND',	// How the video will be inserted in the target element 'video-container'	
+					mirror: false       	// Whether to mirror your local video or not
+				});
+
+				// When our HTML video has been added to DOM...
+				publisher.on('videoElementCreated', function (event) {
+					initMainVideo(event.element, userName);
+					appendUserData(event.element, userName);
+					event.element['muted'] = true;
+				});
+
+				// --- 5) Publish your stream ---
+
+				session.publish(publisher);
+			})
+			.catch(error => {
+				console.log('There was an error connecting to the session:', error.code, error.message);
 			});
 
-			// When our HTML video has been added to DOM...
-			publisher.on('videoElementCreated', function (event) {
-				initMainVideo(event.element, userName);
-				appendUserData(event.element, userName);
-				event.element['muted']  = true;
-			});
-
-			// --- 5) Publish your stream ---
-
-			session.publish(publisher);
-
-		} else {
-			console.log('There was an error connecting to the session:', error.code, error.message);
-		}
+		document.getElementById('session-title').innerText = sessionId;
+		document.getElementById('join').style.display = 'none';
+		document.getElementById('session').style.display = 'block';
 	});
-
-	document.getElementById('session-title').innerText = sessionId;
-	document.getElementById('join').style.display = 'none';
-	document.getElementById('session').style.display = 'block';
-
-	return false;
 }
 
 function leaveSession() {
@@ -101,9 +100,6 @@ function leaveSession() {
 	document.getElementById('session').style.display = 'none';
 }
 
-/* OPENVIDU METHODS */
-
-
 
 
 /* APPLICATION SPECIFIC METHODS */
@@ -168,4 +164,69 @@ function initMainVideo(videoElement, userData) {
 	document.querySelector('#main-video video')['muted'] = true;
 }
 
-/* APPLICATION SPECIFIC METHODS */
+
+
+/**
+ * --------------------------
+ * SERVER-SIDE RESPONSABILITY
+ * --------------------------
+ * These methods retrieve the mandatory user token from OpenVidu Server.
+ * This behaviour MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
+ * the API REST, openvidu-java-client or openvidu-node-client):
+ *   1) POST /api/sessions
+ *   2) POST /api/tokens
+ *   3) The value returned by /api/tokens must be consumed in Session.connect() method
+ */
+
+function getToken() {
+	return new Promise(async function (resolve) {
+		// POST /api/sessions
+		await apiSessions();
+		// POST /api/tokens
+		let t = await apiTokens();
+		// Return the user token
+		resolve(t);
+	});
+}
+
+function apiSessions() {
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: "https://" + location.hostname + ":4443/api/sessions",
+			data: JSON.stringify({ customSessionId: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:MY_SECRET"),
+				"Content-Type": "application/json"
+			},
+			success: (response) => {
+				resolve(response.id)
+			},
+			error: (error) => {
+				if (error.status === 409) {
+					resolve(sessionId);
+				} else {
+					reject(error)
+				}
+			}
+		});
+	});
+}
+
+function apiTokens() {
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: "https://" + location.hostname + ":4443/api/tokens",
+			data: JSON.stringify({ session: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:MY_SECRET"),
+				"Content-Type": "application/json"
+			},
+			success: (response) => {
+				resolve(response.id)
+			},
+			error: (error) => { reject(error) }
+		});
+	});
+}

openvidu-insecure-js/web/index.html

@@ -7,17 +7,14 @@
 	<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
 
 	<!-- Bootstrap -->
-	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
-	    crossorigin="anonymous"></script>
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-	    crossorigin="anonymous">
-	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
-	    crossorigin="anonymous"></script>
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 	<!-- Bootstrap -->
 
 	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.8.0.js"></script>
+	<script src="openvidu-browser-2.0.0.js"></script>
 	<script src="app.js"></script>
 </head>
 
@@ -38,7 +35,7 @@
 			<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
 			<div id="join-dialog" class="jumbotron vertical-center">
 				<h1>Join a video session</h1>
-				<form class="form-group" onsubmit="return joinSession()">
+				<form class="form-group" onsubmit="joinSession(); return false">
 					<p>
 						<label>Participant</label>
 						<input class="form-control" type="text" id="userName" required>
@@ -73,4 +70,4 @@
 
 </body>
 
-</html>
+</html>