From 4ed637d48b9df3ad99e8aa696a1d54a000483d48 Mon Sep 17 00:00:00 2001
From: Steve Seguin <steve@seguin.email>
Date: Mon, 20 Apr 2020 21:17:51 -0400
Subject: [PATCH] syncing with production

plus a few bug fixes
---
 cat.svg           | 135 +++++++++++++++++++++++++
 favicon-16x16.png | Bin 0 -> 757 bytes
 favicon-32x32.png | Bin 0 -> 1279 bytes
 favicon.ico       | Bin 0 -> 15086 bytes
 index.html        |  43 ++++----
 main.css          |  89 +++++++++++++++-
 main.js           | 253 ++++++++++++++++++++++++++++------------------
 template.js       |  70 ++++++-------
 8 files changed, 433 insertions(+), 157 deletions(-)
 create mode 100644 cat.svg
 create mode 100644 favicon-16x16.png
 create mode 100644 favicon-32x32.png
 create mode 100644 favicon.ico

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 0000000000000000000000000000000000000000..f27e085abc9f594e60fcf5dbb1454bbbe33103c3
GIT binary patch
literal 757
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6SkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YDR+ueoXe|!I#{XiaP
zfk$L9kbVNfjIoO<ZvYwWC7!;n>`z#PIfR9>GR{0_U|>w}ba4#PI3GIktaeMF$g%qJ
zXR66cs?wfQde<AYKFr^+LEzA_Lrh0+xozCIbz;xNDLOe4p2pVNY)_Me_RUJGF_CWj
z6#8V}@kgfb_neEpQ+)pOmpjGt7XRR`U!A{U%gP-Lm-1IWp8WK$v&=+mfjge}Urnh!
z^zt8rrJ0S8=PUNRT9=>A_4R!5&|oLS7d_QdujOB6bcT2zaeT?!aQnIZe7(;Mdsa`V
zQgZx0e}iM;(WC2jCvRGRSL@G)MGxX?A3b!-U2S>wy=PZo+~mxsL6P70%nD}+4svl_
zJ29TA;Ov?%jpqrxJX{stJgk2Vo^@Fsu-TR3!Lxeuc9YQVQ=Er;zI05jwb><<uK&hR
z@wJd?^CQ*;aYk1vc;?st)_k4N->Hzj?CY(noSZUQ_i*R?+kUM0(ICyRFXFa^?WVQo
zGVZ*V+<f^@`qr&$E);)TyyM=M>8a=MT?(@fiJTtKF@OEX&#PNsG=~0XUDSA_c;n2Y
z+kwHaTH+c}l9E`GYL#4+3Zxi}42%qP4NP<mEkg_}tPCx!3@x+`jI0a{djIkRqZUa+
zZhlH;S|x4`e-><40cwy0*$|wcR#Ki=l*&+EUaps!mtCBkSdglhUz9%kosASwQFv8I
zL`hI$xk5ovep+TuszOO+L8?M#K}j+LL&coOpLjS5!!$Hb`JX=H`80@uS(#fenOj&{
z*n6@Fv#^3ogUR6(X64Nx3a4*eIdSC75t$?GryD#Lc<C{`5*IA_<YYP(Xa$3(tDnm{
Hr-UW|H}5Zb

literal 0
HcmV?d00001

diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..032c7bc7ec9dcff3044ecfb9d5a628cbfb7e99b9
GIT binary patch
literal 1279
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UEa{HEjtmSN`?>!lvVtU&J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-G$+Qd;gjJKptm-
zM`SSr1LFx0X58$tZ3j@0y~NYkmHi2eFo&>ER>qm<3=GU!o-U3d9>;s9#`|0j7ddYK
z{klA>rt<+u?RC1-T6dmx6}ypCl6+0T^TT-=p_%+g#J@dAGTNN#pVOG4cY2a;^t7B#
zeYH&~-StY`c_%jMHc7=P^sNYP?$TY$H0=zh*o*#KyW4Ml(%!#2?fJ_)pKYI4pWpfY
zPBE*NrdF0#-pNv{Fp=yJ3W9U{ef{L;+n#k^y?R5$op<ZC<L*W8Q%#?G(&B7GVUkis
z<{yEFIV?Zt<=67I&$YW!H2d4i2R9!$KD)~D^xnPm^KK{YKhGrh&-<Ujt^6Kyqlr<s
zFQtZu|GO0$n%gY%=N8B7h@~nYZoZn^T>a=Tcks!r-;V6Nb-DP~Yt{pPlWml@WyyEc
zPZ1F<skXJ<aYj`ngl}He#hGP0UFWg|oLXMg9y0Mx>iezM(w%mi2S1;E{#8H2yMR;u
zsB=P}@gx0h6O$D+j)dEU7+s#Nb1?Ykk6rU#ZZO=NKYzy}og?el-))sP`A~OtW13}5
z>ZR(It_Oy5pNhsexGh}1>=aYAZ`Je{XBW(PuD&sTj`-^%v%)nm%&*FxfB97Yj4u|s
zk3=_m?&>f+7g{)z)y#W;i`erMdV9C*JeQ}sV|$M6kqMgIy?mS>+}5pjjsED<sai8}
z@~K_HpSH#DJ7`ws-F;}_Tzn@bNJemR<e|AWbM`H+Y0o>o;{d;F`L(@_`=)4L-ZgLW
z%=wpZ{ujKbvpwz0GC6<wA3E}>yz7@LZ)`l%*Dd`k#$>C7j@qV{>7SDiC2n+EeCyBM
z{fs+~@kf5Yue|o5U{a!O(W{!jdDbOe$8W4$7G~GY-E46Di0|a$)}|5#v&xu&AGc0$
zzPBu#a@XVplW@)jExje1t(3~6<jRT@3YyRPyf`12Kle-YkGFf&r*kaR{lQzAKf_&$
zg?~$X&Wa;8G0tLJY-KEF%whlTTr2)at7&=W<dv4jo8EMsKYG|+*t6GU_xnfRO|z#)
z@_gP`#(m;>mXdz1Z0i4|57fkhov%t%f1Yc-*{dn4&Rb?u<(Z4~&n31oCm)=vbLdh;
z{T7Q0*8{>smMpk%^NgM4=~5|1jtf#VGNN|ObvZkA>d(5LDSP7$WhWKQecpJ#_nda}
z?an1@o;~ijvnacG@pV;Z>dZ~*-aF@HaF@vQZcSQs?bWVZf9I}Vw)M>ZH^pzwcPRxQ
zURXZ!OiB3n`cKv6mY?42OgOTs_WggRqWL0I<!8Q?0A@th64!{5l*E!$tK_0oAjM#0
zU}T_cV4`bi8Dd~zWoT(-XrXOjWMyE``<EY>$&obV=BH$)RpQq0XTf$Apaw~h4Z-<o
zCFO}lsSM@i<$9TU*~Q6;1*v-ZMd`EO*+>Bug;#|{lmsP~D-;yvr)B1(DwI?fq$*?<
zlq54SRLpt&iHD;wOhe<8|LHTHPlFhkmAUnjxrLR5y(fz>3oE!Zm>f=FR^A+<aQeoT
n6GzS*kvYPCy1`?Cmmb3_alw*LPNq|VRxo(F`njxgN@xNA$Nx2z

literal 0
HcmV?d00001

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..d022a55d0ec24092bb5a0d4e517f2ce836b11931
GIT binary patch
literal 15086
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

literal 0
HcmV?d00001

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') {