forked from stephenlb/twitch-tv-obs-subtitles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
dashboard.html
278 lines (265 loc) · 12 KB
/
dashboard.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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<meta charset="utf-8">
<title>Twitch TV Subtitles OBS Plugin</title>
<link rel="stylesheet" href="css/dashboard.css" />
<link rel="canonical" href="https://www.pubnub.com/developers/twitch-tv-obs-subtitles" />
<!-- Header Area -->
<div id="header">
<div class="shooting-stars">
<e></e><e></e><e></e><e></e><e></e><e></e><e></e>
<e></e><e></e><e></e><e></e><e></e><e></e><e></e>
<e></e><e></e><e></e><e></e><e></e><e></e><e></e>
<e></e><e></e><e></e><e></e><e></e><e></e><e></e>
<e></e><e></e><e></e><e></e><e></e><e></e><e></e>
<div class="overlay"></div>
</div>
<div class="content">
<div class="emblem"></div>
<div class="obs-icons"></div>
<div class="twitch-icons"></div>
<div class="title">
<e><twitch></twitch></e> <!--
--><e>T</e><e>w</e><e>i</e><e>t</e><e>c</e><e>h</e><e> </e><!--
--><e>S</e><e>u</e><e>b</e><e>t</e><e>i</e><e>t</e><e>l</e><e>e</e><e>s</e>
<div class="subtitle">
Add subtitles to your stream,
followers read what you say.
</div>
</div>
<div id="instructions">
<div class="live-example"><iframe
id="subtitle-display"
src="https://stephenlb.github.io/twitch-tv-obs-subtitles/subtitles.html"
allow="microphone"
></iframe></div>
<div class="installation-guide">
<div id="step-1" class="install-step">
<step>1</step>
<detail>Enable your microphone.</detail>
</div>
<div id="step-2" class="install-step">
<step>2</step>
<detail>
Next,
<a target="register"
href="https://admin.pubnub.com/#/register?utm_source=twitch-tv-obs-subtitles&utm_medium=twitch-tv-obs-subtitles&utm_campaign=twitch-tv-obs-subtitles&utm_content=twitch-tv-obs-subtitles"
>complete this form</a>,
and then <strong>come back to this page!</strong>
You need free API keys. When you complete the form,
this page will automatically generate the OBS URL
in step 3 with your API Keys for your OBS browser source.
<br>
<small>
If you already have API Keys you can
<a target="login"
href="https://admin.pubnub.com/#/login?utm_source=twitch-tv-obs-subtitles&utm_medium=twitch-tv-obs-subtitles&utm_campaign=twitch-tv-obs-subtitles&utm_content=twitch-tv-obs-subtitles"
>login here</a> instead.
<strong>
Remember to return to this page.
</strong>
</small>
</detail>
</div>
<div id="step-3" class="install-step">
<step>3</step>
<detail>
<input id="obs-url" onclick="this.focus();this.select()"
readonly="readonly" value="Complete Step 2">
Copy URL into OBS Browser Source.
</detail>
</div>
<div id="step-4" class="install-step">
<step>4</step>
<detail>
<strong>Keep this page open while you stream.</strong>
This page captures your voice transcript and
transmits the subtitles into OBS via PubNub.
If you accidentally close this page, you can always come back.
Make sure you are logged-in from step 2.
Step 2 appears if you are not logged-in.
</detail>
</div>
<div id="step-5" class="install-step">
<step>5</step>
<detail>
<a target="fork"
href="https://github.com/stephenlb/twitch-tv-obs-subtitles/fork"
>Customize the look</a>:
You may fork the GitHub repo so you can remove
watermarks and change the colors for free.
Start by forking the repository then
read further details below on this page.
</detail>
</div>
</div>
</div>
</div>
</div>
<!-- Video Tutorial Area -->
<div id="video-tutorial">
<div class="content">
<h2>How to add Subtitles for OBS Live Streams</h2>
</div>
<div class="content">
<div>
<div class="step">Step 1</div>
<img src="https://i.imgur.com/ScIDnJc.gif"
alt="How to add Subtitles to Twitch TV in OBS Step 1">
</div>
<div>
<div class="step">Step 2</div>
<img src="https://i.imgur.com/kRfIlao.gif"
alt="How to add Subtitles to Twitch TV in OBS Step 2">
</div>
<div>
<div class="step">Step 3</div>
<img src="https://i.imgur.com/s0vvMlC.gif"
alt="How to add Subtitles to Twitch TV in OBS Step 3">
</div>
</div>
</div>
<!-- Hero Call-out Area -->
<div id="hero-call-out">
<div class="content">
<div>
Free and
<strong><a target="open-source"
href="https://github.com/stephenlb/twitch-tv-obs-subtitles/">Open Source</a></strong>
</div>
<div><strong>Twitch TV</strong> and YouTube Live</div>
<div><strong>Webinars</strong> and Screencasts</div>
</div>
</div>
<!-- Main Content Area -->
<div id="article">
<div class="content">
<h2>How to make OBS Plugins for Twitch TV</h2>
<p>
Plugins should be easy to make!
And for OBS, this is true.
Hurray!
The best way by far, my opinion, is using
<strong>OBS Browser Sources</strong>.
Start by trying to add a new Browser Source to your Scene.
The following example shows you how to add the source.
</p><p>
<img src="https://imgur.com/oPXWvZk.gif"
alt="Add OBS Browser Source"
width="700" height="532">
</p><p>
The above shows you how to add a Browser Source, which is
easiest way to add your custom plugin into OBS.
You can set the URL to a local html file which contains your
code for the plugin.
The code in the HTML file may be simple or complex.
</p><p>
<a target="example-html"
href="https://github.com/stephenlb/twitch-tv-obs-subtitles/blob/master/subtitles.html">
Twitch TV OBS Subtitles</a>
is a great example of what you may put into the HTML file.
It's really that simple!
You can have animated Cats and cat pictures that change over time.
Pretty much anything you can image, just with some HTML and CSS.
It's a whole new world and you can have as many cats as you like!
</p>
</div>
<div class="content">
<h2>Modern Closed Captioning ( Subtitles )</h2>
<p>
Live TV traditionally required a human in a TV studio to
transcribe spoken voice and sounds on TV.
The studio transcriber's job is to listen to the live video
feed and as quickly and accurately as possible type the
transcription into a computer terminal which appends the closed
captioning directly into the Television Signal.
The technical job title is a "stenographer".
</p><p>
<video autoplay loop muted
title="Video with news caster and Closed Captioning texted displaed on the screen."
src="https://i.imgur.com/GLai8ij.mp4" width="100%">
</p><p>
During a live broadcast of a special event or of a news program,
captions appear just a few seconds behind the action to show
what is being said.
A <a target="stenographer"
href="https://electronics.howstuffworks.com/question427.htm">stenographer</a>
listens to the broadcast and types
the words into a special computer program that adds the captions
to the television signal.
</p>
<h2>Closed Captioning is a Slow Process</h2>
<p>
This captioning can only go as fast as a human can
process information.
The average reaction time of a human is is 215 milliseconds,
according to the data collected so far.
In addition to your reaction time, there is additional
latency of your computer and the internet.
</p><p>
However it takes longer to determine the spoken words and
then type these into a computer terminal.
Your experience is seeing a delay of 4-8 seconds.
Humans are creating the transcriptions,
and errors are prone to happening.
</p>
<h2>Now we have Artificial Intelligence and it's Taking our Jobs</h2>
<p>
Yes it is true.
AI is taking jobs and very soon the stenographer
will be completely artificial.
You will get to take advantage of this technology right now,
further aiding the succession of artificial intelligence.
</p><p>
This is the future and early AI is starting to take jobs
from humans.
This is a real world example of this.
OBS Subtitles is a perfect example of AI taking a human job.
Instead of hiring a transcriber (stenographer) while you stream,
you can have a robot do it for, at no extra cost.
</p>
<h2>Why PubNub makes OBS Plugins Better</h2>
<p>
PubNub connects everything, everywhere,
providing data transfer from one app to another app.
In the case of the subtitles captured for Twitch TV,
your web browser app is sending data to your OBS app.
Essentially your computer is sending data to
itself between two apps.
Your voice is being transcribed in your web
browser using your microphone.
The resulting transcription is transmitted
into the OBS Browser Source.
</p><p>
<img src="https://i.imgur.com/fHPe9dZ.gif"
alt="PubNub Twitch TV OBS Subtitles Plugin"
width="700" height="366">
</p><p>
Imagine now you can send data directly into OBS
and create entirely new online live experiences.
You, or a friend, can use your an iPad to draw
action lines on your live stream.
You can give remote control to channel mods to manage
your screen display and make minor changes.
So many cool things can happen now.
</p><p>
PubNub can send data to anywhere.
More than just sending data from
one app into another app on the same computer.
PubNub can send data to other computers nearby.
It can even send data to computers around the world.
Anywhere the internet exists, data can be transferred.
</p><p>
PubNub can broadcast data from one app into all other apps.
Millions of apps all-at-once, and even more beyond that.
</p>
</div>
<div class="content">
<p>
<img src="https://www.pubnub.com/wp-content/uploads/2018/07/add-subtitles-to-twitch-tv-obs.png"
alt="Add OBS Browser Source"
width="100%">
</p>
</div>
</div>
<script src="js/request.js"></script>
<script src="js/portal.js"></script>
<script src="js/dashboard.js"></scripSt>