129 lines
6.1 KiB
HTML
129 lines
6.1 KiB
HTML
<!--
|
|
This file is part of iros
|
|
Copyright (C) 2024 Alex <uni@vrsal.xyz>
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as published
|
|
by the Free Software Foundation, version 3 of the License.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>IROS</title>
|
|
<link rel='stylesheet' type='text/css' media='screen' href='static/css/landing.css'>
|
|
<script src='static/js/util.js'></script>
|
|
<script src='static/js/session.js'></script>
|
|
|
|
{{template "header.html" .}}
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="header">
|
|
<img id="header-logo" src="static/img/logo.png" alt="IROS Logo">
|
|
|
|
<!-- Header links -->
|
|
<div id="header-links">
|
|
<a href=".">Home</a>
|
|
<a href="#quickstart">Quickstart</a>
|
|
<a href="./docs">Documenation</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="screenshot">
|
|
<img src="static/img/showcase.png" alt="IROS Screenshot">
|
|
</div>
|
|
<div id="content">
|
|
<h1>The Interactive Remote Overlay System</h1>
|
|
<p>
|
|
IROS is a simple overlay which allows you to display and arrange text, images and other elements on
|
|
stream through a web interface. Make your streams more interactive and engaging by allowing your
|
|
moderators to control the overlay from their browser.
|
|
</p>
|
|
<p>
|
|
With the editor it's easy to control the overlay from a browser and update it in real time to display
|
|
information, images, emotes or other things on stream.
|
|
</p>
|
|
<p>
|
|
See <a href="#quickstart">quickstart</a> to get started with a few simple steps or check out the <a
|
|
href="./docs">documentation</a> for a more thorough explanation for setting it up and a list of all
|
|
features and how to use them.
|
|
</p>
|
|
|
|
<h1 id="quickstart">Quickstart</h1>
|
|
<p>
|
|
To get started with IROS you first need to create a new session. This will give you two links, one for
|
|
the editor and one for the overlay. The editor is where you can add and edit elements and the overlay is
|
|
what you will add to your stream as a browser source. The links can be generated here:
|
|
</p>
|
|
|
|
<h2>Create a session</h2>
|
|
|
|
<div id="generate-form">
|
|
<label for="stream-link">Stream URL</label>
|
|
<input type="text" name="stream-link" id="stream-link" placeholder="https://streamingsite/yourchannel">
|
|
<label for="size">Size</label>
|
|
<input type="text" name="size" id="size" placeholder="1920x1080">
|
|
<button onclick="generate_session()">Generate</button>
|
|
</div>
|
|
<div id="link-container" class="hidden">
|
|
<div class="link-display">
|
|
<div class="label">Editor link</div>
|
|
<input class="link-textbox" type="text" name="editor-link" id="editor-link" readonly>
|
|
<button title="Copy to clipboard" onclick="copy_link('editor-link')"><img
|
|
src="img/copy.svg" /></button>
|
|
|
|
<div class="label">Overlay link</div>
|
|
<input type=" text" name="overlay-link" id="overlay-link" readonly>
|
|
<button title="Copy to clipboard" onclick="copy_link('overlay-link')"><img
|
|
src="img/copy.svg" /></button>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
To generate a session provide a link to your stream and optionally a size of the overlay. The link
|
|
is used to embed the stream in the editor so you can see how the overlay will look on stream. The size
|
|
should be the resolution of your stream. By default it will be 1920x1080.
|
|
</p>
|
|
<p>
|
|
<strong>Important:</strong> The generated links should only be shared with people you trust. Anyone that
|
|
has access to them can use the editor to change the overlay.
|
|
</p>
|
|
|
|
<h2>Adding the overlay</h2>
|
|
<p>
|
|
To use the overlay you have to add a browser source to your streaming software and point it to the
|
|
overlay link. The overlay will automatically update when you make changes in the editor. See the
|
|
links below on how to use browser sources in your streaming software.
|
|
<ul>
|
|
<li><a href="https://obsproject.com/kb/sources-guide" target="_blank">Browser source for OBS Studio</a>
|
|
</li>
|
|
<li><a href="https://support.xsplit.com/en/article/webpage-1y1l6v/" target="_blank">Browser source for
|
|
XSplit</a>
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
<h2>Using the editor</h2>
|
|
<p>
|
|
The editor is where you can add and edit elements displayed in the overlay. It can be accessed through
|
|
the editor link using a browser. The editor is designed to be used by moderators so they can show
|
|
things on stream while the streamer is AFK or otherwise occupied. Elements can be added via the
|
|
buttons at the top of the settings panel. You can move them around by pressing <strong>G</strong>
|
|
and then moving your mouse. The same goes for scaling and rotating with <strong>S</strong> and
|
|
<strong>R</strong> respectively. For more information on how to use the editor see the <a
|
|
href="./docs">documentation</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |