diff --git a/cat.svg b/cat.svg
new file mode 100644
index 0000000..c5016f0
--- /dev/null
+++ b/cat.svg
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="204.35092mm"
+   height="262.53448mm"
+   viewBox="0 0 204.35092 262.53448"
+   version="1.1"
+   id="svg3327"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="obsNinja_cat_solo_black.svg">
+  <defs
+     id="defs3321" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="-168.11034"
+     inkscape:cy="464.69965"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1366"
+     inkscape:window-height="740"
+     inkscape:window-x="1440"
+     inkscape:window-y="132"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3324">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-2.9018139,-9.2506448)">
+    <g
+       id="g3973">
+      <path
+         sodipodi:nodetypes="sccsssss"
+         inkscape:connector-curvature="0"
+         id="path1355"
+         d="m 164.72343,54.035635 c 9.57623,2.330159 24.41871,1.905634 42.09271,0 -9.16266,2.728484 -7.00816,7.827934 0.14081,13.101327 0,0.07776 -0.0652,0.160773 -0.14081,0.140808 -13.62848,-3.693613 -28.02093,-1.122785 -42.09271,0 -0.0774,0.0035 -0.1408,-0.06235 -0.1408,-0.140808 V 54.176128 c 0,-0.07776 0.0648,-0.159022 0.1408,-0.140808 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.59156251;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99215686" />
+      <path
+         sodipodi:nodetypes="ccssscc"
+         inkscape:connector-curvature="0"
+         id="path1357"
+         d="M 156.61816,99.290567 C 135.85836,105.32492 98.227292,97.794221 98.227292,97.794221 178.5626,144.83629 92.565417,212.03577 82.312576,270.24306 c -0.04764,0.27076 0.22137,0.49651 0.496471,0.49651 h 96.977883 c 0.27496,0 0.49909,-0.22137 0.49647,-0.49651 -1.11795,-62.27236 12.25483,-119.48839 -23.66524,-170.952493 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.09110117;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99215686" />
+      <path
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.59156251;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.99215686"
+         d="m 166.77541,62.87749 c 8.00037,-5.736482 17.02836,-16.871018 39.31533,-15.036418 -0.49584,-2.521055 -9.19885,-5.99491 -4.63836,-9.495175 -11.67661,5.892106 -24.67962,11.57195 -36.09465,14.915821 0,0 0.28477,6.546722 1.23631,9.53479 0.0245,0.07426 0.11699,0.125396 0.18144,0.08056 z"
+         id="path1359"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccccsc" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path1361"
+         d="M 18.30374,84.401145 55.436415,57.983577 2.9018109,40.993302 Z"
+         inkscape:transform-center-y="-0.86696927"
+         inkscape:transform-center-x="10.555001"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.17232786;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.17232786;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:transform-center-x="-2.602179"
+         inkscape:transform-center-y="4.1621627"
+         d="m 129.09008,38.135223 37.20671,26.313114 c 1.31764,-17.896094 2.79082,-35.747757 -1.32997,-55.1976901 z"
+         id="path1363"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+      <path
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="path1366"
+         d="m 141.81797,41.187416 c 6.94551,2.000096 13.04853,5.893363 18.97834,10.175872 -3.86076,-3.961686 -3.48354,-6.969877 -12.91684,-12.185322 l 9.41544,-19.816176 z"
+         inkscape:transform-center-y="1.1829327"
+         inkscape:transform-center-x="-0.0550525"
+         style="opacity:0.98999999;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.09766699;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="opacity:0.98999999;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.09766699;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         inkscape:transform-center-x="2.8986575"
+         inkscape:transform-center-y="1.2933647"
+         d="m 25.635836,66.266341 c 3.208047,-6.476798 2.141425,-3.404853 7.413853,-8.474772 C 23.229201,63.222694 14.295391,52.480691 6.9242259,47.141254 13.169133,53.439279 19.752128,56.35636 25.635836,66.266341 Z"
+         id="path1368"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccc" />
+      <path
+         id="ellipse1370"
+         d="M 2.5281601,92.207748 A 80.946175,42.760002 0 0 1 -78.418015,134.96775 80.946175,42.760002 0 0 1 -159.36419,92.207748 80.946175,42.760002 0 0 1 -78.418015,49.447746 80.946175,42.760002 0 0 1 2.5281601,92.207748 Z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.23783197;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(-0.9902407,0.13936771,0.19705157,0.98039313,0,0)" />
+      <path
+         sodipodi:nodetypes="csccssssssc"
+         inkscape:connector-curvature="0"
+         id="path1372"
+         d="M 153.95293,56.636634 C 129.11607,88.789979 37.135612,87.389811 34.846539,82.521598 c -0.01378,-0.02934 -0.02217,0.04538 -0.04055,0.07648 -4.458558,14.529854 8.919927,21.548982 14.740959,18.940802 15.540319,-14.024858 51.003032,-16.355556 55.107932,-17.679239 4.5334,-1.46186 54.10082,-1.719167 55.31732,-4.01484 l 0.0406,-0.07652 c 3.9885,-7.526741 0.11779,-17.617831 -5.98601,-23.080009 -0.0252,-0.02249 -0.0421,-0.05853 -0.0738,-0.05172 -0.0294,0.0063 0,3.1e-5 0,4.7e-5 z"
+         style="opacity:0.98999999;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.16215092;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         id="ellipse1374"
+         d="m -24.483776,97.662979 a 2.2225552,5.7151418 0 0 1 -2.222555,5.715141 2.2225552,5.7151418 0 0 1 -2.222555,-5.715141 2.2225552,5.7151418 0 0 1 2.222555,-5.715142 2.2225552,5.7151418 0 0 1 2.222555,5.715142 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2597692;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(-0.95869483,0.28443667,0.28443667,0.95869483,0,0)" />
+      <path
+         id="ellipse1376"
+         d="m -103.63192,115.79251 a 1.7671715,4.5441551 0 0 1 -1.76717,4.54416 1.7671715,4.5441551 0 0 1 -1.76718,-4.54416 1.7671715,4.5441551 0 0 1 1.76718,-4.54415 1.7671715,4.5441551 0 0 1 1.76717,4.54415 z"
+         style="opacity:0.98999999;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.20654458;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(-0.92649103,0.37631685,0.37631685,0.92649103,0,0)" />
+    </g>
+  </g>
+</svg>
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..f27e085
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..032c7bc
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..d022a55
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
index abfd6d4..7272111 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,15 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 <meta content="utf-8" http-equiv="encoding">
-<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" href="favicon.ico" />
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#ffffff">
+
 <link rel="stylesheet" href="font-awesome.min.css">
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 <script src="//console.re/connector.js" data-channel="obsninjaalpha" id="consolerescript"></script>
 <script type="text/javascript" src="qrcode.min.js"></script>
