Wednesday, April 5

Simple OBS Overlay System: NodeJS, Express, WebSockets


Introduction

I have noticed after watching a number of live streams on Twitch.tv that one of the things most starting streamers have problems with is setting up some overlays for their stream. After a number of people asked for a simple overlay system, I decided to write a simple system which anybody with even limited HTML, CSS, JavaScript capability could modify for their use.

I go through the steps of installing Open Broadcaster Software. Downloading and installing NodeJS v6.10.2. Then I continue on with programming a simple overlay system, which could be upgraded to support remote control.



Directory Sturcture
  • OBS_Overlay_System
    • public
      • images
        • 0.background.png

        • 1.online.png
        • 2.streaming.png
        • 3.brb.png
        • 3.oops.png
        • 4.done.png
      • index.html
    • overlay.js
    • package.json


Source Code
overlay.js
var server = require('http').createServer()
  , Express = require('express')
  , app = Express()
  , port = 2017
  /* WebSocket */
  , wsServer = require('ws').Server
  , wss = new wsServer({
                          server: server
                       })
  ;

wss.broadcast = function(data) {
  wss.clients.forEach( function each(client){
    if (client.readyState === 1) {
      client.send(data);
    }
  });
}

wss.on('connection', function(socket){
  console.log('Client Connected!');
  socket.send('online');
  socket.on('close', function() {
    console.log('Client Disconnected!');
  });
});

app.use( function(req, res, next){
  if (req.path != '/overlay/broadcast') return next();
  var data = req.query['stage'];
  wss.broadcast(data);
  res.send('confirmed.');
});

app.use( Express.static( __dirname+'/public' ) );

server.on( 'request', app );

server.listen( port, function() {
  console.log('Listening on http://localhost:'+port);
});

public/index.html

package.json
{
  "name": "fs-obs-overlay",
  "version": "0.1.0",
  "description": "A Very Minimilistic Overlay System for use with OBS. Uses Express, WebSockets",
  "homepage": "http://www.failedsleep.com",
  "main": "overlay.js",
  "config": {
    "port": "2017"
  },
  "dependencies": {
    "express": "^4.15.2",
    "ws": "^2.2.3"
  }
}



Install Instructions

  1. Download Source Code
  2. Extract Source Code to a Directory
  3. Open command shell
  4. Change directory to the directory the Source Code was extracted to
  5. run "npm install"
    1. This will install the node modules required in "package.json"
  6. run "node ."
    1. this will run the overlay program
    2. "Control+C" will terminate the program.

External Links


0 comments :

Post a Comment