openvidu-browser to 1.0.5-beta.3. deprecated src to srcObject

openvidu-getaroom/web/app.js

@@ -23,7 +23,7 @@ window.addEventListener('load', function () {
 
 // Disconnect participant on browser's window closed
 window.addEventListener('beforeunload', function () {
-	session.disconnect();
+	if (session) session.disconnect();
 });
 
 

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.4-beta.3.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 	<script src="app.js"></script>
 </head>
 
@@ -37,13 +37,16 @@
 		<div class="container">
 			<div class="navbar-header">
 				<a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> getaroom</a>
-				<button id="leave-room" type="button" class="btn btn-danger" onclick="leaveRoom()">Leave Room</button>
-				<form>
+				<button id="leave-room" type="button" class="btn btn-danger" onclick="leaveRoom()">
+					<span class="hidden-xs">Leave Room</span>
+					<span class="hidden-sm hidden-md hidden-lg">Leave</span>
+				</button>
+				<form class="hidden-xs">
 					<div class="input-group">
 						<input type="text" class="form-control" placeholder="Some path" id="copy-input">
 						<span class="input-group-btn">
-								<button class="btn btn-default" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard">Share the URL</button>
-							</span>
+							<button class="btn btn-default" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard">Share the URL</button>
+						</span>
 					</div>
 				</form>
 				<button id="mute-video" type="button" class="btn btn-primary float-right mute-button" onclick="muteVideo()">

openvidu-getaroom/web/style.css

@@ -127,6 +127,7 @@ a:hover .demo-logo {
 
 #join-dialog {
 	margin-top: 0;
+	max-width: 600px;
 }
 
 #join-dialog h1 {
@@ -227,35 +228,6 @@ video {
 }
 
 
-/* xs ans md screen resolutions*/
-
-@media screen and (max-width: 991px) and (orientation: portrait) {
-	.vertical-center {
-		width: 85%;
-		padding-top: 10px;
-		top: 27%;
-	}
-	.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
-		margin-right: 0;
-		margin-left: 0;
-	}
-	.navbar-header i.fa {
-		font-size: 30px;
-	}
-	.navbar-header a.nav-icon {
-		padding: 7px 3px 7px 3px;
-	}
-}
-
-@media only screen and (max-height: 767px) and (orientation: landscape) {
-	#img-div {
-		top: 10%;
-	}
-	.vertical-center {
-		top: 27%;
-	}
-}
-
 html,
 body {
 	height: 100%;
@@ -325,10 +297,69 @@ span.glyphicon {
 	line-height: 16px;
 }
 
+.noheight {
+	height: auto !important;
+}
+
+nav#nav-session {
+	margin-bottom: 0;
+	border-radius: 0;
+	position: absolute;
+}
+
+nav#nav-session div.container {
+	padding-top: 8px;
+	padding-bottom: 8;
+}
+
+nav#nav-session .navbar-brand {
+	padding-top: 7px;
+}
+
+#leave-room {
+	float: right;
+	margin-left: 5px;
+}
+
+form {
+	max-width: 30%;
+	float: right;
+}
+
+.float-right {
+	float: right;
+}
+
+.mute-button {
+	margin-right: 5px;
+	background: #0088aa;
+}
+
+button {
+	font-weight: bold !important;
+}
+
+
+
 
 /* xs ans md screen resolutions*/
 
 @media screen and (max-width: 991px) {
+	.vertical-center {
+		width: 85%;
+		padding-top: 10px;
+		top: 27%;
+	}
+	.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
+		margin-right: 0;
+		margin-left: 0;
+	}
+	.navbar-header i.fa {
+		font-size: 30px;
+	}
+	.navbar-header a.nav-icon {
+		padding: 7px 3px 7px 3px;
+	}
 	#publisher video {
 		height: 100%;
 	}
@@ -372,44 +403,30 @@ span.glyphicon {
 	}
 }
 