@@ -15,11 +21,11 @@
 </head>
 <body  id="main">
 	<script language="javascript" type="text/javascript" src="./CodecsHandler.js"></script>
-	<script language="javascript" type="text/javascript" src="./webrtc.js?asdf=5"></script>
+	<script language="javascript" type="text/javascript" src="./webrtc.js?version=20041914"></script>
 
 	<div id="header">
 		<h2>
-			<a href="./" style="text-decoration:none;color:white;"><font id="qos">O</font>BS.Ninja</a> &nbsp
+			<a href="./" style="text-decoration:none;color:white;margin: 2px;"><font id="qos">O</font>BS.Ninja</a> &nbsp
 			<div id="head1" style="display:inline-block;;">
 				<input id="joinroomID" name="joinroomID" size=26 placeholder="Join by Room Name here"></input>
 				<button style="padding:1px;" onclick="jumptoroom();">GO</button>
@@ -52,7 +58,7 @@
 		<div id="container-1" class="column columnfade" style="background-color:#ddd;">
 			<h2>Add Group Video Chat to OBS</h2>
 			<div class="container-inner">
-				<br /><h2><font style="color:#D22">The Group Chat is EXPERIMENTAL and likely unstable.<br />Please report issues to steve@seguin.email</font></h2><br />
+				<br />
 				<p><b>Room Name:</b><input id="videoname1" placeholder="Enter a ROOM NAME here" size=35 maxlength=50 style="padding:5px;" /></br ><br /></p>
 				<li>Anyone can enter a room if they know the name, so keep it unique</li>
 				<li>Having more than four (4) people in a room is not advisable due to performance reasons.</li>
