openvidu-filters updated with new filters

openvidu-filters/web/app.js

@@ -198,6 +198,10 @@ function applyFilter() {
 			filter.type = 'GStreamerFilter';
 			filter.options = { "command": "audioamplify amplification=1.7" };
 			break;
+		case 'Pitch':
+			filter.type = 'GStreamerFilter';
+			filter.options = { "command": "pitch pitch=1.2" };
+			break;
 		case 'Videobox':
 			filter.type = 'GStreamerFilter';
 			filter.options = { "command": "videobox fill=black top=-30 bottom=-30 left=-30 right=-30" };
@@ -214,6 +218,10 @@ function applyFilter() {
 			filter.type = 'GStreamerFilter';
 			filter.options = { "command": 'clockoverlay valignment=bottom halignment=right shaded-background=true font-desc="Sans, 20"' };
 			break;
+		case 'Chroma':
+			filter.type = 'GStreamerFilter';
+			filter.options = { "command": 'chromahold target-r=0 target-g=0 target-b=255 tolerance=90' };
+			break;
 	}
 	selectedStreamManager.stream.applyFilter(filter.type, filter.options)
 		.then(f => {
@@ -221,10 +229,10 @@ function applyFilter() {
 				f.execMethod(
 					"setOverlayedImage",
 					{
-						"uri": "https://cdn.pixabay.com/photo/2013/07/12/14/14/derby-148046_960_720.png",
-						"offsetXPercent": "-0.2F",
+						"uri": "https://cdn.pixabay.com/photo/2017/09/30/09/29/cowboy-hat-2801582_960_720.png",
+						"offsetXPercent": "-0.1F",
 						"offsetYPercent": "-0.8F",
-						"widthPercent": "1.3F",
+						"widthPercent": "1.5F",
 						"heightPercent": "1.0F"
 					});
 			}

openvidu-filters/web/index.html

@@ -72,6 +72,7 @@
 			<div id="session-header">
 				<h1 id="session-title"></h1>
 				<div id="div-btns">
+					<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" onmouseup="leaveSession()" value="Leave session">
 					<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">
@@ -94,6 +95,9 @@
 								<label class="radio-inline">
 									<input type="radio" name="filter" value="Amplify">Audio amplify
 								</label>
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Pitch">Pitch
+								</label>
 								<label class="radio-inline">
 									<input type="radio" name="filter" value="Text">Text
 								</label>
@@ -103,13 +107,16 @@
 								<label class="radio-inline">
 									<input type="radio" name="filter" value="Clock">Clock
 								</label>
+								<label class="radio-inline">
+									<input type="radio" name="filter" value="Chroma">Chroma (blue)
+								</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 id="info-msg">This are just some examples of available filters. There are a lot more. Visit <a href="https://openvidu.io/docs/advanced-features/filters" target="_blank">openvidu.io</a> docs for further information</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 playsinline="true"></video></div>
 				<div id="video-container" class="col-md-6"></div>

openvidu-filters/web/style.css

@@ -43,13 +43,6 @@ nav i.fa:hover {
 	padding-bottom: 80px;
 }
 
-/*vertical-center {
-	position: relative;
-	top: 30%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}*/
-
 .horizontal-center {
 	margin: 0 auto;
 }
@@ -140,10 +133,6 @@ a:hover .demo-logo {
 	text-align: center;
 	margin-top: 3em;
 	margin-bottom: 3em;
-	/*position: relative;
-	top: 20%;
-	left: 50%;
-	transform: translate(-50%, -50%);*/
 }
 
 #img-div img {
@@ -245,11 +234,12 @@ video {
 #filter-btns {
 	display: none;
 	float: left;
+	width: 100%;
 }
 
 #filter-radio-btns {
-	margin-left: 20px;
-	display: inherit;
+	margin-top: 20px;
+	display: block;
 }
 
 #filter-applied-opts {
@@ -266,26 +256,40 @@ video {
 	margin: 10px 0 30px 0;
 }
 
+#info-msg {
+	margin-top: 20px;
+	color: #7b7b7b;
+	text-align: center;
+}
+
 /* 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 {
+
+	.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;
 	}
@@ -296,6 +300,7 @@ video {
 		margin-top: 1em;
 		margin-bottom: 1em;
 	}
+
 	#join-dialog {
 		max-width: inherit;
 	}
@@ -453,10 +458,14 @@ video {
 }
 
 @-webkit-keyframes sk-circleBounceDelay {
-	0%, 80%, 100% {
+
+	0%,
+	80%,
+	100% {
 		-webkit-transform: scale(0);
 		transform: scale(0);
 	}
+
 	40% {
 		-webkit-transform: scale(1);
 		transform: scale(1);
@@ -464,10 +473,14 @@ video {
 }
 
 @keyframes sk-circleBounceDelay {
-	0%, 80%, 100% {
+
+	0%,
+	80%,
+	100% {
 		-webkit-transform: scale(0);
 		transform: scale(0);
 	}
+
 	40% {
 		-webkit-transform: scale(1);
 		transform: scale(1);