openvidu-browser updated to 1.0.3-beta.3. Mute local videos

openvidu-getaroom/web/app.js

@@ -42,7 +42,7 @@ function joinRoom(sessionId) {
 	OV = new OpenVidu();
 
 	// We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server, with secure WebSocket protocol ('wss://')
-	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId);
+	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET');
 
 
 	// --- 2) Specify the actions when events take place ---
@@ -84,6 +84,7 @@ function joinRoom(sessionId) {
 			publisher.on('videoElementCreated', function (event) {
 				numOfVideos++;
 				updateLayout();
+				$(event.element).prop('muted', true);
 			});
 
 			// --- 5) Publish your stream ---

openvidu-getaroom/web/index.html

@@ -17,7 +17,7 @@
 	<!-- Bootstrap -->
 
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.0.3-beta.1.js"></script>
+	<script src="openvidu-browser-1.0.3-beta.3.js"></script>
 	<script src="app.js"></script>
 </head>
 

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

@@ -47,7 +47,7 @@ export class AppComponent {
     this.OV = new OpenVidu();
 
     // We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server
-    this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionId);
+    this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionId + '?secret=MY_SECRET');
 
 
     // --- 2) Specify the actions when events take place ---

openvidu-insecure-js/web/app.js

@@ -13,8 +13,8 @@ window.onbeforeunload = function () {
 };
 
 function generateParticipantInfo() {
-	document.getElementById("sessionId").value = "SessionA";
-	document.getElementById("participantId").value = "Participant" + Math.floor(Math.random() * 100);
+	$("#sessionId").val("SessionA");
+	$("#participantId").val("Participant" + Math.floor(Math.random() * 100));
 }
 
 function appendUserData(videoElement, connection) {
@@ -61,6 +61,7 @@ function addClickListener(videoElement, userData) {
 function initMainVideo(videoElement, userData) {
 	document.querySelector('#main-video video').src = videoElement.src;
 	document.querySelector('#main-video p').innerHTML = userData;
+	$('#main-video video').prop('muted', true);
 }
 
 /* APPLICATION SPECIFIC METHODS */
@@ -80,7 +81,7 @@ function joinSession() {
 	OV = new OpenVidu();
 
 	// We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server
-	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId);
+	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET');
 
 
 	// --- 2) Specify the actions when events take place ---
@@ -128,6 +129,7 @@ function joinSession() {
 			publisher.on('videoElementCreated', function (event) {
 				initMainVideo(event.element, token);
 				appendUserData(event.element, token);
+				$(event.element).prop('muted', true);
 			});
 
 			// --- 5) Publish your stream ---

openvidu-insecure-js/web/index.html

@@ -17,7 +17,7 @@
 	<!-- Bootstrap -->
 
 	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.0.3-beta.1.js"></script>
+	<script src="openvidu-browser-1.0.3-beta.3.js"></script>
 	<script src="app.js"></script>
 </head>
 
@@ -73,4 +73,4 @@
 
 </body>
 
-</html>
+</html>

openvidu-js-java/src/main/resources/static/app.js

@@ -27,10 +27,10 @@ function joinSession() {
 			// Subscribe to the Stream to receive it
 			// HTML video will be appended to element with 'video-container' id
 			var subscriber = session.subscribe(event.stream, 'video-container');
-			
+
 			// When the HTML video has been appended to DOM...
 			subscriber.on('videoElementCreated', function (event) {
-			
+
 				// Add a new HTML element for the user's name and nickname over its video
 				appendUserData(event.element, subscriber.stream.connection);
 			});
@@ -67,9 +67,13 @@ function joinSession() {
 					// When our HTML video has been added to DOM...
 					publisher.on('videoElementCreated', function (event) {
 						// Init the main video with ours and append our data
-						var userData = {nickName: nickName, userName: userName};
+						var userData = {
+							nickName: nickName,
+							userName: userName
+						};
 						initMainVideo(event.element, userData);
 						appendUserData(event.element, userData);
+						$(event.element).prop('muted', true);
 					});
 
 
@@ -228,7 +232,7 @@ function appendUserData(videoElement, connection) {
 
 function removeUserData(connection) {
 	var userNameRemoved = $("#data-" + connection.connectionId);
-	if ($(userNameRemoved).find('p.userName').html() === $('#main-video p.userName').html()){
+	if ($(userNameRemoved).find('p.userName').html() === $('#main-video p.userName').html()) {
 		cleanMainVideo(); // The participant focused in the main video has left
 	}
 	$("#data-" + connection.connectionId).remove();
@@ -260,6 +264,7 @@ function initMainVideo(videoElement, userData) {
 	$('#main-video video').attr("src", videoElement.src);
 	$('#main-video p.nickName').html(userData.nickName);
 	$('#main-video p.userName').html(userData.userName);
+	$('#main-video video').prop('muted', true);
 }
 
 function initMainVideoThumbnail() {

openvidu-js-java/src/main/resources/static/index.html

@@ -17,7 +17,7 @@
 	<!-- Bootstrap -->
 
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.0.3-beta.1.js"></script>
+	<script src="openvidu-browser-1.0.3-beta.3.js"></script>
 	<script src="app.js"></script>
 	<script>
 		$(document).ready(function () {
@@ -130,4 +130,4 @@
 
 </body>
 
-</html>
+</html>

openvidu-js-node/public/app.js

@@ -27,10 +27,10 @@ function joinSession() {
 			// Subscribe to the Stream to receive it
 			// HTML video will be appended to element with 'video-container' id
 			var subscriber = session.subscribe(event.stream, 'video-container');
-			
+
 			// When the HTML video has been appended to DOM...
 			subscriber.on('videoElementCreated', function (event) {
-			
+
 				// Add a new HTML element for the user's name and nickname over its video
 				appendUserData(event.element, subscriber.stream.connection);
 			});
@@ -67,9 +67,13 @@ function joinSession() {
 					// When our HTML video has been added to DOM...
 					publisher.on('videoElementCreated', function (event) {
 						// Init the main video with ours and append our data
-						var userData = {nickName: nickName, userName: userName};
+						var userData = {
+							nickName: nickName,
+							userName: userName
+						};
 						initMainVideo(event.element, userData);
 						appendUserData(event.element, userData);
+						$(event.element).prop('muted', true);
 					});
 
 
@@ -123,7 +127,7 @@ function logIn() {
 		'pass': pass
 	});
 
-	httpRequest('POST', '/api-login/login', jsonBody, 'Login WRONG', function successCallback(response) {
+	httpRequest('POST', 'api-login/login', jsonBody, 'Login WRONG', function successCallback(response) {
 		console.warn(userName + ' login');
 		$("#name-user").text(user);
 		$("#not-logged").hide();
@@ -135,7 +139,7 @@ function logIn() {
 }
 
 function logOut() {
-	httpRequest('GET', '/api-login/logout', null, 'Logout WRONG', function successCallback(response) {
+	httpRequest('GET', 'api-login/logout', null, 'Logout WRONG', function successCallback(response) {
 		console.warn(userName + ' logout');
 		$("#not-logged").show();
 		$("#logged").hide();
@@ -149,7 +153,7 @@ function getSessionIdAndToken(callback) {
 		'session': sessionName
 	});
 
-	httpRequest('POST', '/api-sessions/get-sessionid-token', jsonBody, 'Request of SESSIONID and TOKEN gone WRONG:', function successCallback(response) {
+	httpRequest('POST', 'api-sessions/get-sessionid-token', jsonBody, 'Request of SESSIONID and TOKEN gone WRONG:', function successCallback(response) {
 		sessionId = response[0];
 		token = response[1];
 		console.warn('Request of SESSIONID and TOKEN gone WELL (SESSIONID:' + sessionId + ", TOKEN:" + token + ")");
@@ -163,7 +167,7 @@ function removeUser() {
 		'token': token
 	});
 
-	httpRequest('POST', '/api-sessions/remove-user', jsonBody, 'User couldn\'t be removed from session', function successCallback(response) {
+	httpRequest('POST', 'api-sessions/remove-user', jsonBody, 'User couldn\'t be removed from session', function successCallback(response) {
 		console.warn(userName + " correctly removed from session");
 	});
 }
@@ -228,7 +232,7 @@ function appendUserData(videoElement, connection) {
 
 function removeUserData(connection) {
 	var userNameRemoved = $("#data-" + connection.connectionId);
-	if ($(userNameRemoved).find('p.userName').html() === $('#main-video p.userName').html()){
+	if ($(userNameRemoved).find('p.userName').html() === $('#main-video p.userName').html()) {
 		cleanMainVideo(); // The participant focused in the main video has left
 	}
 	$("#data-" + connection.connectionId).remove();
@@ -260,6 +264,7 @@ function initMainVideo(videoElement, userData) {
 	$('#main-video video').attr("src", videoElement.src);
 	$('#main-video p.nickName').html(userData.nickName);
 	$('#main-video p.userName').html(userData.userName);
+	$('#main-video video').prop('muted', true);
 }
 
 function initMainVideoThumbnail() {

openvidu-js-node/public/index.html

@@ -17,7 +17,7 @@
 	<!-- Bootstrap -->
 
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.0.3-beta.1.js"></script>
+	<script src="openvidu-browser-1.0.3-beta.3.js"></script>
 	<script src="app.js"></script>
 	<script>
 		$(document).ready(function () {

openvidu-mvc-java/src/main/resources/templates/session.html

@@ -17,7 +17,7 @@
 	<!-- Bootstrap -->
 
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen"></link>
-	<script src="openvidu-browser-1.0.3-beta.1.js"></script>
+	<script src="openvidu-browser-1.0.3-beta.3.js"></script>
 </head>
 
 <body>
@@ -65,7 +65,7 @@
 </body>
 
 <script th:inline="javascript">
-	
+
 	// Get all the attributes from the template in Thymeleaf style
 	var sessionId = [[${sessionId}]];
 	var token = [[${token}]];
@@ -90,10 +90,10 @@
 		// Subscribe to the Stream to receive it
 		// HTML video will be appended to element with 'video-container' id
 		var subscriber = session.subscribe(event.stream, 'video-container');
-		
+
 		// When the HTML video has been appended to DOM...
 		subscriber.on('videoElementCreated', function (event) {
-		
+
 			// Add a new HTML element for the user's name and nickname over its video
 			appendUserData(event.element, subscriber.stream.connection);
 		});
@@ -130,9 +130,13 @@
 				// When our HTML video has been added to DOM...
 				publisher.on('videoElementCreated', function (event) {
 					// Init the main video with ours and append our data
-					var userData = {nickName: nickName, userName: userName};
+					var userData = {
+						nickName: nickName,
+						userName: userName
+					};
 					initMainVideo(event.element, userData);
 					appendUserData(event.element, userData);
+					$(event.element).prop('muted', true);
 				});
 
 
@@ -172,7 +176,7 @@
 		var dataNode = document.createElement('div');
 		dataNode.className = "data-node";
 		dataNode.id = "data-" + nodeId;
-		dataNode.innerHTML = '<p class="nickName">' + clientData + '</p><p class="userName">'+ serverData + '</p>';
+		dataNode.innerHTML = '<p class="nickName">' + clientData + '</p><p class="userName">' + serverData + '</p>';
 		videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
 		addClickListener(videoElement, clientData, serverData);
 	}
@@ -211,6 +215,7 @@
 		$('#main-video video').attr("src", videoElement.src);
 		$('#main-video p.nickName').html(userData.nickName);
 		$('#main-video p.userName').html(userData.userName);
+		$('#main-video video').prop('muted', true);
 	}
 
 	function initMainVideoThumbnail() {

openvidu-mvc-node/views/session.ejs

@@ -17,7 +17,7 @@
 	<!-- Bootstrap -->
 
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen"></link>
-	<script src="openvidu-browser-1.0.3-beta.1.js"></script>
+	<script src="openvidu-browser-1.0.3-beta.3.js"></script>
 </head>
 
 <body>
@@ -92,7 +92,7 @@
 		// When the HTML video has been appended to DOM...
 		subscriber.on('videoElementCreated', function (event) {
 		
-			// Add a new HTML element for the user's name and nickname just below its video
+			// Add a new HTML element for the user's name and nickname over its video
 			appendUserData(event.element, subscriber.stream.connection);
 		});
 	});
@@ -115,7 +115,7 @@
 			// trying to publish its stream. Even if someone modified the client's code and
 			// published the stream, it wouldn't work if the token sent in Session.connect
 			// method doesn't belong to a 'PUBLIHSER' role
-			if (isPublisher(userName)) {
+			if (isPublisher()) {
 
 				// --- 4) Get your own camera stream ---
 
@@ -128,9 +128,13 @@
 				// When our HTML video has been added to DOM...
 				publisher.on('videoElementCreated', function (event) {
 					// Init the main video with ours and append our data
-					var userData = {nickName: nickName, userName: userName};
+					var userData = {
+						nickName: nickName,
+						userName: userName
+					};
 					initMainVideo(event.element, userData);
 					appendUserData(event.element, userData);
+					$(event.element).prop('muted', true);
 				});
 
 
@@ -150,7 +154,7 @@
 	
 	function leaveSession() {
 
-		// 6) Leave the session by calling 'disconnect' method over the Session object
+		// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
 		session.disconnect();
 	}
 
@@ -170,7 +174,7 @@
 		var dataNode = document.createElement('div');
 		dataNode.className = "data-node";
 		dataNode.id = "data-" + nodeId;
-		dataNode.innerHTML = '<p class="nickName">' + clientData + '</p><p class="userName">'+ serverData + '</p>';
+		dataNode.innerHTML = '<p class="nickName">' + clientData + '</p><p class="userName">' + serverData + '</p>';
 		videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
 		addClickListener(videoElement, clientData, serverData);
 	}
@@ -209,6 +213,7 @@
 		$('#main-video video').attr("src", videoElement.src);
 		$('#main-video p.nickName').html(userData.nickName);
 		$('#main-video p.userName').html(userData.userName);
+		$('#main-video video').prop('muted', true);
 	}
 
 	function initMainVideoThumbnail() {