openvidu-testapp secure session and cross-browser test coverage

openvidu-browser/ts/OpenViduInternal/SessionInternal.ts

@@ -51,6 +51,9 @@ export class SessionInternal {
     }
 
     private getUrlWithoutSecret(url: string): string {
+        if (!url) {
+            console.error('sessionId is not defined');
+        }
         if (url.indexOf(SECRET_PARAM) !== -1) {
             url = url.substring(0, url.lastIndexOf(SECRET_PARAM));
         }

openvidu-test-e2e/pom.xml

@@ -145,6 +145,12 @@
 			<artifactId>xml-apis</artifactId>
 			<version>1.4.01</version>
 		</dependency>
+
+		<dependency>
+			<groupId>io.openvidu</groupId>
+			<artifactId>openvidu-java-client</artifactId>
+			<version>1.1.0</version>
+		</dependency>
 	</dependencies>
 
 </project>

openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduEventManager.java

@@ -33,7 +33,6 @@ import java.util.function.Consumer;
 import org.json.simple.JSONObject;
 import org.json.simple.parser.JSONParser;
 import org.json.simple.parser.ParseException;
-import org.junit.Assert;
 import org.openqa.selenium.JavascriptExecutor;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.WebElement;
@@ -119,7 +118,7 @@ public class OpenViduEventManager {
 		this.eventCallbacks.put(eventName, new RunnableCallback(callback));
 	}
 
-	public void waitUntilNumberOfEvent(String eventName, int eventNumber) {
+	public void waitUntilNumberOfEvent(String eventName, int eventNumber) throws Exception {
 		CountDownLatch eventSignal = new CountDownLatch(eventNumber);
 		this.setCountDown(eventName, eventSignal);
 		try {
@@ -128,9 +127,19 @@ public class OpenViduEventManager {
 			}
 		} catch (InterruptedException | TimeoutException e) {
 			e.printStackTrace();
+			throw e;
 		}
 	}
 	
+	public boolean assertMediaTracks(Iterable<WebElement> videoElements, boolean audioTransmission, boolean videoTransmission) {
+		boolean success = true;
+		for (WebElement video : videoElements) {
+			success = success && (audioTransmission == this.hasAudioTracks(video)) && (videoTransmission == this.hasVideoTracks(video));
+			if (!success) break;
+		}
+		return success;
+	}
+
 	private AtomicInteger getNumEvents(String eventName) {
 		return this.eventNumbers.computeIfAbsent(eventName, k -> new AtomicInteger(0));
 	}
@@ -188,22 +197,13 @@ public class OpenViduEventManager {
 		return events;
 	}
 	
-	public boolean assertMediaTracks(Iterable<WebElement> videoElements, boolean audioTransmission, boolean videoTransmission) {
+	private boolean hasAudioTracks(WebElement videoElement) {
-		boolean success = true;
-		for (WebElement video : videoElements) {
-			success = success && (audioTransmission == this.hasAudioTracks(video)) && (videoTransmission == this.hasVideoTracks(video));
-			if (!success) break;
-		}
-		return success;
-	}
-	
-	public boolean hasAudioTracks(WebElement videoElement) {
 		long numberAudioTracks = (long) ((JavascriptExecutor) driver)
 				.executeScript("return $('#" + videoElement.getAttribute("id") + "').prop('srcObject').getAudioTracks().length;");
 		return (numberAudioTracks > 0);
 	}
 	
-	public boolean hasVideoTracks(WebElement videoElement) {
+	private boolean hasVideoTracks(WebElement videoElement) {
 		long numberAudioTracks = (long) ((JavascriptExecutor) driver)
 				.executeScript("return $('#" + videoElement.getAttribute("id") + "').prop('srcObject').getVideoTracks().length;");
 		return (numberAudioTracks > 0);

openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduTestAppE2eTest.java

@@ -36,6 +36,8 @@ import org.openqa.selenium.WebElement;
 import org.slf4j.Logger;
 
 import io.github.bonigarcia.SeleniumExtension;
+import io.openvidu.java.client.OpenVidu;
+import io.openvidu.java.client.Session;
 import io.openvidu.test.e2e.browser.BrowserUser;
 import io.openvidu.test.e2e.browser.ChromeUser;
 import io.openvidu.test.e2e.browser.FirefoxUser;
@@ -52,34 +54,45 @@ import io.openvidu.test.e2e.browser.FirefoxUser;
 @RunWith(JUnitPlatform.class)
 public class OpenViduTestAppE2eTest {
 	
+	static Exception ex = null;
+    private final Object lock = new Object();
+
 	final Logger log = getLogger(lookup().lookupClass());
 
-	final String DEFAULT_SESSION_NAME = "TestSession";
+	final String OPENVIDU_URL = "https://localhost:8443/";
+	final String OPENVIDU_SECRET = "MY_SECRET";
 
-	String testAppUrl = "http://localhost:4200/"; // default value (local)
+	final String DEFAULT_APP_URL = "http://localhost:4200/";
 
 	BrowserUser user;
 
 	@BeforeEach
 	void setup() {
-		this.user = new FirefoxUser("TestUser", 30);
+		this.user = new ChromeUser("TestUser", 30);
+
+		user.getDriver().get(DEFAULT_APP_URL);
+
+		WebElement urlInput = user.getDriver().findElement(By.id("openvidu-url"));
+		urlInput.clear();
+		urlInput.sendKeys(OPENVIDU_URL);
+		WebElement secretInput = user.getDriver().findElement(By.id("openvidu-secret"));
+		secretInput.clear();
+		secretInput.sendKeys(OPENVIDU_SECRET);
+
+		user.getEventManager().startPolling();
 	}
 
 	@Test
 	@DisplayName("One2One [Video + Audio]")
-	void oneToOneVideoAudioSession() throws InterruptedException {
+	void oneToOneVideoAudioSession() throws Exception {
 
-		user.getEventManager().startPolling();
-
-		log.debug("Navigate to openvidu-testapp and click on 1:1 scenario");
-
-		user.getDriver().get(testAppUrl);
 		user.getDriver().findElement(By.id("auto-join-checkbox")).click();
 		user.getDriver().findElement(By.id("one2one-btn")).click();
 
 		user.getEventManager().waitUntilNumberOfEvent("videoPlaying", 4);
 
-		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")), true, true));
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, true));
 
 		user.getDriver().findElement(By.id("remove-user-btn")).click();
 
@@ -95,11 +108,8 @@ public class OpenViduTestAppE2eTest {
 
 	@Test
 	@DisplayName("One2One [Audio]")
-	void oneToOneAudioSession() throws InterruptedException {
+	void oneToOneAudioSession() throws Exception {
 
-		user.getEventManager().startPolling();
-
-		user.getDriver().get(testAppUrl);
 		user.getDriver().findElement(By.id("one2one-btn")).click();
 
 		List<WebElement> l1 = user.getDriver().findElements(By.className("send-video-checkbox"));
@@ -118,7 +128,8 @@ public class OpenViduTestAppE2eTest {
 		user.getEventManager().waitUntilNumberOfEvent("streamCreated", 1);
 		user.getEventManager().waitUntilNumberOfEvent("videoPlaying", 4);
 
-		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")), true, false));
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, false));
 
 		user.getDriver().findElement(By.id("remove-user-btn")).click();
 
@@ -134,11 +145,8 @@ public class OpenViduTestAppE2eTest {
 
 	@Test
 	@DisplayName("One2One [Video]")
-	void oneToOneVideoSession() throws InterruptedException {
+	void oneToOneVideoSession() throws Exception {
 
-		user.getEventManager().startPolling();
-
-		user.getDriver().get(testAppUrl);
 		user.getDriver().findElement(By.id("one2one-btn")).click();
 
 		List<WebElement> l1 = user.getDriver().findElements(By.className("send-audio-checkbox"));
@@ -157,7 +165,8 @@ public class OpenViduTestAppE2eTest {
 		user.getEventManager().waitUntilNumberOfEvent("streamCreated", 1);
 		user.getEventManager().waitUntilNumberOfEvent("videoPlaying", 4);
 
-		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")), false, true));
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				false, true));
 
 		user.getDriver().findElement(By.id("remove-user-btn")).click();
 
@@ -173,13 +182,8 @@ public class OpenViduTestAppE2eTest {
 
 	@Test
 	@DisplayName("One2Many [Video + Audio]")
-	void oneToManyVideoAudioSession() throws InterruptedException {
+	void oneToManyVideoAudioSession() throws Exception {
 
-		user.getEventManager().startPolling();
-
-		log.debug("Navigate to openvidu-testapp and click on 1:N scenario");
-
-		user.getDriver().get(testAppUrl);
 		user.getDriver().findElement(By.id("auto-join-checkbox")).click();
 		user.getDriver().findElement(By.id("one2many-btn")).click();
 
@@ -196,13 +200,8 @@ public class OpenViduTestAppE2eTest {
 
 	@Test
 	@DisplayName("Unique user remote subscription [Video + Audio]")
-	void oneRemoteSubscription() throws InterruptedException {
+	void oneRemoteSubscription() throws Exception {
 
-		user.getEventManager().startPolling();
-
-		log.debug("Navigate to openvidu-testapp and join one user with remote subscription");
-
-		user.getDriver().get(testAppUrl);
 		user.getDriver().findElement(By.id("add-user-btn")).click();
 		user.getDriver().findElement(By.className("subscribe-remote-check")).click();
 		user.getDriver().findElement(By.className("join-btn")).click();
@@ -212,7 +211,8 @@ public class OpenViduTestAppE2eTest {
 		user.getEventManager().waitUntilNumberOfEvent("videoElementCreated", 1);
 		user.getEventManager().waitUntilNumberOfEvent("remoteVideoPlaying", 1);
 
-		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")), true, true));
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, true));
 
 		user.getDriver().findElement(By.className(("leave-btn"))).click();
 
@@ -223,13 +223,8 @@ public class OpenViduTestAppE2eTest {
 
 	@Test
 	@DisplayName("Unique user remote subscription [ScreenShare + Audio]")
-	void oneRemoteSubscriptionScreen() throws InterruptedException {
+	void oneRemoteSubscriptionScreen() throws Exception {
 
-		user.getEventManager().startPolling();
-
-		log.debug("Navigate to openvidu-testapp and join one user with remote subscription");
-
-		user.getDriver().get(testAppUrl);
 		user.getDriver().findElement(By.id("add-user-btn")).click();
 		user.getDriver().findElement(By.className("screen-radio")).click();
 		user.getDriver().findElement(By.className("subscribe-remote-check")).click();
@@ -240,7 +235,8 @@ public class OpenViduTestAppE2eTest {
 		user.getEventManager().waitUntilNumberOfEvent("videoElementCreated", 1);
 		user.getEventManager().waitUntilNumberOfEvent("remoteVideoPlaying", 1);
 
-		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")), true, true));
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, true));
 
 		user.getDriver().findElement(By.className(("leave-btn"))).click();
 
@@ -251,15 +247,12 @@ public class OpenViduTestAppE2eTest {
 
 	@Test
 	@DisplayName("Many2Many [Video + Audio]")
-	void manyToManyVideoAudioSession() throws InterruptedException {
+	void manyToManyVideoAudioSession() throws Exception {
 
-		user.getEventManager().startPolling();
+		WebElement addUser = user.getDriver().findElement(By.id("add-user-btn"));
-
+		for (int i = 0; i < 4; i++) {
-		user.getDriver().get(testAppUrl);
+			addUser.click();
-		user.getDriver().findElement(By.id("add-user-btn")).click();
+		}
-		user.getDriver().findElement(By.id("add-user-btn")).click();
-		user.getDriver().findElement(By.id("add-user-btn")).click();
-		user.getDriver().findElement(By.id("add-user-btn")).click();
 
 		List<WebElement> l = user.getDriver().findElements(By.className("join-btn"));
 		for (WebElement el : l) {
@@ -272,7 +265,8 @@ public class OpenViduTestAppE2eTest {
 		user.getEventManager().waitUntilNumberOfEvent("streamCreated", 6);
 		user.getEventManager().waitUntilNumberOfEvent("videoPlaying", 16);
 
-		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")), true, true));
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, true));
 
 		user.getDriver().findElement(By.id(("remove-user-btn"))).sendKeys(Keys.ENTER);
 		user.getEventManager().waitUntilNumberOfEvent("streamDestroyed", 3);
@@ -292,4 +286,133 @@ public class OpenViduTestAppE2eTest {
 		user.dispose();
 	}
 
+	@Test
+	@DisplayName("Secure Test")
+	void secureTest() throws Exception {
+
+		WebElement addUser = user.getDriver().findElement(By.id("add-user-btn"));
+		for (int i = 0; i < 4; i++) {
+			addUser.click();
+		}
+
+		OpenVidu OV = new OpenVidu(OPENVIDU_URL, OPENVIDU_SECRET);
+		Session session = OV.createSession();
+		String sessionId = session.getSessionId();
+
+		List<WebElement> l1 = user.getDriver().findElements(By.className("secure-session-checkbox"));
+		for (WebElement el : l1) {
+			el.click();
+		}
+
+		List<WebElement> l2 = user.getDriver().findElements(By.className("sessionIdInput"));
+		for (WebElement el : l2) {
+			el.sendKeys(sessionId);
+		}
+
+		List<WebElement> l3 = user.getDriver().findElements(By.className("tokenInput"));
+		for (WebElement el : l3) {
+			String token = session.generateToken();
+			el.sendKeys(token);
+		}
+
+		List<WebElement> l4 = user.getDriver().findElements(By.className("join-btn"));
+		for (WebElement el : l4) {
+			el.sendKeys(Keys.ENTER);
+		}
+
+		user.getEventManager().waitUntilNumberOfEvent("connectionCreated", 16);
+		user.getEventManager().waitUntilNumberOfEvent("accessAllowed", 4);
+		user.getEventManager().waitUntilNumberOfEvent("videoElementCreated", 16);
+		user.getEventManager().waitUntilNumberOfEvent("streamCreated", 6);
+		user.getEventManager().waitUntilNumberOfEvent("videoPlaying", 16);
+
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, true));
+
+		user.getDriver().findElement(By.id(("remove-user-btn"))).sendKeys(Keys.ENTER);
+		user.getEventManager().waitUntilNumberOfEvent("streamDestroyed", 3);
+		user.getEventManager().waitUntilNumberOfEvent("sessionDisconnected", 1);
+
+		user.getDriver().findElement(By.id(("remove-user-btn"))).sendKeys(Keys.ENTER);
+		user.getEventManager().waitUntilNumberOfEvent("streamDestroyed", 4);
+		user.getEventManager().waitUntilNumberOfEvent("sessionDisconnected", 2);
+
+		user.getDriver().findElement(By.id(("remove-user-btn"))).sendKeys(Keys.ENTER);
+		user.getEventManager().waitUntilNumberOfEvent("streamDestroyed", 5);
+		user.getEventManager().waitUntilNumberOfEvent("sessionDisconnected", 3);
+
+		user.getDriver().findElement(By.id(("remove-user-btn"))).sendKeys(Keys.ENTER);
+		user.getEventManager().waitUntilNumberOfEvent("sessionDisconnected", 4);
+
+		user.dispose();
+	}
+	
+	@Test
+	@DisplayName("Cross-Browser test")
+	void crossBrowserTest() throws Exception {
+		
+		Thread.UncaughtExceptionHandler h = new Thread.UncaughtExceptionHandler() {
+		    public void uncaughtException(Thread th, Throwable ex) {
+		        System.out.println("Uncaught exception: " + ex);
+		        synchronized(lock) {
+		        	OpenViduTestAppE2eTest.ex = new Exception(ex);
+		        }
+		    }
+		};
+		
+		Thread t = new Thread(() -> {
+			BrowserUser user2 = new FirefoxUser("TestUser", 10);
+			user2.getDriver().get(DEFAULT_APP_URL);
+			WebElement urlInput = user2.getDriver().findElement(By.id("openvidu-url"));
+			urlInput.clear();
+			urlInput.sendKeys(OPENVIDU_URL);
+			WebElement secretInput = user2.getDriver().findElement(By.id("openvidu-secret"));
+			secretInput.clear();
+			secretInput.sendKeys(OPENVIDU_SECRET);
+
+			user2.getEventManager().startPolling();
+			
+			user2.getDriver().findElement(By.id("add-user-btn")).click();
+			user2.getDriver().findElement(By.className("join-btn")).click();
+			try {
+				user2.getEventManager().waitUntilNumberOfEvent("videoPlaying", 2);
+				Assert.assertTrue(user2.getEventManager().assertMediaTracks(user2.getDriver().findElements(By.tagName("video")),
+						true, true));
+				user2.getEventManager().waitUntilNumberOfEvent("streamDestroyed", 1);
+				user2.getDriver().findElement(By.id("remove-user-btn")).click();
+				user2.getEventManager().waitUntilNumberOfEvent("sessionDisconnected", 1);
+			} catch (Exception e) {
+				e.printStackTrace();
+				Thread.currentThread().interrupt();
+			}
+			user2.dispose();
+		});
+		t.setUncaughtExceptionHandler(h);
+		t.start();
+		
+		
+		user.getDriver().findElement(By.id("add-user-btn")).click();
+		user.getDriver().findElement(By.className("join-btn")).click();
+		
+		user.getEventManager().waitUntilNumberOfEvent("videoPlaying", 2);
+		
+
+		Assert.assertTrue(user.getEventManager().assertMediaTracks(user.getDriver().findElements(By.tagName("video")),
+				true, true));
+		
+		user.getDriver().findElement(By.id("remove-user-btn")).click();
+		
+		user.getEventManager().waitUntilNumberOfEvent("sessionDisconnected", 1);
+
+		user.dispose();
+		
+		t.join();
+		
+		synchronized(lock) {
+			if (OpenViduTestAppE2eTest.ex != null) {
+				throw OpenViduTestAppE2eTest.ex;
+			}
+		}
+	}
+
 }

openvidu-testapp/src/app/app.component.html

@@ -8,10 +8,10 @@
   </md-toolbar>
   <main>
     <md-form-field>
-      <input mdInput placeholder="OpenVidu Server URL" [ngModel]="openviduURL" (ngModelChange)="updateUrl($event)">
+      <input id="openvidu-url" mdInput placeholder="OpenVidu Server URL" [ngModel]="openviduURL" (ngModelChange)="updateUrl($event)">
     </md-form-field>
     <md-form-field>
-      <input mdInput placeholder="OpenVidu Server Secret" [ngModel]="openviduSecret" (ngModelChange)="updateSecret($event)">
+      <input id="openvidu-secret" mdInput placeholder="OpenVidu Server Secret" [ngModel]="openviduSecret" (ngModelChange)="updateSecret($event)">
     </md-form-field>
     <router-outlet></router-outlet>
   </main>

openvidu-testapp/src/app/app.component.ts

@@ -9,7 +9,7 @@ import { OpenviduParamsService } from './services/openvidu-params.service';
 })
 export class AppComponent {
 
-  openviduURL = 'https://localhost:8443';
+  openviduURL = 'https://localhost:8443/';
   openviduSecret = 'MY_SECRET';
 
   constructor(private router: Router, private openviduParamsService: OpenviduParamsService) { }
@@ -25,7 +25,11 @@ export class AppComponent {
   }
 
   updateParams() {
-    this.openviduParamsService.updateParams({ openviduUrl: this.openviduURL, openviduSecret: this.openviduSecret });
+    let myUrl = this.openviduURL;
+    if (!(myUrl.substring(myUrl.length - 1) === '/')) {
+      myUrl += '/';
+    }
+    this.openviduParamsService.updateParams({ openviduUrl: myUrl, openviduSecret: this.openviduSecret });
   }
 
 }

openvidu-testapp/src/app/app.module.ts

@@ -36,7 +36,7 @@ import { TestFeedService } from './services/test-feed.service';
     OpenviduParamsService,
     TestFeedService
   ],
-  entryComponents: [ ExtensionDialogComponent ],
+  entryComponents: [ExtensionDialogComponent],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

openvidu-testapp/src/app/app.routing.ts

@@ -18,4 +18,4 @@ const appRoutes: Routes = [
   }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.css

@@ -9,6 +9,7 @@ md-card {
   background-color: #ffffff;
   margin: 0;
   padding: 20px;
+  padding-top: 10px;
 }
 
 md-card.session-card {
@@ -131,3 +132,11 @@ md-expansion-panel-header {
   font-size: 10.5px !important;
   padding: 0 7px 0 9px !important;
 }
+
+.secure-div md-checkbox {
+  padding-right: 10px;
+}
+
+.secure-div md-form-field {
+  max-width: 80px;
+}

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.html

@@ -6,6 +6,16 @@
       <md-card-content>
         <form class="session-form">
 
+          <div class="secure-div">
+            <md-checkbox class="secure-session-checkbox" [disabled]="session" [(ngModel)]="secureSession" name="secureSession">SECURE</md-checkbox>
+            <md-form-field style="margin-right: 10px">
+              <input class="sessionIdInput" mdInput placeholder="SESSIONID" name="sessionIdInput" [(ngModel)]="sessionIdInput" [disabled]="!secureSession">
+            </md-form-field>
+            <md-form-field>
+              <input class="tokenInput" mdInput placeholder="TOKEN" name="tokenInput" [(ngModel)]="tokenInput" [disabled]="!secureSession">
+            </md-form-field>
+          </div>
+
           <div>
             <md-form-field style="margin-right: 10px">
               <input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName" [disabled]="session">
@@ -18,8 +28,10 @@
 
           <div>
             <button class="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
-            <md-checkbox class="subscribe-checkbox" name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo" [disabled]="session">Subscribe</md-checkbox>
+            <md-checkbox class="subscribe-checkbox" name="subscribeTo" (change)="toggleSubscribeTo()" [checked]="subscribeTo && checkSubscribeTo"
-            <md-checkbox class="publish-checkbox" name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo" [disabled]="session || disablePublishTo">Publish</md-checkbox>
+              [disabled]="session">Subscribe</md-checkbox>
+            <md-checkbox class="publish-checkbox" name="publishTo" (change)="togglePublishTo()" [checked]="publishTo && checkPublishTo"
+              [disabled]="session || disablePublishTo">Publish</md-checkbox>
           </div>
 
           <div class="inner-card" fxLayout="row" fxLayoutAlign="start start">
@@ -28,15 +40,19 @@
               <div>
                 <h4>Send</h4>
                 <div>
-                  <md-checkbox class="send-audio-checkbox" name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio" [disabled]="session || disableSendAudio">Audio</md-checkbox>
+                  <md-checkbox class="send-audio-checkbox" name="sendAudio" (change)="toggleSendAudio()" [checked]="sendAudio && checkSendAudio"
-                  <md-checkbox class="send-video-checkbox" name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo" [disabled]="session || disableSendVideo">Video</md-checkbox>
+                    [disabled]="session || disableSendAudio">Audio</md-checkbox>
+                  <md-checkbox class="send-video-checkbox" name="sendVideo" (change)="toggleSendVideo()" [checked]="sendVideo && checkSendVideo"
+                    [disabled]="session || disableSendVideo">Video</md-checkbox>
                 </div>
               </div>
               <div style="padding-top: 5px;">
                 <h4>Enter active</h4>
                 <div>
-                  <md-checkbox class="active-audio-checkbox" name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio" [disabled]="session || disableActiveAudio">Audio</md-checkbox>
+                  <md-checkbox class="active-audio-checkbox" name="activeAudio" (change)="toggleActiveAudio()" [checked]="activeAudio && checkActiveAudio"
-                  <md-checkbox class="active-video-checkbox" name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo" [disabled]="session || disableActiveVideo">Video</md-checkbox>
+                    [disabled]="session || disableActiveAudio">Audio</md-checkbox>
+                  <md-checkbox class="active-video-checkbox" name="activeVideo" (change)="toggleActiveVideo()" [checked]="activeVideo && checkActiveVideo"
+                    [disabled]="session || disableActiveVideo">Video</md-checkbox>
                 </div>
               </div>
             </div>
@@ -51,7 +67,8 @@
                 </div>
               </md-radio-group>
               <md-checkbox class="subscribe-remote-check" name="subscribeToRemote" (change)="subscribeToRemote = !subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session"
-                [checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe<br>to remote</md-checkbox>
+                [checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe
+                <br>to remote</md-checkbox>
             </div>
 
           </div>
@@ -68,9 +85,15 @@
         <div class="session-card-inner">
           <div class="session-title">{{sessionName}}</div>
           <div class="session-actions">
-            <button class="video-btn" *ngIf="publishTo && sendVideo" (click)="toggleVideo()"><md-icon aria-label="Mute video button">{{videoIcon}}</md-icon></button>
+            <button class="video-btn" *ngIf="publishTo && sendVideo" (click)="toggleVideo()">
-            <button class="audio-btn" *ngIf="publishTo && sendAudio" (click)="toggleAudio()"><md-icon aria-label="Mute audio button">{{audioIcon}}</md-icon></button>
+              <md-icon aria-label="Mute video button">{{videoIcon}}</md-icon>
-            <button class="leave-btn" (click)="leaveSession()"><md-icon aria-label="Leave button">clear</md-icon></button>
+            </button>
+            <button class="audio-btn" *ngIf="publishTo && sendAudio" (click)="toggleAudio()">
+              <md-icon aria-label="Mute audio button">{{audioIcon}}</md-icon>
+            </button>
+            <button class="leave-btn" (click)="leaveSession()">
+              <md-icon aria-label="Leave button">clear</md-icon>
+            </button>
           </div>
         </div>
       </div>
@@ -80,7 +103,8 @@
           <div class="event-list-div scroll-custom">
             <md-accordion [attr.id]="'events-' + session.connection.connectionId" class="event-list">
               <md-expansion-panel *ngFor="let event of events" class="event-item">
-                <md-expansion-panel-header [attr.id]="event.name + '-' + session.connection.connectionId" [collapsedHeight]="'20px'" [expandedHeight]="'20px'" class="event-name">
+                <md-expansion-panel-header [attr.id]="event.name + '-' + session.connection.connectionId" [collapsedHeight]="'20px'" [expandedHeight]="'20px'"
+                  class="event-name">
                   {{event.name}}
                 </md-expansion-panel-header>
                 <div class="event-content">{{event.content}}</div>

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -39,8 +39,11 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
   sessionConf: SessionConf;
 
   // Session join data
+  secureSession = false;
   clientData: string;
   sessionName: string;
+  sessionIdInput: string;
+  tokenInput: string;
 
   // Session options
   subscribeTo;
@@ -84,7 +87,9 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
 
   openviduError: any;
 
-  constructor(private changeDetector: ChangeDetectorRef, public extensionDialog: MdDialog, public testFeedService: TestFeedService) {
+  constructor(private changeDetector: ChangeDetectorRef,
+    private extensionDialog: MdDialog,
+    private testFeedService: TestFeedService) {
     this.generateSessionInfo();
   }
 
@@ -135,12 +140,27 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       this.leaveSession();
     }
 
-    const OV: OpenVidu = new OpenVidu();
+    let sessionId;
+    let token;
 
-    this.session = OV.initSession('wss://'
+    if (this.secureSession) {
+      sessionId = this.sessionIdInput;
+      token = this.tokenInput;
+    } else {
+      sessionId = 'wss://'
         + this.removeHttps(this.openviduUrl)
         + this.sessionName + '?secret='
-      + this.openviduSecret);
+        + this.openviduSecret;
+      token = null;
+    }
+    this.joinSessionShared(sessionId, token);
+  }
+
+  private joinSessionShared(sId, token): void {
+
+    const OV: OpenVidu = new OpenVidu();
+
+    this.session = OV.initSession(sId);
 
     this.session.on('streamCreated', (event) => {
 
@@ -178,7 +198,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
       this.updateEventList('sessionDisconnected', 'No data');
     });
 
-    this.session.connect(null, this.clientData, (error) => {
+    this.session.connect(token, this.clientData, (error) => {
       if (!error) {
         if (this.publishTo) {
 

openvidu-testapp/src/app/services/openvidu-rest.service.ts

@@ -29,8 +29,6 @@ export class OpenviduRestService {
   }
 
   getToken(openviduURL: string, openviduSecret: string, sessionId: string, role: string, serverData: string): Promise<string> {
-    console.warn(sessionId);
-
     const session: SessionAPI = this.sessionIdSession.get(sessionId);
     const OVRole: OpenViduRoleAPI = OpenViduRoleAPI[role];