This project is a Node.js server designed to handle a custom overlay for livestreams. It allows you to receive information about the currently playing song and update the screen in real-time.
StreamElements offers a feature that allows viewers to request songs during livestreams. Although they provide their own overlay to display this information, I found its setup somewhat cumbersome and lacking in customization options. For this reason, I decided to develop a custom alternative that gives me total creative freedom over the design and its visual integration into the stream.
The project works by setting up a very lightweight web server that has the following main characteristics:
- The song data is received from a Chrome extension (you can find the extension repository here) through an API.
- Send that data immediately (in real-time) to your overlay (what is seen on the stream) so that the information updates instantly without needing to refresh.
- The server URL will be placed in OBS (as a browser source) so it can be seen on screen.
Below is the structure and purpose of the main files in the project:
-
server.jsThe main file that initializes the application. It is responsible for setting up and starting the web server, serving the static files for the overlay (located in thepublicfolder), and integrating the rest of the system's modules. -
routes.jsDefines the API endpoints (such as/api/sync-track). It handles HTTP requests containing the updated song information and implements key-based validation to prevent unauthorized access. -
websocket.jsManages bidirectional communication via WebSockets. It keeps an open connection with the overlay to immediately broadcast data for new songs, preventing the client from having to make constant polling requests. -
public/(Folder) Contains the static files for the overlay (HTML, CSS, JavaScript). The server exposes this directory so it can be added as a Browser Source in streaming software like OBS Studio.