mirror of
https://github.com/eliasstepanik/vdo.ninja.git
synced 2026-01-11 21:58:35 +00:00
186 lines
9.9 KiB
HTML
186 lines
9.9 KiB
HTML
<html>
|
|
<head>
|
|
<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="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.7.0/css/font-awesome.min.css">
|
|
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
|
<script type="text/javascript" src="qrcode.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="./main.css" />
|
|
</head>
|
|
<body id="main" class="cat">
|
|
<script language="javascript" type="text/javascript" src="./CodecsHandler.js"></script>
|
|
<script language="javascript" type="text/javascript" src="./webrtc.js?version=20042214"></script>
|
|
|
|
<div id="header">
|
|
<h2>
|
|
<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" />
|
|
<button style="padding:1px;" onclick="jumptoroom();">GO</button>
|
|
</div>
|
|
<div id="head3" style="display:inline-block" class='advanced'>
|
|
<font style="font-size:60%"> Copy this URL into an OBS "Browser Source" => </font><a id="reshare" data-share="" onclick="var range=document.createRange(); range.selectNodeContents(document.getElementById('reshare')); var selec = window.getSelection(); selec.removeAllRanges();selec.addRange(range);document.execCommand('copy');" onmouseover="this.style.cursor='pointer'"></a> <i class="fa fa-paperclip" aria-hidden="true" onclick="var range=document.createRange(); range.selectNodeContents(document.getElementById('reshare')); var selec = window.getSelection(); selec.removeAllRanges();selec.addRange(range);document.execCommand('copy');" onmouseover="this.style.cursor='pointer'"></i>
|
|
</div>
|
|
|
|
<div id="head4" style="display:inline-block" class='advanced'>
|
|
<font style="font-size:60%"> You are in the director's view for room: <div id="dirroomid" style="font-size:140%;color:#99C;display:inline-block"></div></font>
|
|
</div>
|
|
|
|
|
|
<div id="head2" class="advanced" style="display:inline-block;text-decoration:none;font-size:60%;color:white;">
|
|
You are joining room: <div id="roomid" style="display:inline-block"></div>
|
|
</div>
|
|
|
|
</h2>
|
|
<hr />
|
|
</div>
|
|
|
|
<div id="mutebutton" onclick="toggleMute()" class='advanced float3' style="cursor:pointer" alt="Toggle the mic">
|
|
<i style="font-size:48px;color:white" id="mutetoggle" class="fa fa-microphone my-float"></i>
|
|
</div>
|
|
<div id="helpbutton" onclick="alert('Email steve@seguin.email if the system breaks or check https://reddit.com/r/obsninja for support.\n\nThere are some advanced options hidden away, such as persistent streamIDs and custom resolutions.\n\nMacOS users should be using OBS v23 due to a bug in v24 and v25')" class='advanced float2' style="cursor:pointer" alt="How to Use This with OBS">
|
|
<i style="font-size:48px;color:white;" class="fa fa-question-circle my-float"></i>
|
|
</div>
|
|
|
|
<div id="mainmenu" class="row" style="align:center;">
|
|
<div id="container-1" class="column columnfade" style="background-color:#ddd;">
|
|
<h2>Add Group Video Chat to OBS</h2>
|
|
<div class="container-inner">
|
|
<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>
|
|
<br />
|
|
With a room name entered, enter the room as a director. Links to invite guests will be provided.
|
|
<br />
|
|
<button onclick="createRoom()" class="gowebcam">Enter Room as Director</button><br />
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">Back</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-3" class="column columnfade" onclick="previewWebcam()" style="background-color:#ddd;">
|
|
<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>
|
|
<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/>
|
|
|
|
<form id="webcamquality">
|
|
<input type="radio" id="fullhd" name="resolution" value="0">
|
|
<label for="fullhd">Max Resolution </label> |
|
|
<input type="radio" checked id="halfhd" name="resolution" value="1">
|
|
<label for="halfhd">Balanced </label> |
|
|
<input type="radio" id="nothd" name="resolution" value="3">
|
|
<label for="nothd">Smooth and Cool </label>
|
|
</form>
|
|
<center><div id="webcamstats" ></div></center><br/>
|
|
|
|
<p>Audio source: <select id="audioSource"></select></p>
|
|
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">Back</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-2" class="column columnfade" style="background-color:#ddd;">
|
|
<h2 id="add_screen">Remote Screenshare into OBS</h2>
|
|
<div class="container-inner">
|
|
<p><b>note</b>: Do not forget to click "Share audio" in Chrome.<br />(Firefox does not support audio sharing.)</p>
|
|
<p><img src="share.jpg" style="max-height:55vh"/></p>
|
|
<br />
|
|
<button style="padding:10px;" onclick="publishScreen()" >SELECT SCREEN TO SHARE</button>
|
|
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">Back</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="container-4" class="column columnfade" style="background-color:#ddd;">
|
|
<h2>Generate Invite Link</h2>
|
|
<div class="container-inner">
|
|
<br /><br />
|
|
Invite Links are reusable, but each invited media source needs a unique invite link.<br /><br />
|
|
<p><input id="videoname4" placeholder="Give this media source a name (optional)" size=35 maxlength=70 style="padding:5px;" /><br /><br /></p>
|
|
|
|
|
|
<button style="padding:10px;" onclick="generateQRPage(this)" >GENERATE THE INVITE LINK</button>
|
|
</div>
|
|
<div class="outer close">
|
|
<div class="inner">
|
|
<label class="labelclass">Back</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p><div id="info" class="fullcolumn columnfade">
|
|
<center>
|
|
<div class="infoblob" align="left">
|
|
|
|
<h2>What is OBS.Ninja</h2><br />
|
|
<li>100% <b>free</b>; no downloads; no personal data collection; no sign-in</li>
|
|
<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 <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><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>
|
|
<li>Some users will have "pixelation" problems with videos. Please add the URL parameter <b>&codec=vp9</b> to the OBS Links to correct it.</li>
|
|
<br />
|
|
Site last updated: <b>April 21th, 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> <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>
|
|
<form method="post" onsubmit="setFormSubmitting()" style="display:none;">
|
|
<input type="submit" />
|
|
</form>
|
|
|
|
|
|
|
|
<div id="credits" class='credits'>Icons made by <a href="https://www.flaticon.com/authors/lucy-g" title="Lucy G">Lucy G</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a> and by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
|
|
</div>
|
|
<div id="gridlayout"></div>
|
|
<div id="controls_blank" style="display:none">
|
|
<center><br />
|
|
<b>Remote Control for OBS</b><br />
|
|
<button data-value="0" onclick="directEnable(this);">Add to Group Scene</button>
|
|
<button onclick="directMute(this);">Mute</button>
|
|
<br />Volume:<input type="range" min="1" max="100" value="100" onclick="directVolume(this);"><br />
|
|
<br /><hr /></center>
|
|
</div>
|
|
<script type="text/javascript" src="./main.js"></script>
|
|
<script type="text/javascript" src="./template.js"></script>
|
|
</body>
|
|
|
|
|
|
</html>
|