forked from steveseguin/vdo.ninja
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (158 loc) · 9.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<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 src="//console.re/connector.js" data-channel="obsninjaalpha" id="consolerescript"></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=20041914"></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 [email protected] 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>
<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 [email protected]</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>