-.noheight {
-	height: auto !important;
+@media screen and (max-width: 767px) {
+	button {
+		padding: 6px 6px 6px 6px !important;
+	}
+	#nav-session .container {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	a.navbar-brand {
+		font-size: 13px;
+		line-height: 16px;
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	a.navbar-brand img {
+		height: 17px;
+	}
 }
 
-nav#nav-session {
-	margin-bottom: 0;
-	border-radius: 0;
-	position: absolute;
-}
-
-nav#nav-session div.container {
-	padding-top: 8px;
-	padding-bottom: 8;
-}
-
-nav#nav-session .navbar-brand {
-	padding-top: 7px;
-}
-
-#leave-room {
-	float: right;
-	margin-left: 5px;
-}
-
-form {
-	max-width: 30%;
-	float: right;
-}
-
-.float-right {
-	float: right;
-}
-
-.mute-button {
-	margin-right: 5px;
-	background: #0088aa;
-}
-
-button {
-	font-weight: bold !important;
+@media only screen and (max-height: 767px) and (orientation: landscape) {
+	#img-div {
+		top: 10%;
+	}
+	.vertical-center {
+		top: 27%;
+	}
 }

openvidu-hello-world/web/app.js

@@ -38,7 +38,6 @@ function leaveSession() {
 	document.getElementById('session').style.display = 'none';
 }
 
-
 window.onbeforeunload = function () {
-	session.disconnect()
+	if (session) session.disconnect()
 };

openvidu-hello-world/web/index.html

@@ -3,7 +3,7 @@
 <head>
 	<title>openvidu-hello-world</title>
 	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
-	<script src="openvidu-browser-1.0.4-beta.3.min.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 	<script src="app.js"></script>
 </head>
 

openvidu-insecure-angular/package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
     "core-js": "^2.4.1",
-    "openvidu-browser": "1.0.4-beta.3",
+    "openvidu-browser": "1.0.5-beta.3",
     "zone.js": "^0.7.6"
   },
   "devDependencies": {

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

@@ -1,5 +1,4 @@
-import { Component, Input, Output, DoCheck, EventEmitter } from '@angular/core';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Component, Input, Output, AfterViewInit, DoCheck, EventEmitter, ViewChild, ElementRef } from '@angular/core';
 
 import { Stream } from 'openvidu-browser';
 
@@ -26,12 +25,16 @@ import { Stream } from 'openvidu-browser';
         }`],
     template: `
         <div>
