Introduction

IROS is a simple web based overlay which can be integrated into your stream through a browser source. It allows you to display and arrange text, images and other elements on stream through a web interface. Anybody with access to the editor link can control the overlay and update it in real time.

As of now the overlay supports the following elements:

See quickstart to get started with a few simple steps or look below for a more thorough explanation for setting it up. This tutorial is also available as a video (click on it to load it):

Video placeholder

Getting started

The overlay is split up into two parts, the editor and the overlay itself. To use both of them a new session has to be created. This will give you two links, one for the editor and one for the overlay. A new session can be created here:

Create a session

To generate a new session enter the link to you stream and optionally the size of the overlay. The link to the stream is then used to display it in the background of the editor as a reference when adding and moving elements. The size is used to make sure that the overlay matches the resolution of your stream. If no size is provided it will default to 1920x1080. As of right now the editor is optimized for an aspect ratio of 16:9.

Once you've entered the stream link click the generate button. Afterwards two links will be displayed. The first one is the editor link and the second one is the overlay link. The links essentially just contain a session id which is unique for each overlay.

Important: The generated links should only be shared with people you trust. Anyone that has access to them or the session id they contain can use the editor to change the overlay.

Adding the overlay

Adding the overlay to your stream is done through a browser source. If you don't know how to add a browser source to your streaming software here's two links for how to do it in OBS and XSplit:

For the following steps OBS studio is used since most people use it. After having added a browser source you'll be presented with the following dialog:

OBS browser source dialog

The URL field is where you enter the overlay link. The width and height fields should be set to the size of your stream so the browser source fills out the entire screen. If you don't know the size of your stream you can find it in the settings dialog of OBS under the video tab. All other settings can be left at their default values. After the source has been created it will display the overlay which by default is empty.

Using the editor

The overlay editor is where elements are added, removed and modified. It consists of two windows and the main canvas area in the center. The canvas area is a representation of the current state of the overlay. The two tool windows can be moved around by clicking and dragging their title bars if they are in the way of any overlay elements. If no element is selected the windows will also be semi-transparent to make it easier to see the canvas area. If you hover over them they will become opaque.

Keybinds and basic usage

After having added an element you probably want make additional changes to it. By default newly added elements are not visible on stream. Elements that are not visible on stream will be marked by a cyan dashed border and low opacity. The currently selected element will have a red border. If the element is scaled down a lot the border might not be visible or hard to see.

By clicking on any element on the canvas you can change the active selection which will start to display the settings for the currently selected element in the settings window. Once an element is selected there are a few useful keybinds available:

To exit any of the modes press ESC or click anywhere on the canvas. If you have used Blender before some of the keybinds should be familiar to you. When moving, scaling or rotating you can press X, Y or Z to lock the movement to the x or y axis respectively.

If you have an image link in your clipboard you can paste it into the editor with Ctrl+V to create a new image element. The same goes for text which will create a new text element. The editor also has an internal clipboard which can be used to copy and paste elements. To copy an element press Shift+C and to paste it press Shift+V.

Settings window

The settings window is split up into three segments:

Adding elements

Clicking on any of the buttons at the top of the settings window will add a new element type.

Canvas settings

Here you can adjust the canvas size which will also be propagated to any overlay loaded in OBS. You can also change which stream is embed in the background, by entering the URL and the pressing "embed".

Selected element settings

Depending on what type of element is selected you'll see different settings. There are some basic properties that all elements share. The properties are more thoroughly described here.

Element list

The element list is a window that contains a list of all elements that are currently added to the overlay. The order of them represents the order in which they are displayed, so if there are two elements and element A is at the top of the list and element B is below A, A is displayed above B in the overlay. Clicking on an item in the list will change the currently selected element.

Elements

Basic properties

All elements share the following basic properties:

Name

Pretty selfexplanatory. The name can be used to make elements easier identifiable, but it does not have to be unique. IROS generates a separate unique id for each element.

Position and size

Each element has its own size and position. The position and scale are modified by moving or scaling the element. See Keybinds and basic usage for more info.

