96 lines
3.7 KiB
Markdown
96 lines
3.7 KiB
Markdown
---
|
|
description: "No integration should not mean no on-stream notifications"
|
|
---
|
|
# Use for free
|
|
|
|
<div style="text-align: left;">
|
|
<form class="black-80 sans-serif" onsubmit="return false;">
|
|
<label for="session_token" class="f6 b db mb1 mt3 sans-serif mid-gray">
|
|
Session token
|
|
</label>
|
|
<input id="session_token" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn">
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Paste some code here to join someone's else work.
|
|
</div>
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Automatically generated.
|
|
</div>
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
Automatically saved. (in your browser)
|
|
</div>
|
|
<div class="w-100" style="text-align: right;">
|
|
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Generate another" onclick="generate_another();">
|
|
</div>
|
|
</form>
|
|
|
|
|
|
## Display Page
|
|
<form class="black-80 sans-serif" style="text-align: center;" onsubmit="return false;">
|
|
<input id="url_0" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" readonly>
|
|
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Link to clipboard" onclick="copyClipboard(url_0);">
|
|
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Open in new tab" onclick="openTab(url_0);">
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
This goes into OBS, XSplit, CasparCG, etc.
|
|
</div>
|
|
</form>
|
|
|
|
## Control Panel
|
|
<form class="black-80 sans-serif" style="text-align: center;" onsubmit="return false;">
|
|
<input id="url_1" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" readonly>
|
|
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Link to clipboard" onclick="copyClipboard(url_1);">
|
|
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Open in new tab" onclick="openTab(url_1);">
|
|
<div class="requirements f6 gray glow i ph3 overflow-hidden">
|
|
This controls what gets displayed in your stream
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<style>
|
|
input[type=button] {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script>
|
|
function uuidv4() { // https://stackoverflow.com/a/2117523
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
|
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
return v.toString(16);
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
function save_changed_session_token() {
|
|
localStorage.setItem('last_session', session_token.value);
|
|
var displayUrl = `${window.location.origin}${window.location.pathname}/display/#${session_token.value}`;
|
|
displayUrl = displayUrl.replace('://', ':///').replace(/\/\//g, '/');
|
|
url_0.value = displayUrl;
|
|
var controlUrl = `${window.location.origin}${window.location.pathname}/control/#${session_token.value}`;
|
|
controlUrl = controlUrl.replace('://', ':///').replace(/\/\//g, '/');
|
|
url_1.value = controlUrl;
|
|
}
|
|
</script>
|
|
<script>
|
|
session_token.onkeyup = save_changed_session_token;
|
|
session_token.onkeydown = save_changed_session_token;
|
|
session_token.onchange = save_changed_session_token;
|
|
session_token.value = localStorage.getItem('last_session') || uuidv4();
|
|
save_changed_session_token();
|
|
</script>
|
|
<script>
|
|
function generate_another() {
|
|
session_token.value = uuidv4();
|
|
save_changed_session_token();
|
|
}
|
|
</script>
|
|
<script>
|
|
function copyClipboard(linkElem) {
|
|
linkElem.select();
|
|
linkElem.setSelectionRange(0, 999999);
|
|
document.execCommand('copy');
|
|
}
|
|
</script>
|
|
<script>
|
|
function openTab(linkElem) {
|
|
window.open(linkElem.value, '_blank');
|
|
}
|
|
</script> |