My other project web-overlays
implements websocket, mqtt and gun protocols for syncing data.
Simple and powerfull remote controlled html pages useful for overlays in OBS Studio, Casper CD, XSplit or simply fullscreen browser.
Check out overlays project using gundb: https://github.com/filiphanes/gun-overlays
You can run server with Python or Nodejs.
Python 3.6+ is needed. You can download it from https://www.python.org/downloads/
pip3 install websockets
NodeJS is needed. You can download it from https://nodejs.org/en/
npm install ws
Python server:
python3 server.py 127.0.0.1 8089
Node server:
node server.js 127.0.0.1 8089
Open in browser lower-third-simple/controller.html
.
Open in browser lower-third-simple/overlay.html
Setting you might need to change is websocket URI in overlay.html
and controller.html
in directory your-overlay/
.
FSet it to the same IP address and port as your server is running on.
WEBSOCKET_URI = "ws://127.0.0.1:8089/"
https://github.com/CasparCG/help/wiki/Media:-HTML-Templates
https://learn.renewedvision.com/propresenter6/the-features-of-propresenter/web-view
https://help.xsplit.com/en/articles/5142996-webpage
You can create your own overlay and associated controller without implementing server.
Server API is made simple and universal. Server only keeps state of overlay and broadcasts state updates from controller to all connected clients.
ws://host:port/path
. Path can be any string you choose.Usually you want to send commands to overlay like show or hide something. With state updating aproach you don't send {"command":"show-counter"}
and {"command":"hide-counter"}
, but rather {"show-counter":true}
and {"show-counter":false}
.
This approach is more robust against errors on network. Controller and overlay can connect and disconnect any time and he recieves full state and don't need to replay commands from history.
This project was inspired by