Creating an interactive overlay, with JS, for twitch simulating GTA San Andreas

Esteve segura
Nov 4 · 2 min read
FINAL RESULT

Browsing twitch I found a stream of a food deliveryman working for UBER Eats. It is something I had not seen yet, a stream from the street, and performing that kind of actions.

I found the stream in the following state:

Stream at start

A stream without overlay and with cuts in a very repeated way. Which did not allow the twitch algorithm to recommend its channel more.

This was the first problem to be solved, the connection cuts, or at least the absolute disconnection of twitch … This will be for another article. (It’s not ready yet).

Step 1 — Planning the overlay

The overlay cannot be static, all the elements must be administrable, from an administration panel.

We will create everything based on HTML, CSS, JS with a client-server scheme, based on socket.io. We will have a website for the admin panel and various websites for our elements.

The first step is to create a web server and be able to support websockets. We will do all this in node.js with the express framework

Step 2 — Code

server.js

Continuing, we will start with the administration panel. The most important part is to send the data that will be modifier in the overlay by socketIO. We are collecting our data from a form with a text input. This is the logic in JavaScript that we will use to send our data via SocketIO.

admin.ejs

Time to test our Client / Server connection

Testing conection

Now we know that the connection works. Time to receive our connection in an HTML page. For this we will create our element in HTML, CSS and we will use JS to receive the data from our server.

tips.html, our first element

If we put everything to work, it will look like this

In Web:

In OBS:

OBS test

Now we can create as many elements, as we want. This is a simple guide to explain in broad terms how overlay works. In the future I will explain how to create the minimap and make it functional.

Result

Admin panel preview

Step 4— Links

You can contact me at: estevesegura@protonmail.com,
The code on: github
The stream where you can see this working: titus_clan

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade