Simple and powerfull remote controlled html pages useful for overlays in OBS Studio, Casper CD, XSplit or simply fullscreen browser.
- server holds overlay state
- on refresh or reconnect, state is updated from server for overlay and controller so you don't loose texts etc.
- multiple overlay-controller groups on 1 server instance (via different websocket paths)
- server is needed only for first connect, both controller and overlay holds state info
NodeJS is needed. You can download it from https://nodejs.org/en/
npm install
Node server:
node server.js
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/
.
Set it to the same IP address and port as your server is running on, (i.e. http://127.0.0.1:8080/gun
).
- Click the plus button under Sources
- Select BrowserSource
- Name the source and click "OK"
- Check the "Local file" box
- Click the "Browse" button on the right and select the client.html you want to use
- Set the Resolution to 1920x1080 (Width: 1920; Height: 1080) or the overlay resolution
- Set FPS to you stream FPS (examples: 25, 30, 50, 60)
https://github.com/CasparCG/help/wiki/Media:-HTML-Templates
ProPresenter browser capabilities in versions 6 and 7 are very limited, and this overlays are not usable. https://learn.renewedvision.com/propresenter6/the-features-of-propresenter/web-view
https://www.xsplit.com/broadcaster/manual/sources/webpage
You can create your own overlay and associated controller without implementing server.
This project was inspired by
- https://github.com/lebaston100/htmlOverlayFramework
- https://github.com/hberntsen/websocket-png-overlayer
- https://github.com/Scrxtchy/ts3-overlay-ws
- https://github.com/slugalisk/win-loss-overlay
- https://github.com/filiphanes/websocket-overlays
- https://github.com/ak5/svelte-gun-example
- more overlays