@@ -73,8 +79,7 @@
 			<h2 id="add_camera">Add your Camera to OBS</h2>
 			<div class="container-inner"><br />
 				<p>Select the audio/video source below and when you're ready just click START SHARING WEBCAM</p><br />
-				<button onclick="publishWebcam()" class="gowebcam">CLICK HERE WHEN READY</button><br />
-				<p><input id="videoname3" placeholder="Give this video source a name (optional)" size=35 maxlength=50 style="padding:5px;" /></p><br />
+				<button onclick="publishWebcam()" class="gowebcam">CLICK HERE WHEN READY</button>
 				<p><video id="previewWebcam" oncanplay="updateStats();" muted controls autoplay playsinline style="max-width:640px; max-width:83vw; max-height:35vh"></video></p>
 				<br/>
 				<p>Video source: <select id="videoSource"></select></p><br/>
@@ -118,18 +123,10 @@
 			<h2>Generate Invite Link</h2>
 			<div class="container-inner">
 				<br /><br />
+				Invite Links are reusable, but only one invite link can be used at a time.<br /><br />
 				<p><input id="videoname4" placeholder="Give this video source a name (optional)" size=35 maxlength=70 style="padding:5px;" /></br ><br /></p>
-				<br />
-				<form>
 				
-				<input type="radio" id="fullhd2" name="resolution" value="1080">
-				<label for="fullhd">Max Resolution </label> | 
-				<input type="radio" checked id="halfhd2" name="resolution" value="720">
-				<label for="halfhd">Balanced </label> | 
-				<input type="radio" id="nothd2" name="resolution" value="360">
-				<label for="nothd">Smooth and Cool </label>
-				</form>
-				<br />
+				
 				<button onclick="generateQRPage(this)" >GENERATE THE INVITE LINK</button>
 			</div>
 			<div class="outer close">
@@ -149,20 +146,18 @@
 					<li>Bring video from your smartphone, laptop, computer, or from your friends directly into your OBS video stream</li>
 					<li>We use cutting edge Peer-to-Peer forwarding technology that offers privacy and ultra-low latency</li>
 					<br />
-					<li>Youtube video <a href="https://www.youtube.com/watch?v=6R_sQKxFAhg">Demoing it here</a></li>
-					<li>Code is open-sourced: <a href="https://github.com/steveseguin/obsninja">https://github.com/steveseguin/obsninja</a></li>
+					<li>Youtube video <i class="fa fa-youtube-play" aria-hidden="true"></i> <a href="https://www.youtube.com/watch?v=6R_sQKxFAhg">Demoing it here</a> </li>
+					<li>Code is open-sourced <i class="fa fa-github" aria-hidden="true"></i> <a href="https://github.com/steveseguin/obsninja">https://github.com/steveseguin/obsninja</a> </li>
 					<li>You can also check out <a href="https://stageten.tv">StageTEN.tv</a> for a more feature-rich paid-solution</li>
 					<br />
 					<i><font style="color:red">Known issues:</font></i><br />
 
-					<li>** MacOS users need to use OBS v23, along with either a local microphone or virtual audio cable.</li>
-					<li>** The rear camera on some smartphones have issues. Please report these issues, including your phone's model.</li>
-					<li>** For some users the video fails to load into OBS; this is often caused by a network firewall.</li>
+					<li><i class="fa fa-apple" aria-hidden="true"></i> MacOS users need to use OBS v23 or resort to <i>Window Capturing</i> a Chrome Browser with OBS v25</li>
 					<br />
-					<li><b>April 7th, 2020</b>: Site updated. The previous version can be found at https://obs.ninja/old/</li>
+					Site last updated: <b>April 19th, 2020.</b> The previous version can be found at <a href="https://obs.ninja/old/">https://obs.ninja/old/</a> if you are having new issues
 
 					<br /><br />
-					<i><h3>Check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a> for help and advanced info. Or email me steve@seguin.email</i></h3>
+					<i><h3>Check out the <a href="https://www.reddit.com/r/OBSNinja/">sub-reddit</a> <i class="fa fa-reddit-alien" aria-hidden="true"></i> for help and advanced info. I'm also on <a href="https://discordapp.com/invite/T4xpQVv">Discord</a> and you can email me at steve@seguin.email</i></h3>
 				</div>
 			</center>
 		</p></div>
diff --git a/main.css b/main.css
index b698482..73016ad 100644
--- a/main.css
+++ b/main.css
@@ -2,6 +2,7 @@
 	padding: 0;
 	margin: 0;
 	box-sizing: border-box;
+	border:0;
 
 }
 #mynetwork {
@@ -10,6 +11,30 @@
 		border: 1px solid lightgray;
 	}
 .email { unicode-bidi: bidi-override; direction: rtl; user-select: none;  }
+
+a:link {
+	text-decoration: none;
+  color: rgba(66,220,219,200);
+}
+
+/* visited link */
+a:visited {
+	text-decoration: none;
+  color: rgba(66,220,219,200);
+}
+
+/* mouse over link */
+a:hover {
+  color: rgba(66,220,219,200);
+}
+
+/* selected link */
+a:active {
+  color: rgba(66,220,219,200);
+}
+
+
+
 .credits {
 	color:black;
 	position:absolute;
@@ -55,6 +80,7 @@
 .vidcon {
 	max-width:100%;
 	max-height:100%
+	border:0;
 }
 .vidcon:nth-of-type(3n) { grid-column:  2; }
 .vidcon:nth-of-type(3n) {  grid-row: span ;  }
@@ -67,6 +93,7 @@
 	border:0;
 	padding:0;
 	margin:0;
+	border:0;
 }
 
 #gridlayout {
@@ -79,8 +106,12 @@
 	grid-auto-flow: dense;
 	grid-auto-columns:minmax(50%, auto);
 	grid-auto-rows: minmax(50%, auto);
+	border:0;
+	margin:0;
 }
 
+
+
 .directorsgrid {
 	justify-items: normal;
 	grid-auto-columns: minmax(100px,500px);
@@ -105,19 +136,39 @@
 }
 
 html {
+	border:0;
+	margin:0;
 }
 
 
 body {
-	padding: 0 3px;
+	padding: 0 0px;
 	height: 100%;
 	width: 100%;
-	background: #141926;
+	background-color: #141926;
+	background-color: -webkit-linear-gradient(to top, #181925, #141826, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
+	background-color: linear-gradient(to top, #181825, #141926, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
 	font-family: Helvetica, Arial, sans-serif;
 	display: flex;
 	flex-flow: column;
+	border:0;
+	margin:0;
+
+	
 }
 
+ @media screen and (min-width: 1000px) {
+	 
+	body {
+		background-image: url(cat.svg);
+		background-repeat: no-repeat;
+		background-size: auto 50%;
+		background-attachment: fixed;
+		background-position: right bottom; 
+	 }
+ }
+ 
 .gowebcam {
 	padding:20px;
 	background-color:white;
@@ -281,6 +332,7 @@ body {
 
 	   /* Add shadows to create the "card" effect */
 	   box-shadow: 0 4px 8px 0 rgba(0,0,0,.1);
+	   
    }
    /* On mouse-over, add a deeper shadow */
    .column:hover {
@@ -414,6 +466,8 @@ img {
 video {
 	flex: 1 1 auto;
 	background-color: transparent !important;
+	border:0;
+	margin:0;
 }
 
 
@@ -450,3 +504,34 @@ video {
 	height:100%;
 }
 
+
+.column_neon {
+  color:white;
+  animation: neonGlow 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  box-shadow:  
+		 0 0 5px rgba(255,255,255,.8), 
+		 0 0 10px rgba(255,255,255,.8),
+		 0 0 20px rgba(66,220,219,.5),
+		 0 0 22px rgba(66,220,219,.5)
+}
+
+@keyframes neonGlow {
+  100% {
+    box-shadow:  
+				 0 0 5px rgba(255,255,255,.8), 
+				 0 0 10px rgba(255,255,255,.8),
+                 0 0 20px rgba(66,220,219,.5),
+                 0 0 22px rgba(66,220,219,.5)
+                
+               
+  }
+  0% {
+    box-shadow: 0 0 2px rgba(255,255,255,.8),
+				0 0 3px rgba(255,255,255,.8),
+				0 0 4px rgba(66,220,219,.5)
+                
+                
+                 
+  }
+}
+
diff --git a/main.js b/main.js
index b51eb45..9407055 100644
--- a/main.js
+++ b/main.js
@@ -28,7 +28,20 @@ document.addEventListener('touchend', function (event) {
 	lastTouchEnd = now;
 }, false);
 
-/////////////
+var interacted=false;
+document.addEventListener('click', function (event) {
+	if (interacted==false){
+		interacted=true;
+		history.pushState({}, '');
+	}
+});
+
+window.onpopstate = function() {
+	if (interacted){
+		window.location.reload(true);
+	}
+}; 
+
 
 var session = Ooblex.Media;
 session.streamID = session.generateStreamID();
@@ -58,6 +71,7 @@ if (urlParams.has('permaid')){
 	document.getElementById("container-1").className = 'column columnfade advanced';
 	document.getElementById("container-4").className = 'column columnfade advanced';
 } 
+
 if (urlParams.has('stereo')){
 	log("STEREO ENABLED");
         session.stereo = true;
@@ -88,6 +102,21 @@ if (urlParams.has('framerate')){
 	log(session.framerate);
 }
 
+if (urlParams.has('sync')){
+    session.sync = parseFloat(urlParams.get('sync'));
+	log("sync Changed");
+	log(session.sync);
+}
+
+if (urlParams.has('buffer')){
+    session.buffer = parseFloat(urlParams.get('buffer'));
+	log("buffer Changed");
+	log(session.buffer);
+}
+
+			//var sync = session.sync | 0;
+			//var buffer = session.buffer | 0;
+
 if (urlParams.has('turn')){
 	try {
 		var turnstring = urlParams.get('turn').split(";");
@@ -142,6 +171,7 @@ session.connect();
 session.volume = micvolume;
 if (urlParams.has('roomid')){
 	var roomid  = urlParams.get('roomid');
+	roomid = encodeURIComponent(roomid);
 	session.roomid = roomid;
 	document.getElementById("videoname1").value = roomid;
 	document.getElementById("dirroomid").innerHTML = roomid;
@@ -340,7 +370,7 @@ function publishWebcam(){
 	if( activatedStream == true){return;}
 	activatedStream = true;
 
-	var title = document.getElementById("videoname3").value;
+	var title = "Webcam"; // document.getElementById("videoname3").value;
 	var ele = document.getElementById("previewWebcam");
 
 	var stream = ele.srcObject;
@@ -511,7 +541,6 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
 	const audioInputSelect = document.querySelector('select#audioSource');
 	const videoSelect = document.querySelector('select#videoSource');
 	const selectors = [audioInputSelect, videoSelect];
-	// TODO: Add in the option to select the OUTPUT and Disable Mic/Cam
 
 	// Handles being called several times to update labels. Preserve values.
 		const values = selectors.map(select => select.value);
@@ -521,6 +550,7 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
 		}
 	});
 	log(deviceInfos);
+	
 	for (let i = 0; i !== deviceInfos.length; ++i) {
 		const deviceInfo = deviceInfos[i];
 		const option = document.createElement('option');
@@ -534,12 +564,22 @@ function gotDevices(deviceInfos) { // https://github.com/webrtc/samples/blob/gh-
 		} else {
 			log('Some other kind of source/device: ', deviceInfo);
 		}
-}
-selectors.forEach((select, selectorIndex) => {
-	if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
-		select.value = values[selectorIndex];
 	}
-});
+	
+	const option = document.createElement('option');
+	option.text = "Disable Audio";
+	option.value = "ZZZ";
+	audioInputSelect.appendChild(option); // NO AUDIO OPTION
+	
+	
+	
+	selectors.forEach((select, selectorIndex) => {
+		if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
+			select.value = values[selectorIndex];
+		}
+	});
+	
+	audioInputSelect.selectedIndex  = 0;
 }
 
 function handleError(error) {
@@ -644,7 +684,7 @@ function getUserMediaVideoParams(resolutionFallbackLevel, isSafariBrowser) {
 	}
 }
 
-function grabVideo(quality=0, audio=false){
+function grabVideo(quality=0, audioEnable=false){
 	if( activatedPreview == true){log("activeated preview return");return;}
 	activatedPreview = true;
 	log(quality);
@@ -654,15 +694,24 @@ function grabVideo(quality=0, audio=false){
 	var videoSelect = document.querySelector('select#videoSource');
 	var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
 
-	if (audio==true){
-		audio = {deviceId: {exact: audioSelect.value}};
-		if (urlParams.has('stereo')){
-			audio.echoCancellation = false;
-			audio.autoGainControl = false;
-			audio.noiseSuppression = false;
+	if (iOS){  // iOS will not work correctly at 1080p; likely a h264 codec issue.
+		if (quality==0){
+			quality=1;
 		}
-
 	}
+
+	var audio = false;
+	if (audioEnable==true){
+		if (audioSelect.value!=="ZZZ"){
+			audio = {deviceId: {exact: audioSelect.value}};
+			if (session.stereo){
+				audio.echoCancellation = false;
+				audio.autoGainControl = false;
+				audio.noiseSuppression = false;
+			}
+		} 
+	}
+	
 	var constraints = {
 		audio: audio,
 		video: getUserMediaVideoParams(quality, iOS)
@@ -697,7 +746,7 @@ function grabVideo(quality=0, audio=false){
 			errorlog(e);
 		}
 		navigator.mediaDevices.getUserMedia(constraints).then(function(stream){
-			if (audio ==false){
+			if (audioEnable == false){
 				stream.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
 						track.stop();
 				});
@@ -729,76 +778,89 @@ function grabVideo(quality=0, audio=false){
 				errorlog("An unknown camera error occured");
 			}
 			if (quality<=9){
-	  grabVideo(quality+1);
-	  } else {
-		  errorlog("********Camera failed to work");
-		  activatedPreview=true;
-		  alert("Camera failed to load. Please make sure it is not already in use by another application.");
-		 }
-	  });
-	  },0);
-	  }
+				grabVideo(quality+1);
+			} else {
+				errorlog("********Camera failed to work");
+				activatedPreview=true;
+				alert("Camera failed to load. Please make sure it is not already in use by another application.");
+			}
+		});
+	},0);
+}
 
-	  var activatedPreview = false;
-	  function previewWebcam(){
-		  if( activatedPreview == true){log("activeated preview return");return;}
-		  activatedPreview = true;
+var activatedPreview = false;
+  
+  
+function setupWebcamSelection(){
+	enumerateDevices().then(gotDevices).then(function(){
+		if (parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value)==3){
+			session.maxframerate  = 30;
+		} else {
+				session.maxframerate = false;
+		}
 		
-		  window.setTimeout(() => {
-	
-			  var oldstream= document.getElementById('previewWebcam').srcObject;
-			  if (oldstream){
-				  oldstream.getTracks().forEach(function(track) {
-					  track.stop();
-				  });
-			  }
-			  
-			  navigator.mediaDevices.getUserMedia({audio:true, video:true }).then(function(stream){ // Apple needs thi to happen before I can access EnumerateDevices. 
-					  //document.getElementById('previewWebcam').srcObject=stream;
-					stream.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
-						  track.stop();
-					});
-					enumerateDevices().then(gotDevices).then(function(){
-					
-					if (parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value)==3){
-						session.maxframerate  = 30;
-					} else {
-							session.maxframerate = false;
-					}
-					
-					var audioSelect = document.querySelector('select#audioSource');
-					var videoSelect = document.querySelector('select#videoSource');
-					
-					audioSelect.onchange = function(){
-						log("AUDIO source CHANGED");
-						activatedPreview=false;
-						grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
-					};
-					videoSelect.onchange = function(){
-						log("video source changed");
-						activatedPreview=false;
-						grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
-					};
-					document.getElementById("webcamquality").onchange = function(){
-						log("AUDIO source CHANGED");
-						activatedPreview=false;
-						if (parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value)==3){
-							session.maxframerate  = 30;
-						} else {
-							session.maxframerate = false;
-						}
-						grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
-					};
+		var audioSelect = document.querySelector('select#audioSource');
+		var videoSelect = document.querySelector('select#videoSource');
+		
+		audioSelect.onchange = function(){
+			log("AUDIO source CHANGED");
+			activatedPreview=false;
+			grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
+		};
+		videoSelect.onchange = function(){
+			log("video source changed");
+			activatedPreview=false;
+			grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
+		};
+		document.getElementById("webcamquality").onchange = function(){
+			log("AUDIO source CHANGED");
+			activatedPreview=false;
+			if (parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value)==3){
+				session.maxframerate  = 30;
+			} else {
+				session.maxframerate = false;
+			}
+			grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
+		};
 
+		activatedPreview = false;
+		grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
 
-					activatedPreview = false;
-					grabVideo(parseInt(document.getElementById("webcamquality").elements.namedItem("resolution").value));
+	}).catch(handleError);
+}
 
-				  }).catch(handleError);
-			  }).catch(handleError);
+function previewWebcam(){
+  if( activatedPreview == true){log("activeated preview return");return;}
+  activatedPreview = true;
 
-		  },0);
+  window.setTimeout(() => {
+
+	  var oldstream= document.getElementById('previewWebcam').srcObject;
+	  if (oldstream){
+		  oldstream.getTracks().forEach(function(track) {
+			  track.stop();
+		  });
 	  }
+	  
+	  var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+
+	  if (iOS){
+		  navigator.mediaDevices.getUserMedia({audio:true, video:true }).then(function(stream){ // Apple needs thi to happen before I can access EnumerateDevices. 
+				  //document.getElementById('previewWebcam').srcObject=stream;
+				stream.getTracks().forEach(function(track) { // We don't want to keep it without audio; so we are going to try to add audio now.
+					  track.stop();
+				});
+				setupWebcamSelection();
+		  }).catch(function(e){
+			  errorlog("trying to list webcam again");
+			  setupWebcamSelection();
+		  });
+	  } else {
+		  setupWebcamSelection();
+	  }
+
+  },0);
+}
 
 
 function checkOBS(){
@@ -913,19 +975,19 @@ if ((urlParams.has('streamid')) && (session.roomid==false)){
 		}
 	},2000);
 
