mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 13:48:38 +00:00
syncing with production
plus a few bug fixes
This commit is contained in:
Steve Seguin
GitHub
parent
f1c7f8f224
commit
4ed637d48b
135
cat.svg
Normal file
135
cat.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 7.8 KiB |
BIN
favicon-16x16.png
Normal file
BIN
favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
BIN
favicon-32x32.png
Normal file
BIN
favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
43
index.html
43
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>  
|
||||
<a href="./" style="text-decoration:none;color:white;margin: 2px;"><font id="qos">O</font>BS.Ninja</a>  
|
||||
<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>
|
||||
|
||||
89
main.css
89
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)
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
253
main.js
253
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;
|
||||
});
|
||||
}
|
||||
|
||||
70
template.js
70
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') {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user