openvidu-filters tutorial

openvidu-filters/README.md

@@ -0,0 +1,13 @@
+[![License badge](https://img.shields.io/badge/license-Apache2-orange.svg)](http://www.apache.org/licenses/LICENSE-2.0)
+[![Documentation badge](https://readthedocs.org/projects/fiware-orion/badge/?version=latest)](http://openvidu.io/docs/home/)
+[![Docker badge](https://img.shields.io/docker/pulls/fiware/orion.svg)](https://hub.docker.com/r/openvidu/)
+[![Support badge](https://img.shields.io/badge/support-sof-yellowgreen.svg)](https://groups.google.com/forum/#!forum/openvidu)
+
+[![][OpenViduLogo]](http://openvidu.io)
+
+openvidu-filters
+===
+
+Visit [openvidu.io/docs/advanced-features/filters](http://openvidu.io/docs/advanced-features/filters/)
+
+[OpenViduLogo]: https://secure.gravatar.com/avatar/5daba1d43042f2e4e85849733c8e5702?s=120

openvidu-filters/web/app.js

@@ -0,0 +1,416 @@
+// OpenVidu variables
+var OV;
+var session;
+var publisher;
+
+// Application variables
+var role = 'PUBLISHER'; 	// ['SUBSCRIBER', 'PUBLISHER', 'MODERATOR']
+var selectedStreamManager; 	// Our Publisher or any Subscriber (see https://openvidu.io/api/openvidu-browser/classes/streammanager.html)
+
+
+
+/* OPENVIDU METHODS */
+
+function joinSession() {
+
+	var mySessionId = $("#sessionId").val();
+	var myUserName = $("#userName").val();
+	var startWithFilterEnabled = $('#start-filter-enabled').prop('checked');
+
+	// --- 1) Get an OpenVidu object ---
+
+	OV = new OpenVidu();
+
+	// --- 2) Init a session ---
+
+	session = OV.initSession();
+
+	// --- 3) Specify the actions when events take place in the session ---
+
+	// On every new Stream received...
+	session.on('streamCreated', event => {
+
+		// 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', event => {
+			// Add a new <p> element for the user's nickname just below its video
+			appendUserData(event.element, subscriber);
+		});
+
+		// When the video starts playing remove the spinner
+		subscriber.on('streamPlaying', function (event) {
+			$('#spinner-' + subscriber.stream.connection.connectionId).remove();
+		});
+
+		// Listen to any subscriber filter applied or removed to update the filter control buttons
+		subscriber.on('streamPropertyChanged', function (event) {
+			// If the changed property is the filter and the current selected streamManager is this subscriber's one
+			if (subscriber === selectedStreamManager && event.changedProperty === 'filter') {
+				if (!!event.newValue) {
+					showRemoveFilterButtons();
+				} else {
+					showApplyFilterButtons();
+				}
+			}
+		});
+	});
+
+	// On every Stream destroyed...
+	session.on('streamDestroyed', event => {
+
+		// Delete the HTML element with the user's nickname. HTML videos are automatically removed from DOM
+		removeUserData(event.stream.connection);
+	});
+
+	// --- 4) Connect to the session with a valid user token ---
+
+	// 'getToken' method is simulating what your server-side should do.
+	// 'token' parameter should be retrieved and returned by your own backend
+	getToken(mySessionId, role).then(token => {
+
+		// First param is the token got from OpenVidu Server. Second param can be retrieved by every user on event
+		// 'streamCreated' (property Stream.connection.data), and will be appended to DOM as the user's nickname
+		session.connect(token, { clientData: myUserName })
+			.then(() => {
+
+				// --- 5) Set page layout for active call ---
+
+				$('#session-title').text(mySessionId);
+				$('#join').hide();
+				$('#session').show();
+
+				// --- 6) Get your own camera stream with the desired properties ---
+
+				if (role !== 'SUBSCRIBER') {
+					var publisherProperties = {
+						audioSource: undefined, // The source of audio. If undefined default microphone
+						videoSource: undefined, // The source of video. If undefined default webcam
+						publishAudio: true,  	// Whether you want to start publishing with your audio unmuted or not
+						publishVideo: true,  	// Whether you want to start publishing with your video enabled or not
+						resolution: '1280x720',  // The resolution of your video
+						frameRate: 30,			// The frame rate of your video
+						insertMode: 'APPEND',	// How the video is inserted in the target element 'video-container'	
+						mirror: false       	// Whether to mirror your local video or not
+					};
+
+					// If the filter should be enabled from the beginning of the publishing
+					if (startWithFilterEnabled) {
+						publisherProperties.filter = {
+							type: 'GStreamerFilter',
+							options: { "command": "videobalance saturation=0.0" }
+						}
+					}
+
+					publisher = OV.initPublisher('video-container', publisherProperties);
+
+					// --- 7) Specify the actions when events take place in our publisher ---
+
+					// When our HTML video has been added to DOM...
+					publisher.on('videoElementCreated', function (event) {
+						appendUserData(event.element, publisher);
+						initMainVideo(publisher, myUserName);
+					});
+					// When our video has started playing...
+					publisher.on('streamPlaying', function (event) {
+						$('#spinner-' + publisher.stream.connection.connectionId).remove();
+						$('#filter-btns').show();
+						$('#buttonApplyFilter').prop('value', 'Apply filter to your stream');
+						$('#buttonRemoveFilter').prop('value', 'Remove filter of your stream');
+						$('#buttonApplyFilter').prop('disabled', false);
+						$('#buttonRemoveFilter').prop('disabled', false);
+						if (startWithFilterEnabled) {
+							showRemoveFilterButtons();
+						} else {
+							showApplyFilterButtons();
+						}
+					});
+
+					// Listen to your filter being applied or removed to update the filter control buttons
+					publisher.on('streamPropertyChanged', function (event) {
+						// If the changed property is the filter and the current selected streamManager is our publisher
+						if (publisher === selectedStreamManager && event.changedProperty === 'filter') {
+							if (!!event.newValue) {
+								showRemoveFilterButtons();
+							} else {
+								showApplyFilterButtons();
+							}
+						}
+					});
+
+					// --- 8) Publish your stream, indicating you want to receive your remote stream to see the filters ---
+					publisher.subscribeToRemote();
+					session.publish(publisher);
+
+				} else {
+					// Show a message warning the subscriber cannot publish
+					$('#main-video video').css("background", "url('resources/images/subscriber-msg.jpg') round");
+					$('#filter-btns').hide();
+				}
+			})
+			.catch(error => {
+				console.log('There was an error connecting to the session:', error.code, error.message);
+			});
+	});
+}
+
+function leaveSession() {
+
+	// --- 9) Leave the session by calling 'disconnect' method over the Session object ---
+
+	session.disconnect();
+
+	// Removing all HTML elements with user's nicknames. 
+	// HTML videos are automatically removed when leaving a Session
+	removeAllUserData();
+
+	// Back to 'Join session' page
+	$('#join').show();
+	$('#filter-btns').hide();
+	$('#session').hide();
+}
+
+
+// --- Filter related methods ---
+
+function applyFilter() {
+	var filter = { type: '', options: {} };
+	var type = $('input[name=filter]:checked').val();
+	switch (type) {
+		case 'Grayscale':
+			filter.type = 'GStreamerFilter';
+			filter.options = { "command": "videobalance saturation=0.0" };
+			break;
+		case 'Rotation':
+			filter.type = 'GStreamerFilter';
+			filter.options = { "command": "videoflip method=vertical-flip" };
+			break;
+		case 'Faceoverlay':
+			filter.type = 'FaceOverlayFilter';
+			filter.options = {};
+			break;
+		case 'Audioecho':
+			filter.type = 'GStreamerFilter';
+			filter.options = { "command": "audioecho delay=50000000 intensity=0.6 feedback=0.4" };
+			break;
+		case 'Videobox':
+			filter.type = 'GStreamerFilter';
+			filter.options = { "command": "videobox fill=black top=-30 bottom=-30 left=-30 right=-30" };
+			break;
+	}
+	selectedStreamManager.stream.applyFilter(filter.type, filter.options)
+		.then(f => {
+			if (f.type === 'FaceOverlayFilter') {
+				f.execMethod(
+					"setOverlayedImage",
+					{
+						"uri": "https://cdn.pixabay.com/photo/2013/07/12/14/14/derby-148046_960_720.png",
+						"offsetXPercent": "-0.2F",
+						"offsetYPercent": "-0.8F",
+						"widthPercent": "1.3F",
+						"heightPercent": "1.0F"
+					});
+			}
+		});
+}
+
+function removeFilter() {
+	selectedStreamManager.stream.removeFilter();
+}
+
+// --- End filter related methods ---
+
+
+
+/* APPLICATION SPECIFIC METHODS */
+
+window.addEventListener('load', function () {
+	generateParticipantInfo();
+	$('[data-toggle="tooltip"]').tooltip({ container: 'body', trigger: 'hover' });
+});
+
+window.onbeforeunload = function () {
+	if (session) session.disconnect();
+};
+
+function generateParticipantInfo() {
+	$('#sessionId').val("SessionA");
+	$('#userName').val("Participant" + Math.floor(Math.random() * 100));
+}
+
+function handleRadioBtnClick(myRadio) {
+	this.role = myRadio.value;
+	if (this.role !== 'SUBSCRIBER') {
+		$('#filter-enabled').show();
+	} else {
+		$('#filter-enabled').hide();
+	}
+}
+
+function showApplyFilterButtons() {
+	$('#filter-applied-opts').show();
+	$('#filter-removed-opts').hide();
+}
+
+function showRemoveFilterButtons() {
+	$('#filter-applied-opts').hide();
+	$('#filter-removed-opts').show();
+}
+
+var spinnerNodeHtml =
+	'<div class="spinner"><div class="sk-circle1 sk-child"></div><div class="sk-circle2 sk-child"></div><div class="sk-circle3 sk-child"></div>' +
+	'<div class="sk-circle4 sk-child"></div><div class="sk-circle5 sk-child"></div><div class="sk-circle6 sk-child"></div><div class="sk-circle7 sk-child"></div>' +
+	'<div class="sk-circle8 sk-child"></div><div class="sk-circle9 sk-child"></div><div class="sk-circle10 sk-child"></div><div class="sk-circle11 sk-child"></div>' +
+	'<div class="sk-circle12 sk-child"></div></div>';
+
+function appendUserData(videoElement, streamManager) {
+	var userData = JSON.parse(streamManager.stream.connection.data).clientData;
+	var nodeId = streamManager.stream.connection.connectionId;
+	// Insert user nickname
+	var dataNode = $('<div id="data-' + nodeId + '" class="data-node"><p>' + userData + '</p></div>');
+	dataNode.insertAfter($(videoElement));
+	// Insert spinner loader
+	var spinnerNode = $(spinnerNodeHtml).attr('id', 'spinner-' + nodeId)
+	dataNode.append(spinnerNode);
+	addClickListener(videoElement, streamManager);
+}
+
+function removeUserData(connection) {
+	$("#data-" + connection.connectionId).remove();
+}
+
+function removeAllUserData() {
+	$(".data-node").remove();
+	$('#main-video div p').html('');
+}
+
+function addClickListener(videoElement, streamManager) {
+	videoElement.addEventListener('click', function () {
+		var mainVideo = $('#main-video video').get(0);
+		if (!streamManager.videos.map(v => v.video).includes(mainVideo)) {
+			selectedStreamManager = streamManager;
+			$('#main-video').fadeOut("fast", () => {
+				// Put the nickname of the clicked user in the main video view
+				var nickname = JSON.parse(streamManager.stream.connection.data).clientData;
+				$('#main-video div p').html(nickname);
+				// Change the ownership of the main video to the clicked StreamManager (Publisher or Subscriber)
+				streamManager.addVideoElement(mainVideo);
+				// Show the required filter buttons depending on whether the filter is applied or not for the selected StreamManager
+				if (!!streamManager.stream.filter) {
+					showRemoveFilterButtons();
+				} else {
+					showApplyFilterButtons();
+				}
+				// Change the text of the filter buttons depending on whether the selected StreamManager is your Publisher or a Subscriber
+				if (streamManager !== publisher) {
+					$('#buttonApplyFilter').prop('value', 'Apply filter to ' + nickname);
+					$('#buttonRemoveFilter').prop('value', 'Remove filter of ' + nickname);
+					if (role === 'PUBLISHER') {
+						// Publishers cannot manage other user's filters
+						$('#buttonApplyFilter').prop('disabled', true);
+						$('#buttonRemoveFilter').prop('disabled', true);
+					}
+				} else {
+					$('#buttonApplyFilter').prop('value', 'Apply filter to your stream');
+					$('#buttonRemoveFilter').prop('value', 'Remove filter of your stream');
+					$('#buttonApplyFilter').prop('disabled', false);
+					$('#buttonRemoveFilter').prop('disabled', false);
+				}
+				$('#main-video').fadeIn("fast");
+			});
+		}
+	});
+}
+
+function initMainVideo(streamManager, userData) {
+	var videoEl = $('#main-video video').get(0);
+	videoEl.onplaying = () => {
+		$('#main-video div .spinner').remove();
+	};
+	streamManager.addVideoElement(videoEl);
+	$('#main-video div p').html(userData);
+	$('#main-video div').append($(spinnerNodeHtml));
+	$('#main-video video').prop('muted', true);
+	selectedStreamManager = streamManager;
+}
+
+
+
+/**
+ * --------------------------
+ * SERVER-SIDE RESPONSIBILITY
+ * --------------------------
+ * These methods retrieve the mandatory user token from OpenVidu Server.
+ * This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
+ * the REST API, openvidu-java-client or openvidu-node-client):
+ *   1) Initialize a session in OpenVidu Server	(POST /api/sessions)
+ *   2) Generate a token in OpenVidu Server	(POST /api/tokens)
+ *   3) The token must be consumed in Session.connect() method
+ */
+
+var OPENVIDU_SERVER_URL = "https://" + location.hostname + ":4443";
+var OPENVIDU_SERVER_SECRET = "MY_SECRET";
+
+
+function getToken(mySessionId, role) {
+	return createSession(mySessionId).then(sessionId => createToken(sessionId, role));
+}
+
+
+function createSession(sessionId) { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apisessions
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: OPENVIDU_SERVER_URL + "/api/sessions",
+			data: JSON.stringify({ customSessionId: sessionId }),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:" + OPENVIDU_SERVER_SECRET),
+				"Content-Type": "application/json"
+			},
+			success: response => resolve(response.id),
+			error: (error) => {
+				if (error.status === 409) {
+					resolve(sessionId);
+				} else {
+					console.warn('No connection to OpenVidu Server. This may be a certificate error at ' + OPENVIDU_SERVER_URL);
+					if (window.confirm('No connection to OpenVidu Server. This may be a certificate error at \"' + OPENVIDU_SERVER_URL + '\"\n\nClick OK to navigate and accept it. ' +
+						'If no certificate warning is shown, then check that your OpenVidu Server is up and running at "' + OPENVIDU_SERVER_URL + '"')) {
+						location.assign(OPENVIDU_SERVER_URL + '/accept-certificate');
+					}
+				}
+			}
+		});
+	});
+}
+
+
+function createToken(sessionId, role) { // See https://openvidu.io/docs/reference-docs/REST-API/#post-apitokens
+	var openviduRole;
+	var jsonBody = {
+		session: sessionId,
+		role: role,
+		kurentoOptions: {}
+	};
+
+	if (openviduRole !== 'SUBSCRIBER') {
+		// Only the PUBLISHERS and MODERATORS need to configure the ability of applying filters
+		jsonBody.kurentoOptions = {
+			allowedFilters: ['FaceOverlayFilter', 'ChromaFilter', 'GStreamerFilter']
+		}
+	}
+
+	return new Promise((resolve, reject) => {
+		$.ajax({
+			type: "POST",
+			url: OPENVIDU_SERVER_URL + "/api/tokens",
+			data: JSON.stringify(jsonBody),
+			headers: {
+				"Authorization": "Basic " + btoa("OPENVIDUAPP:" + OPENVIDU_SERVER_SECRET),
+				"Content-Type": "application/json"
+			},
+			success: response => resolve(response.token),
+			error: error => reject(error)
+		});
+	});
+}

openvidu-filters/web/index.html

@@ -0,0 +1,117 @@
+<html>
+
+<head>
+	<title>openvidu-pitch-filter-demo</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
+	<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
+
+	<!-- Bootstrap -->
+	<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-2.4.0.js"></script>
+	<script src="app.js"></script>
+</head>
+
+<body>
+
+	<nav class="navbar navbar-default">
+		<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"/> Filters</a>
+				<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-filters" 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/advanced-features/filters/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
+			</div>
+		</div>
+	</nav>
+
+	<div id="main-container" class="container">
+		<div id="join">
+			<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="joinSession(); return false">
+					<p>
+						<label class="label-title">Session</label>
+						<input class="form-control" type="text" id="sessionId" required>
+                    </p>
+                    <p>
+						<label class="label-title">Participant</label>
+						<input class="form-control" type="text" id="userName" required>
+                    </p>
+                    <p>
+                        <label class="label-title">Role</label>
+                        <div id="radio-btns">
+                            <label class="radio-inline" data-toggle="tooltip" data-placement="top" title="Subscribers cannot publish video and therefore cannot apply filters">
+                                <input type="radio" onclick="handleRadioBtnClick(this)" name="role" value="SUBSCRIBER">Subscriber
+                            </label>
+                            <label class="radio-inline" data-toggle="tooltip" data-placement="top" title="Publishers can apply filters to their own streams">
+                                <input type="radio" onclick="handleRadioBtnClick(this)" name="role" value="PUBLISHER" checked>Publisher
+                            </label>
+                            <label class="radio-inline" data-toggle="tooltip" data-placement="top" title="Moderators can apply filters to their own streams and other users streams">
+                                <input type="radio" onclick="handleRadioBtnClick(this)" name="role" value="MODERATOR">Moderator
+                            </label>
+						</div>
+						<div id="filter-enabled" class="checkbox">
+							<label><input type="checkbox" id="start-filter-enabled" name="startFilterEnabled" value="false">Start with filter enabled?</label>
+						</div>
+                    </p>
+					<p class="text-center">
+						<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
+					</p>
+				</form>
+			</div>
+		</div>
+
+		<div id="session" style="display: none;">
+			<div id="session-header">
+				<h1 id="session-title"></h1>
+				<div id="div-btns">
+					<div id="filter-btns">
+						<div id="filter-applied-opts">
+							<input class="btn btn-large btn-info" type="button" id="buttonApplyFilter" onmouseup="applyFilter()" value="Apply filter">
+							<div id="filter-radio-btns">
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Grayscale" checked>Grayscale
+								</label>
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Rotation">Rotation
+								</label>
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Faceoverlay">Faceoverlay
+								</label>
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Videobox">Video box
+								</label>
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Audioecho">Audio echo
+								</label>
+							</div>
+						</div>
+						<div id="filter-removed-opts">
+							<input class="btn btn-large btn-info" type="button" id="buttonRemoveFilter" onmouseup="removeFilter()" value="Remove filter">
+						</div>
+					</div>
+					<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"><div id="main-video-data"><p></p></div><video autoplay></video></div>
+				<div id="video-container" class="col-md-6"></div>
+			</div>
+		</div>
+	</div>
+
+	<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="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
+		</div>
+	</footer>
+
+</body>
+
+</html>

openvidu-filters/web/style.css

@@ -0,0 +1,475 @@
+html {
+	position: relative;
+	min-height: 100%;
+}
+
+nav {
+	height: 50px;
+	width: 100%;
+	z-index: 1;
+	background-color: #4d4d4d !important;
+	border-color: #4d4d4d !important;
+	border-top-right-radius: 0 !important;
+	border-top-left-radius: 0 !important;
+}
+
+.navbar-header {
+	width: 100%;
+}
+
+.nav-icon {
+	padding: 5px 15px 5px 15px;
+	float: right;
+}
+
+nav a {
+	color: #ccc !important;
+}
+
+nav i.fa {
+	font-size: 40px;
+	color: #ccc;
+}
+
+nav a:hover {
+	color: #a9a9a9 !important;
+}
+
+nav i.fa:hover {
+	color: #a9a9a9;
+}
+
+#main-container {
+	padding-bottom: 80px;
+}
+
+/*vertical-center {
+	position: relative;
+	top: 30%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}*/
+
+.horizontal-center {
+	margin: 0 auto;
+}
+
+.form-control {
+	color: #0088aa;
+	font-weight: bold;
+}
+
+.form-control:focus {
+	border-color: #0088aa;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
+}
+
+input.btn {
+	font-weight: bold;
+}
+
+.btn {
+	font-weight: bold !important;
+}
+
+.btn-success {
+	background-color: #06d362 !important;
+	border-color: #06d362;
+}
+
+.btn-success:hover {
+	background-color: #1abd61 !important;
+	border-color: #1abd61;
+}
+
+.footer {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 60px;
+	background-color: #4d4d4d;
+}
+
+.footer .text-muted {
+	margin: 20px 0;
+	float: left;
+	color: #ccc;
+}
+
+.openvidu-logo {
+	height: 35px;
+	float: right;
+	margin: 12px 0;
+	-webkit-transition: all 0.1s ease-in-out;
+	-moz-transition: all 0.1s ease-in-out;
+	-o-transition: all 0.1s ease-in-out;
+	transition: all 0.1s ease-in-out;
+}
+
+.openvidu-logo:hover {
+	-webkit-filter: grayscale(0.5);
+	filter: grayscale(0.5);
+}
+
+.demo-logo {
+	margin: 0;
+	height: 22px;
+	float: left;
+	padding-right: 8px;
+}
+
+a:hover .demo-logo {
+	-webkit-filter: brightness(0.7);
+	filter: brightness(0.7);
+}
+
+#join-dialog {
+	margin-left: auto;
+	margin-right: auto;
+	max-width: 70%;
+}
+
+#join-dialog h1 {
+	color: #4d4d4d;
+	font-weight: bold;
+	text-align: center;
+}
+
+#img-div {
+	text-align: center;
+	margin-top: 3em;
+	margin-bottom: 3em;
+	/*position: relative;
+	top: 20%;
+	left: 50%;
+	transform: translate(-50%, -50%);*/
+}
+
+#img-div img {
+	height: 15%;
+}
+
+#join-dialog .label-title {
+	color: #0088aa;
+}
+
+#join-dialog input.btn {
+	margin-top: 15px;
+}
+
+#session-header {
+	margin-bottom: 20px;
+	width: 100%;
+}
+
+#session-title {
+	display: inline-block;
+}
+
+#buttonLeaveSession {
+	float: right;
+}
+
+#video-container video {
+	position: relative;
+	float: left;
+	width: 50%;
+	cursor: pointer;
+}
+
+#video-container div.data-node {
+	float: left;
+	width: 50%;
+	position: relative;
+	margin-left: -50%;
+}
+
+#video-container div.data-node p {
+	display: inline-block;
+	background: #f8f8f8;
+	padding-left: 5px;
+	padding-right: 5px;
+	color: #777777;
+	font-weight: bold;
+	border-bottom-right-radius: 4px;
+}
+
+video {
+	width: 100%;
+	height: auto;
+}
+
+#main-video-data {
+	position: absolute;
+	width: 100%;
+}
+
+#main-video p {
+	display: inline-block;
+	background: #f8f8f8;
+	padding-left: 5px;
+	padding-right: 5px;
+	font-size: 22px;
+	color: #777777;
+	font-weight: bold;
+	border-bottom-right-radius: 4px;
+}
+
+#session img {
+	width: 100%;
+	height: auto;
+	display: inline-block;
+	object-fit: contain;
+	vertical-align: baseline;
+}
+
+#session #video-container img {
+	position: relative;
+	float: left;
+	width: 50%;
+	cursor: pointer;
+	object-fit: cover;
+	height: 180px;
+}
+
+#filter-enabled {
+	display: inline-block;
+	margin: 0 0 0 20px;
+}
+
+#radio-btns {
+	display: inline-block;
+}
+
+#filter-btns {
+	display: none;
+	float: left;
+}
+
+#filter-radio-btns {
+	margin-left: 20px;
+	display: inherit;
+}
+
+#filter-applied-opts {
+	display: inline-block;
+}
+
+#filter-removed-opts {
+	display: inline-block;
+}
+
+#div-btns {
+	display: inline-block;
+	width: 100%;
+	margin: 10px 0 30px 0;
+}
+
+/* xs ans md screen resolutions*/
+
+@media screen and (max-width: 991px) and (orientation: portrait) {
+	#join-dialog {
+		max-width: inherit;
+	}
+	#img-div img {
+		height: 10%;
+	}
+	#img-div {
+		margin-top: 2em;
+		margin-bottom: 2em;
+	}
+	.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 {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	#join-dialog {
+		max-width: inherit;
+	}
+}
+
+/* loader */
+
+.spinner {
+	width: 50px;
+	height: 50px;
+	position: relative;
+	margin: auto;
+	margin-top: 10%;
+}
+
+.spinner .sk-child {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
+.spinner .sk-child:before {
+	content: '';
+	display: block;
+	margin: 0 auto;
+	width: 15%;
+	height: 15%;
+	background-color: #777777;
+	border-radius: 100%;
+	-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
+	animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
+}
+
+.spinner .sk-circle2 {
+	-webkit-transform: rotate(30deg);
+	-ms-transform: rotate(30deg);
+	transform: rotate(30deg);
+}
+
+.spinner .sk-circle3 {
+	-webkit-transform: rotate(60deg);
+	-ms-transform: rotate(60deg);
+	transform: rotate(60deg);
+}
+
+.spinner .sk-circle4 {
+	-webkit-transform: rotate(90deg);
+	-ms-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.spinner .sk-circle5 {
+	-webkit-transform: rotate(120deg);
+	-ms-transform: rotate(120deg);
+	transform: rotate(120deg);
+}
+
+.spinner .sk-circle6 {
+	-webkit-transform: rotate(150deg);
+	-ms-transform: rotate(150deg);
+	transform: rotate(150deg);
+}
+
+.spinner .sk-circle7 {
+	-webkit-transform: rotate(180deg);
+	-ms-transform: rotate(180deg);
+	transform: rotate(180deg);
+}
+
+.spinner .sk-circle8 {
+	-webkit-transform: rotate(210deg);
+	-ms-transform: rotate(210deg);
+	transform: rotate(210deg);
+}
+
+.spinner .sk-circle9 {
+	-webkit-transform: rotate(240deg);
+	-ms-transform: rotate(240deg);
+	transform: rotate(240deg);
+}
+
+.spinner .sk-circle10 {
+	-webkit-transform: rotate(270deg);
+	-ms-transform: rotate(270deg);
+	transform: rotate(270deg);
+}
+
+.spinner .sk-circle11 {
+	-webkit-transform: rotate(300deg);
+	-ms-transform: rotate(300deg);
+	transform: rotate(300deg);
+}
+
+.spinner .sk-circle12 {
+	-webkit-transform: rotate(330deg);
+	-ms-transform: rotate(330deg);
+	transform: rotate(330deg);
+}
+
+.spinner .sk-circle2:before {
+	-webkit-animation-delay: -1.1s;
+	animation-delay: -1.1s;
+}
+
+.spinner .sk-circle3:before {
+	-webkit-animation-delay: -1s;
+	animation-delay: -1s;
+}
+
+.spinner .sk-circle4:before {
+	-webkit-animation-delay: -0.9s;
+	animation-delay: -0.9s;
+}
+
+.spinner .sk-circle5:before {
+	-webkit-animation-delay: -0.8s;
+	animation-delay: -0.8s;
+}
+
+.spinner .sk-circle6:before {
+	-webkit-animation-delay: -0.7s;
+	animation-delay: -0.7s;
+}
+
+.spinner .sk-circle7:before {
+	-webkit-animation-delay: -0.6s;
+	animation-delay: -0.6s;
+}
+
+.spinner .sk-circle8:before {
+	-webkit-animation-delay: -0.5s;
+	animation-delay: -0.5s;
+}
+
+.spinner .sk-circle9:before {
+	-webkit-animation-delay: -0.4s;
+	animation-delay: -0.4s;
+}
+
+.spinner .sk-circle10:before {
+	-webkit-animation-delay: -0.3s;
+	animation-delay: -0.3s;
+}
+
+.spinner .sk-circle11:before {
+	-webkit-animation-delay: -0.2s;
+	animation-delay: -0.2s;
+}
+
+.spinner .sk-circle12:before {
+	-webkit-animation-delay: -0.1s;
+	animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleBounceDelay {
+	0%, 80%, 100% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+	}
+	40% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}
+
+@keyframes sk-circleBounceDelay {
+	0%, 80%, 100% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+	}
+	40% {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+}