-log("auto playing");
+	log("auto playing");
 
-if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){ 
-	alert("Safari requires us to ask for an audio permission to use peer-to-peer technology. You will need to accept it in a moment if asked to view this live video");
-	navigator.mediaDevices.getUserMedia({audio: true}).then(function(){
+	if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){ 
+		alert("Safari requires us to ask for an audio permission to use peer-to-peer technology. You will need to accept it in a moment if asked to view this live video");
+		navigator.mediaDevices.getUserMedia({audio: true}).then(function(){
+			play(urlParams.get('streamid'));
+		}).catch(function(){
+			play(urlParams.get('streamid'));
+		});
+	} else {
 		play(urlParams.get('streamid'));
-	}).catch(function(){
-		play(urlParams.get('streamid'));
-	});
-} else {
-	play(urlParams.get('streamid'));
-	//document.getElementById("mainmenu").style.display="none";
-}
+		//document.getElementById("mainmenu").style.display="none";
+	}
 }
 
 function updateMixer(){
@@ -955,7 +1017,10 @@ function updateMixer(){
 	for (i in session.rpcs){
 		if (session.rpcs[i].videoElement){
 			if (session.rpcs[i].videoElement.style.display!="none"){
+				session.requestRateLimit(-1,i); // unlock bitrate
 				mediaPool.push(session.rpcs[i].videoElement);
+			} else {
+				session.requestRateLimit(300,i);
 			}
 		}
 	};
@@ -986,21 +1051,17 @@ function updateMixer(){
 			//console.error((i+0.1)/rw,rh);
 		//}
 		
-		
-		
-		
 		offsety = (h- Math.ceil(mediaPool.length/rw)*Math.ceil(h/rh))/2;
 		
-		
 		vid.style.left = offsetx+Math.floor(((i%rw)+0)*w/rw)+"px"; 
 		//vid.style.left = Math.floor(((i%rw)+0)*w/rw)+"px"; 
 		
-		
 		vid.style.top  = offsety+Math.floor((Math.floor(i/rw)+0)*h/rh + hi)+"px";
 												
 		vid.style.width = Math.ceil(w/rw)+"px"; 
 		vid.style.height = Math.ceil(h/rh)+"px"; 
 		playarea.appendChild(vid);
+		vid.play();
 		i+=1;
 	});
 }