-          <video [src]="videoSrc" [id]="'native-video-' + this.stream.connection.connectionId + '_webcam'"
+          <video #videoElement [id]="'native-video-' + this.stream.connection.connectionId + '_webcam'"
             (click)="this.videoClicked()" autoplay="true" [muted]="this.isMuted"></video>
           <div [id]="'data-' + this.stream.connection.connectionId"><p>{{this.getNicknameTag()}}</p></div>
         </div>`
 })
-export class StreamComponent implements DoCheck {
+export class StreamComponent implements AfterViewInit, DoCheck {
+
+    @ViewChild('videoElement') elementRef: ElementRef;
+
+    videoElement: HTMLVideoElement;
 
     @Input()
     stream: Stream;
@@ -42,21 +45,15 @@ export class StreamComponent implements DoCheck {
     @Output()
     mainVideoStream = new EventEmitter();
 
-    videoSrc: SafeUrl = '';
-    videSrcUnsafe = '';
+    constructor() { }
 
-    constructor(private sanitizer: DomSanitizer) { }
+    ngAfterViewInit() { // Get HTMLVideoElement from the view
+        this.videoElement = this.elementRef.nativeElement;
+    }
 
-    ngDoCheck() { // Detect any change in 'stream' property
-
-        // If 'src' of Stream object has changed, 'videoSrc' value must be updated
-        if (!(this.videSrcUnsafe === this.stream.getVideoSrc())) {
-
-            // Angular mandatory URL sanitization
-            this.videoSrc = this.sanitizer.bypassSecurityTrustUrl(this.stream.getVideoSrc());
-
-            // Auxiliary value to store the URL as a string for upcoming comparisons
-            this.videSrcUnsafe = this.stream.getVideoSrc();
+    ngDoCheck() { // Detect any change in 'stream' property (specifically in its 'srcObject' property)
+        if (this.videoElement && (this.videoElement.srcObject !== this.stream.getVideoSrcObject())) {
+            this.videoElement.srcObject = this.stream.getVideoSrcObject();
         }
     }
 

openvidu-insecure-angular/src/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>openvidu-insecure-angular</title>
+  <link rel="shortcut icon" href="favicon.ico">
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">

openvidu-insecure-js/web/app.js

@@ -110,7 +110,7 @@ window.addEventListener('load', function () {
 });
 
 window.onbeforeunload = function () {
-	session.disconnect();
+	if (session) session.disconnect();
 };
 
 function generateParticipantInfo() {
@@ -152,15 +152,15 @@ function addClickListener(videoElement, userData) {
 	videoElement.addEventListener('click', function () {
 		var mainVideo = document.querySelector('#main-video video');
 		var mainUserData = document.querySelector('#main-video p');
-		if (mainVideo.src !== videoElement.src) {
+		if (mainVideo.srcObject !== videoElement.srcObject) {
 			mainUserData.innerHTML = userData;
-			mainVideo.src = videoElement.src;
+			mainVideo.srcObject = videoElement.srcObject;
 		}
 	});
 }
 
 function initMainVideo(videoElement, userData) {
-	document.querySelector('#main-video video').src = videoElement.src;
+	document.querySelector('#main-video video').srcObject = videoElement.srcObject;
 	document.querySelector('#main-video p').innerHTML = userData;
 	document.querySelector('#main-video video')['muted'] = true;
 }

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.4-beta.3.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 	<script src="app.js"></script>
 </head>
 
@@ -59,7 +59,7 @@
 				<h1 id="session-title"></h1>
 				<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" onmouseup="leaveSession()" value="Leave session">
 			</div>
-			<div id="main-video" class="col-md-6"><p></p><video autoplay src=""></video></div>
+			<div id="main-video" class="col-md-6"><p></p><video autoplay></video></div>
 			<div id="video-container" class="col-md-6"></div>
 		</div>
 	</div>

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

@@ -248,7 +248,7 @@ function removeAllUserData() {
 }
 
 function cleanMainVideo() {
-	$('#main-video video').attr('src', '');
+	$('#main-video video').get(0).srcObject = null;
 	$('#main-video p').each(function () {
 		$(this).html('');
 	});
@@ -256,17 +256,17 @@ function cleanMainVideo() {
 
 function addClickListener(videoElement, clientData, serverData) {
 	videoElement.addEventListener('click', function () {
-		var mainVideo = $('#main-video video');
-		if (mainVideo.attr('src') !== videoElement.src) {
+		var mainVideo = $('#main-video video').get(0);
+		if (mainVideo.srcObject !== videoElement.srcObject) {
 			$('#main-video p.nickName').html(clientData);
 			$('#main-video p.userName').html(serverData);
-			mainVideo.attr('src', videoElement.src);
+			mainVideo.srcObject = videoElement.srcObject;
 		}
 	});
 }
 
 function initMainVideo(videoElement, userData) {
-	$('#main-video video').attr("src", videoElement.src);
+	$('#main-video video').get(0).srcObject = videoElement.srcObject;
 	$('#main-video p.nickName').html(userData.nickName);
 	$('#main-video p.userName').html(userData.userName);
 	$('#main-video video').prop('muted', true);

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.4-beta.3.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 	<script src="app.js"></script>
 	<script>
 		$(document).ready(function () {
@@ -114,7 +114,7 @@
 				<div id="main-video" class="col-md-6">
 					<p class="nickName"></p>
 					<p class="userName"></p>
-					<video autoplay src=""></video>
+					<video autoplay></video>
 				</div>
 				<div id="video-container" class="col-md-6"></div>
 			</div>

openvidu-js-node/public/app.js

@@ -248,7 +248,7 @@ function removeAllUserData() {
 }
 
 function cleanMainVideo() {
-	$('#main-video video').attr('src', '');
+	$('#main-video video').get(0).srcObject = null;
 	$('#main-video p').each(function () {
 		$(this).html('');
 	});
@@ -256,17 +256,17 @@ function cleanMainVideo() {
 
 function addClickListener(videoElement, clientData, serverData) {
 	videoElement.addEventListener('click', function () {
-		var mainVideo = $('#main-video video');
-		if (mainVideo.attr('src') !== videoElement.src) {
+		var mainVideo = $('#main-video video').get(0);
+		if (mainVideo.srcObject !== videoElement.srcObject) {
 			$('#main-video p.nickName').html(clientData);
 			$('#main-video p.userName').html(serverData);
-			mainVideo.attr('src', videoElement.src);
+			mainVideo.srcObject = videoElement.srcObject;
 		}
 	});
 }
 
 function initMainVideo(videoElement, userData) {
-	$('#main-video video').attr("src", videoElement.src);
+	$('#main-video video').get(0).srcObject = videoElement.srcObject;
 	$('#main-video p.nickName').html(userData.nickName);
 	$('#main-video p.userName').html(userData.userName);
 	$('#main-video video').prop('muted', true);

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.4-beta.3.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 	<script src="app.js"></script>
 	<script>
 		$(document).ready(function () {
@@ -114,7 +114,7 @@
 				<div id="main-video" class="col-md-6">
 					<p class="nickName"></p>
 					<p class="userName"></p>
-					<video autoplay src=""></video>
+					<video autoplay></video>
 				</div>
 				<div id="video-container" class="col-md-6"></div>
 			</div>

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.4-beta.3.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 </head>
 
 <body>
@@ -48,7 +48,7 @@
 				<div id="main-video" class="col-md-6">
 					<p class="nickName"></p>
 					<p class="userName"></p>
-					<video autoplay="true" src=""></video>
+					<video autoplay="true"></video>
 				</div>
 				<div id="video-container" class="col-md-6"></div>
 			</div>
@@ -194,7 +194,7 @@
 	}
 
 	function cleanMainVideo() {
-		$('#main-video video').attr('src', '');
+		$('#main-video video').get(0).srcObject = null;
 		$('#main-video p').each(function () {
 			$(this).html('');
 		});
@@ -202,17 +202,17 @@
 
 	function addClickListener(videoElement, clientData, serverData) {
 		videoElement.addEventListener('click', function () {
-			var mainVideo = $('#main-video video');
-			if (mainVideo.attr('src') !== videoElement.src) {
+			var mainVideo = $('#main-video video').get(0);
+			if (mainVideo.srcObject !== videoElement.srcObject) {
 				$('#main-video p.nickName').html(clientData);
 				$('#main-video p.userName').html(serverData);
-				mainVideo.attr('src', videoElement.src);
+				mainVideo.srcObject = videoElement.srcObject;
 			}
 		});
 	}
 
 	function initMainVideo(videoElement, userData) {
-		$('#main-video video').attr("src", videoElement.src);
+		$('#main-video video').get(0).srcObject = videoElement.srcObject;
 		$('#main-video p.nickName').html(userData.nickName);
 		$('#main-video p.userName').html(userData.userName);
 		$('#main-video video').prop('muted', true);

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.4-beta.3.js"></script>
+	<script src="openvidu-browser-1.0.5-beta.3.js"></script>
 </head>
 
 <body>
@@ -48,7 +48,7 @@
 				<div id="main-video" class="col-md-6">
 					<p class="nickName"></p>
 					<p class="userName"></p>
-					<video autoplay="true" src=""></video>
+					<video autoplay="true"></video>
 				</div>
 				<div id="video-container" class="col-md-6"></div>
 			</div>
@@ -193,7 +193,7 @@
 	}
 
 	function cleanMainVideo() {
-		$('#main-video video').attr('src', '');
+		$('#main-video video').get(0).srcObject = null;
 		$('#main-video p').each(function () {
 			$(this).html('');
 		});
@@ -201,17 +201,17 @@
 
 	function addClickListener(videoElement, clientData, serverData) {
 		videoElement.addEventListener('click', function () {
-			var mainVideo = $('#main-video video');
-			if (mainVideo.attr('src') !== videoElement.src) {
+			var mainVideo = $('#main-video video').get(0);
+			if (mainVideo.srcObject !== videoElement.srcObject) {
 				$('#main-video p.nickName').html(clientData);
 				$('#main-video p.userName').html(serverData);
-				mainVideo.attr('src', videoElement.src);
+				mainVideo.srcObject = videoElement.srcObject;
 			}
 		});
 	}
 
 	function initMainVideo(videoElement, userData) {
-		$('#main-video video').attr("src", videoElement.src);
+		$('#main-video video').get(0).srcObject = videoElement.srcObject;
 		$('#main-video p.nickName').html(userData.nickName);
 		$('#main-video p.userName').html(userData.userName);
 		$('#main-video video').prop('muted', true);