This repository was archived by the owner on Jan 8, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathquickstart.html
More file actions
483 lines (463 loc) · 20.7 KB
/
quickstart.html
File metadata and controls
483 lines (463 loc) · 20.7 KB
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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<html>
<head>
<title>XSplit JS Framework Quick Start</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700italic,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/prism.css">
<link rel="stylesheet" type="text/css" href="css/quickstart.css">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/prism.js"></script>
<script src="js/quickstart.js"></script>
<link rel="import" href="polymer_elements/navbar/navbar.html">
<link rel="import" href="polymer_elements/copyright/copyright.html">
</head>
<body>
<xsplit-navbar></xsplit-navbar>
<div id="header">
Quick Start
</div>
<div id="container">
<div id="left">
<ul class="vertical-menu">
<li>
<a href="#intro">Introduction</a>
</li>
<li>
<a href="#start">Installing XSplit JS Framework<code></a>
</li>
<li>
<a href="#source">Creating your First Source Plugin</a>
</li>
<li>
<a href="#extension">Creating your First Extension Plugin</a>
</li>
<li>
<a href="#next">What's next?</a>
</li>
<li>
<a href="#sample">Sample plugins</a>
</li>
</ul>
</div>
<div id="right">
<a id="intro" name="intro">
<h1>Introduction</h1>
</a>
<p>
Plugins are important tools for extending the functionality of XSplit Broadcaster. In order to allow developers to create useful plugins for the community, we created the XSplit JS Framework to encapsulate the capabilities of the application in an easy-to-understand manner.
</p>
<p>
We will walk you through on how to get started building your own XSplit Broadcaster plugin using this framework.
</p>
<a id="start" name="start">
<h1>Installing XSplit JS Framework</h1>
</a>
<p>
First, you will need the latest official build of XSplit Broadcaster or the Public Test Release version of XSplit Broadcaster to use the XSplit JS Framework.
The framework requires minimum XBC version 2.7.1512.2124, unless stated otherwise in the API documentation.
</p>
<p>
Please note that XSplit Broadcaster PTR version may contain changes that could affect or change the behavior of some methods in the framework.
</p>
<div class="download-xbc">
<a href="https://cdn2.xsplit.com/download/bc/m43/4.0.2007.2918/xbc_web_installer_4.0.2007.2918.exe" title="Latest Build">
<span class="softwareIcon"></span>
<span class="softwareInfo">
<span class="softwareDownloadText">XSplit Broadcaster</span>
<span class="softwareVersion">Version 4.0.2007.2918</span>
<span class="softwareRelease">| Latest Build</span>
</span>
</a>
</div>
<div class="download-xbc-ptr">
<a href="https://cdn2.xsplit.com/download/bc/m44/4.1.2102.2201/xbc_web_installer_Beta_4.1.2102.2201.exe" title="Latest PTR Build">
<span class="softwareIcon"></span>
<span class="softwareInfo">
<span class="softwareDownloadText">XSplit Broadcaster PTR</span>
<span class="softwareVersion">Version 4.1.2102.2201</span>
<span class="softwareRelease">| Latest PTR Build</span>
</span>
</a>
</div>
<p>
You can install or start using the framework in a lot of ways, but fastest and the most basic way is to download <a href='https://cdn2.xsplit.com/xjs/download/xjs.js'><code>XSplit JS Framework</code></a>, add it on your project folder, import it on your html file, and you are good to go.
Outlined below are simple demonstrations on how you can use the framework in creating your own <a href="#source">Source</a> or <a href="#extension">Extension</a> plugin.
</p>
<a id="source" name="source">
<h2>Creating your First Source Plugin</h2>
</a>
<p>
What is a Source plugin? Source plugins are objects that may be added to your presentation to be included in your streams and recordings.
</p>
<p>
The image below is an example of a source plugin. This in particular, changes text once you start/stop a stream or recording.
</p>
<p class="center inner-padding-10">
<img class="quick-img" src="assets/sample-source.gif">
</p>
<p>
Let's build this plugin step by step! This example would need to use the <code>ChannelManager</code> class of the framework to listen for the <code>stream-start</code> and <code>stream-end</code> events from XSplit Broadcaster.
</p>
<pre class="language-markup">
<code>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="stream-status">
Stream is not Live
</div>
<script src="js/xjs.js"></script>
<script src="js/main.js"></script>
</body>
</html></code>
</pre>
<p>
You can see above that we have set up an initial html file that imports the framework.
We have also created a <code><div></code> that contains the initial text when the stream is not yet live/recording. This text should change immediately when the stream starts.
</p>
<p>
Next, let's use the framework through our <code>main.js</code> file.
</p>
<pre class="language-javascript">
<code>
var xjs = require('xjs');
xjs.ready().then(function() {
xjs.ChannelManager.on('stream-start', function() {
document.getElementById('stream-status').innerHTML = 'Stream is Live';
});
xjs.ChannelManager.on('stream-end', function() {
document.getElementById('stream-status').innerHTML = 'Stream is not Live';
});
})</code>
</pre>
<p>
<em>* We're assuming that you are knowledgeable with Promises in JavaScript. If you are not, please do check it out on <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">MDN</a> or other articles about Promise programming.</em>
</p>
<p>
First, the framework is loaded and saved into the <code>xjs</code> variable. We would then access the framework's <code>ready()</code> method; a method that returns a promise,
which resolves when XSplit JS Framework is ready to use.
<br />
<p><a><i>
* It is important to note that the use of any kind of xjs calls (Environment checking, Initialization, getInstance,
and any other xjs calls) should be done after <code>xjs.ready</code> to avoid any issues.
</i></a></p>
</p>
<p>
Let's dissect the code further...
</p>
<p>XSplit Broadcaster emits the <code>stream-start</code> and <code>stream-end</code> events through the <code>ChannelManager</code> class.</p>
<pre class="language-javascript">
<code>
xjs.ChannelManager.on('stream-start', ...)
xjs.ChannelManager.on('stream-end', ...)</code>
</pre>
<p>
Here, we include a handler for when your stream has started/stopped. For our sample plugin, we can just change the text of the appropriate <code><div></code>.
</p>
<pre class="language-javascript">
<code>
function() {
document.getElementById('stream-status').innerHTML = 'Stream is not Live/Live';
}</code>
</pre>
<p>
And then, you can create a CSS file and update how your plugin would look like.
For this example, I set the background-color as transparent for it to blend in with the scene and only the text would be visible. (By default, text color is black.)
</p>
<pre class="language-css">
<code>
body {
background-color: transparent;
color: white;
}</code>
</pre>
<p>
Once, you are done with all of this, you would have to add and test your plugin. You can simply drag the index.html file to the stage or add it as a media file:
</p>
<p class="center inner-padding-10">
<img class="quick-img" src="assets/add-media.png">
<img class="quick-img" src="assets/add-media-2.png">
</p>
<p>
And there you have it, your very first Source Plugin!
</p>
<p class="center inner-padding-10">
<img class="quick-img" src="assets/sample-source.gif">
</p>
<p>
For more information about Sources and other things you can do with them (such as applying a <strong>Custom Configuration Object</strong>),
please check the <a href="tutorials.html#/sourceplugins">Developing Sources</a> tutorials page.
</p>
<hr />
<a id="extension" name="extension">
<h2>Create your first Extension Plugin</h2>
</a>
<p>
What is an Extension? Extension plugins are tools that you can use to do different kinds of tasks to manipulate
the XSplit Broadcaster application itself. Seen below is a sample scene switching extension, followed by a step-by-step guide to make it.
</p>
<p class="center inner-padding-10">
<img class="quick-img" src="assets/extension_sample.gif">
</p>
<p>
Much like how Source Plugins are created, extensions also require an HTML file.
For this one, we'll be creating an extension plugin that would load up all the scenes, creating buttons for each of them that allows you to switch to that scene.
</p>
<pre class="language-markup">
<code>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Sample Scene Switch</p>
<div id='scene-id'>
</div>
<script src="js/xjs.js"></script>
<script src="js/main.js"></script>
</body>
</html></code>
</pre>
<p>
In the above html, we will append the scene buttons to the<code>scene-id</code> element. Let's check out what we need to do in <code>main.js</code>.
</p>
<pre class="language-javascript">
<code>var xjs = require('xjs');
xjs.ready()
.then(function() {
return xjs.Scene.getSceneCount();
}).then(function(count) {
for(let i = 1; i < count + 1; i++) {
xjs.Scene.getById(i).then(function(scene) {
var newElement = document.createElement('BUTTON');
var t = document.createTextNode('Scene:: '+ i);
newElement.appendChild(t);
document.getElementById('scene-id').appendChild(newElement);
newElement.addEventListener('click', function() {
xjs.Scene.setActiveScene(scene);
});
});
}
});</code>
</pre>
<p>
Now, let's dissect the sample code above.
</p>
<p>
XSplit Broadcaster can have any number of scenes and we can get the current number using <code>getSceneCount</code>.
</p>
<pre class="language-javascript">
<code>
.then(function() {
return xjs.Scene.getSceneCount();
})</code>
</pre>
<p>
With the scene count, we then loop through the scenes and create buttons for each one of them.
</p>
<pre class="language-javascript">
<code>
xjs.Scene.getById(i).then(function(scene) {
var newElement = document.createElement('BUTTON');
var t = document.createTextNode('Scene:: '+ i);
newElement.appendChild(t);
document.getElementById('scene-id').appendChild(newElement);
});</code></pre>
<p>
After assigning each instance of Scene with a button, we also add a click event listener on them. To change scenes, we can pass the desired <code>Scene</code> object into <code>setActiveScene()</code>.
</p>
<pre class="language-javascript">
<code>
newElement.addEventListener('click', function(){
xjs.Scene.setActiveScene(scene);
});</code></pre>
<p>
Once this is all done, you can now add your extension to XSplit Broadcaster. Navigate to the extensions menu to add a custom extension and add your HTML file.
</p>
<p class="center inner-padding-10">
<img class="quick-img" src="assets/add_ext_1.png">
<img class="quick-img" src="assets/add_ext_2.png">
</p>
<p>
You will then see it on the Extensions menu. Click on your extension to open it in a separate window.
</p>
<p class="center inner-padding-10">
<img class="quick-img" src="assets/extension_sample.gif">
</p>
<p>
And there you have it! An extension plugin that contains all your scenes and can also switch scenes.
</p>
<p>
For more information on the things you can do with Extensions,
you can read more about it on <a href="tutorials.html#/extensions">Developing Extension Plugins</a> tutorials page.
</p>
<h3>Sample Snippets</h3>
<p>Here are some more sample snippets you can check out to get a better idea of how the framework might be used. Many of these will work only in extensions.</p>
<div class="lightbox-content">
<!-- SAMPLE SNIPPET 1 -->
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class="open-snippet" id="open-snippet">
Spawning Dialogs
</div>
</a>
<div id="light" class="white_content">
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
<div class="close-overlay">
</div>
</a>
<div class="code-snippet">
<pre class="language-javascript">
<code>
xjs.Dialog.createDialog('https://www.xsplit.com/')
.setSize(300, 300)
.setTitle('This is a sample dialog')
.setBorderOptions(true, false)
.setButtons(true, true)
.show();
});</code>
</pre>
<p>
Dialog class is used to spawn new browser processes that can be used to open other URLs.
Source plugins do not have this functionality (but their source properties windows may use this.)
</p>
<p>
View more information about the Dialog class on its <a href="api.html#/window/Dialog">Dialog API</a> page.
</p>
</div>
<div class="code-working">
<img class="snippet-img" src="assets/quickstart/spawndialog.gif">
</div>
</div>
<!-- SAMPLE SNIPPET 2 -->
<a href="javascript:void(0)" onclick="document.getElementById('light-4').style.display='block';document.getElementById('fade').style.display='block'">
<div class="open-snippet" id="open-snippet">
Start/Stop Stream
</div>
</a>
<div id="light-4" class="white_content">
<a ref="javascript:void(0)" onclick="document.getElementById('light-4').style.display='none';document.getElementById('fade').style.display='none'">
<div class="close-overlay">
</div>
</a>
<div class="code-snippet">
<pre class="language-javascript">
<code>button1.addEventListener('click', function(){
stream.startBroadcast();
});
button2.addEventListener('click', function(){
stream.stopBroadcast();
});</code>
</pre>
<p>
<em>* <code>stream</code> is an instance of <code>Output</code> that you can get using <code>Output.getOutputList()</code></em>
</p>
<p>
The <code>Output</code> class provides methods to start and stop a stream/recording, and to pause or unpause a Local Recording.
</p>
<p>
View more information about the Output class on its <a href="api.html#/core/Output">Output API</a> page.
</p>
</div>
<div class="code-working">
<img class="snippet-img" src="assets/quickstart/stream.gif">
</div>
</div>
<!-- SAMPLE SNIPPET 3 -->
<a href="javascript:void(0)" onclick="document.getElementById('light-5').style.display='block';document.getElementById('fade').style.display='block'">
<div class="open-snippet" id="open-snippet">
Media Control
</div>
</a>
<div id="light-5" class="white_content">
<a ref="javascript:void(0)" onclick="document.getElementById('light-5').style.display='none';document.getElementById('fade').style.display='none'">
<div class="close-overlay">
</div>
</a>
<div class="code-snippet">
<pre class="language-javascript">
<code>if (sources[0] instanceof xjs.MediaSource) {
playBtn.addEventListener('click', function(){
sources[0].setPlaying(true);
});
pauseBtn.addEventListener('click', function(){
sources[0].setPlaying(false);
});
}</code>
</pre>
<p>
<em>* <code>sources</code> is an instance of a <code>Source</code> that you can get using <code>scene.getSources()</code>.</em>
</p>
<p>
The <code>MediaSource</code> class represents the media sources (such as video) that has been added to the stage.
</p>
<p>
View more information about the MediaSource Class on its <a href="api.html#/core/MediaSource">MediaSource API</a> page.
</p>
</div>
<div class="code-working">
<img class="snippet-img" src="assets/quickstart/media.gif">
</div>
</div>
<div id="fade" class="black_overlay"></div>
</div>
<hr />
<a id="next" name="next">
<h2>Where to go from here?</h2>
</a>
<h3>Check the API</h3>
<p>
We highly suggest you check our <a href="api.html">API</a> to further explore the things you can do using the framework.
Here, you can see more detailed information about the classes and methods that we've used in the examples and all the other
ones you can still use in the future.
We are constantly adding features to our framework and the best place to read more about them is here.
</p>
<h3>Read more Tutorials</h3>
<p>
You can also go ahead and check the <a href="tutorials.html">Tutorials</a> section to learn more about specific use cases, as well as advanced stuff you do with xjs framework.
There are also more plugin examples there that you might be interested in checking and may find useful.
</p>
<p>
There are also other guides on the tutorials section about the common errors that you may encounter and debugging tips that you may find
useful while you create your own plugin.
</p>
<h3>Take a look at the Plugin Store</h3>
<p>
The XSplit Broadcaster App has a <strong>Plugin Store</strong> that already have loads of plugins that you can download and use for free at our Plugin Store,
and we make a constant effort to make new ones to provide you with the needed tools to make your
streams and recordings have the elements that you need.
</p>
<h3>Contribute</h3>
<p>
You may have ideas of your own or have found a bug on the framework. We have an incredible community of developers who are passionate about solving problems and
want to listen to your ideas. For this, you could send us some questions or suggestions at <a href="https://github.com/xjsframework/xjs/issues/new">Github</a> or directly chat with us on <a href="https://gitter.im/xjsframework/xjs">Gitter</a>.
</p>
<p>
We hope to hear from you and would love to check out the plugins you've created.
</p>
<hr />
<a id="sample" name="sample">
<h2>Sample Plugins</h2>
</a>
<p>
Here are a couple of sample plugins that showcases what you can actually do using XSplit JS Framework. You could check out the source code to get a better understanding on how the plugin works.
</p>
<h3><em>Scene Rotator Extension plugin</em></h3>
<p>
This plugin demonstrates what you can do on Extension plugins. The Scene Rotator plugin would automatically switch to the specified scenes after the given interval. Please do check out the source code at <a href="https://github.com/xjsframework/scene-rotator" target="_blank">github</a>.
</p>
<h3><em>Source Toggler Source plugin</em></h3>
<p>
This plugin demonstrates what you can do on Source plugins, specifically on how source plugins modify other item sources' properties. The Source Toggler plugin would allow the user to attach two other sources and then modify its position and rotation properties. Please do check out the source code at <a href="https://github.com/xjsframework/source-toggler" target="_blank">github</a>.
</p>
<h3><em>Twitch Chat Viewer via Twitch Chat Popout</em></h3>
<p>
This plugin demonstrates a different take on doing plugins. This involves injecting custom javascript and css to style and add configurability to an already existing webpage. Please do check out the source code at <a href="https://github.com/xjsframework/twitch-chat-viewer-popout" target="_blank">github</a>.
</p>
</div>
</div>
<xsplit-copyright></xsplit-copyright>
</body>
</html>