diff --git a/template.js b/template.js
index 9b0e421..6bf3866 100644
--- a/template.js
+++ b/template.js
@@ -4,45 +4,45 @@ $("body").append('<style id="lightbox-animations" type="text/css"></style>');
 
 /* Click on the container */
 $(".column").on('click', function() {
-/* The position of the container will be set to fixed, so set the top & left properties of the container */
+	/* The position of the container will be set to fixed, so set the top & left properties of the container */
 
-var bounding_box = $(this).get(0).getBoundingClientRect();
-$(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' });
+	var bounding_box = $(this).get(0).getBoundingClientRect();
+	$(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' });
 
-/* Set container to fixed position. Add animation */
-$(this).addClass('in-animation');
+	/* Set container to fixed position. Add animation */
+	$(this).addClass('in-animation');
 
-/* An empty container has to be added in place of the lightbox container so that the elements below don't come up
-Dimensions of this empty container is the same as the original container */
-$("#empty-container").remove();
-$('<div id="empty-container" class="column"></div>').insertAfter(this);
+	/* An empty container has to be added in place of the lightbox container so that the elements below don't come up
+	Dimensions of this empty container is the same as the original container */
+	$("#empty-container").remove();
+	$('<div id="empty-container" class="column"></div>').insertAfter(this);
 
-/* To animate the container from full-screen to normal, we need dynamic keyframes */
-var styles = '';
-styles = '@keyframes outlightbox {';
-styles += '0% {';
-styles += 'height: 100%;';
-styles += 'width: 100%;';
-styles += 'top: 0px;';
-styles += 'left: 0px;';
-styles += '}';
-styles += '50% {';
-styles += 'height: 220px;';
-styles += 'top: ' + bounding_box.y + 'px;';
-styles += '}';
-styles += '100% {';
-styles += 'height: 220px;';
-styles += 'width: '+bounding_box.width+'px;';
-styles += 'top: ' + bounding_box.y + 'px;';
-styles += 'left: ' + bounding_box.x + 'px;';
-styles += '}';
-styles += '}';
+	/* To animate the container from full-screen to normal, we need dynamic keyframes */
+	var styles = '';
+	styles = '@keyframes outlightbox {';
+	styles += '0% {';
+	styles += 'height: 100%;';
+	styles += 'width: 100%;';
+	styles += 'top: 0px;';
+	styles += 'left: 0px;';
+	styles += '}';
+	styles += '50% {';
+	styles += 'height: 220px;';
+	styles += 'top: ' + bounding_box.y + 'px;';
+	styles += '}';
+	styles += '100% {';
+	styles += 'height: 220px;';
+	styles += 'width: '+bounding_box.width+'px;';
+	styles += 'top: ' + bounding_box.y + 'px;';
+	styles += 'left: ' + bounding_box.x + 'px;';
+	styles += '}';
+	styles += '}';
 
-/* Add keyframe to CSS */
-$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
+	/* Add keyframe to CSS */
+	$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
 
-/* Hide the window scrollbar */
-$("body").css('overflow', 'hidden');
+	/* Hide the window scrollbar */
+	$("body").css('overflow', 'hidden');
 });
 
 /* Click on close button when full-screen */
@@ -65,8 +65,8 @@ e.stopPropagation();
 $(".column").on('animationend', function(e) {
 /* On animation end from normal to full-screen */
 if(e.originalEvent.animationName == 'inlightbox') {
-$(this).children(".close").show();
-$(this).children(".container-inner").show();
+	$(this).children(".close").show();
+	$(this).children(".container-inner").show();
 }
 /* On animation end from full-screen to normal */
 else if(e.originalEvent.animationName == 'outlightbox') {