Layer or z-index

Determines which elements are drawn at the top. By default all elements use layer 0, so the oder in which they are drawn is determined by the order in which they are added to the overlay. The last element is always at the top. If you want an element to be drawn above another one you can achieve this by either increasing the z-index of the element you want to be above, or by decreasing the z-index of the element that should be below.

Opacity

With this slider the opacity or transparency of the element can be modified. If you accidentally set the opacity to zero you can use the element list to find the element again.

Visibility on stream

By default each newily added element will not be visible on stream to prevent accidentally showing something you don't want to show. By checking or unchecking the checkbox next to the eyeball or by pressing H you can make an element visible or invisible on stream.

Pivot point

The pivot point determines the origin for scaling and rotating the element. By default it is set to the center of the object. The setting has three buttons for the horizontal position of the pivot and three for the vertical position. By clicking on any of the buttons the pivot is modified, which is reflected for example by how the rotation affects the object.

Text

Can display text using basic markdown formatting, e.g. **bold**, *italic*, ~~strikethrough~~ or __underline__.

The font of the text can be changed by typing the name of the desired font into the font textbox. Keep in mind that as of right now the desired font has to be installed on the machine that displays the overlay on stream.

Other properties include the color of the text and the background.

Image

The image element can load an Image from any URL and display it in the overlay. If you copy the URL of an image to your clipboard and paste it in the editor with Ctrl+V a new image element using the URL from your clipboard will be created. As always the new element will not be visible on stream by default to prevent accidentally pasted images from showing up.

Countdown and timer

This element can either count the time up or down. It is essentially a text element with some logic to make it keep track of time. You can choose between the two modes "stopwatch" or "timer". If you choose timer you can enter the time from which it'll count down into the textbox. Lastly there's a start, pause and reset button to control the time tracking.

Emotes

It can sometimes be useful to easily display emotes people use in chat on stream. When clicking this button a new dialog will open which lets you search for emotes available on 7TV. Type in the name of the emote in the search bar and hit enter or click "Search". The dialog will show the first 40 emotes that match the query. Click on the emote you want to add and it'll be added as a new image element to the overlay.

Audio

The audio element allows embedding of audio files into the overlay. Volume, playback speed, looping and seeking are all synchronized. Muting however is not to allow the element to be muted in the editor to prevent hearing the audio twice.

Video

The video element allows embedding of video files into the overlay. Volume, playback speed, looping and seeking are all synchronized. Muting however is not to allow the element to be muted in the editor to prevent hearing the audio twice.

Iframe

The iframe element can embed any website into the overlay. Note that interaction with the website is not synchronized. So clicking on links, scrolling and other interactions will only affect the iframe in the current editor but will not be reflected in the overlay. By default interaction with the iframe is therefore disabled.

Favorites

If there are any elements that you need frequently you can favorite them by selecting them and pressing F. When clicking on the favorite button a dialog opens with a list of all favorited elements. Click on any of them to add them to the overlay. The favorites are saved locally in your browser. If you want to remove favorites you can click on the "delete mode" button. Afterwards click on any element which marks it for deletion. If you click an element again it will be unmarked. When you're finished click "done" and all elements marked for deletion will be removed.

Frequently asked questions

Where's the source code? Is this FOSS? Yes, it's available on Github. You can self-host, modify and redistribute this software under the AGPL 3.0.

Can feature X be added? Depends. You can open an issue here to describe what you're looking for.

Where can I report bugs? Bugs can be reported on github.

Why can't I move elements with my mouse? See keybinds and basic usage.

Isn't this basically what moonmoon uses? Yes, it's heavily inspired by that but written from scratch.

Is the overlay persistent? Overlay state is cached on the server and should be retained even after a server restart, but there's no guarantee.

What about latency? The server is located in central Europe so depending on the location of the streamer and the users of the editor the latency can differ, but it should generally be fast enough.

How does this actually work? It's basically just a bunch of plain JS and a small WebSocket server written in Go. No fancy frameworks.