Simple and powerfull remote controlled html pages useful for overlays in OBS Studio, CasperCG, XSplit or simply fullscreen browser.
NodeJS is needed. You can download it from https://nodejs.org/en/
npm install
Open in browser scoreboard/controller.html
.
Open in browser scoreboard/overlay.html
on other PC or display.
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:3000/gun
).
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.
HOST=0.0.0.0 PORT=8089 node server-ws.cjs
or
HOST=0.0.0.0 PORT=3000 node server-gun.cjs
or
HOST=0.0.0.0 PORT=8081 node server-mqtt.cjs
Once you've created a project and installed dependencies with npm install
(or pnpm install
or yarn
), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
To deploy your app, you may need to install an adapter for your target environment.
This project was inspired by