{"id":47819079,"url":"https://github.com/filiphanes/web-overlays","last_synced_at":"2026-04-03T19:01:36.714Z","repository":{"id":129546068,"uuid":"251218122","full_name":"filiphanes/web-overlays","owner":"filiphanes","description":"HTML video overlays for OBS, XSplit, CasparCG and everything with web browser. Synchronizes data using gun, mqtt or websocket protocols.","archived":false,"fork":false,"pushed_at":"2025-02-25T22:08:00.000Z","size":16062,"stargazers_count":29,"open_issues_count":1,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-25T23:19:51.873Z","etag":null,"topics":["casparcg","gun","gundb","html5","mqtt","nodejs","obs","obs-studio","overlays","svelte","websocket","xsplit"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filiphanes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-30T06:14:55.000Z","updated_at":"2025-01-10T19:35:10.000Z","dependencies_parsed_at":"2024-03-31T22:31:54.075Z","dependency_job_id":"6e56c06a-fbc0-45b5-9be7-30c70f5b2bd2","html_url":"https://github.com/filiphanes/web-overlays","commit_stats":null,"previous_names":["filiphanes/web-overlays"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/filiphanes/web-overlays","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphanes%2Fweb-overlays","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphanes%2Fweb-overlays/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphanes%2Fweb-overlays/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphanes%2Fweb-overlays/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filiphanes","download_url":"https://codeload.github.com/filiphanes/web-overlays/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphanes%2Fweb-overlays/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31371633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T17:53:18.093Z","status":"ssl_error","status_checked_at":"2026-04-03T17:53:17.617Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["casparcg","gun","gundb","html5","mqtt","nodejs","obs","obs-studio","overlays","svelte","websocket","xsplit"],"created_at":"2026-04-03T19:00:59.645Z","updated_at":"2026-04-03T19:01:36.706Z","avatar_url":"https://github.com/filiphanes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Overlays\nSimple and powerfull remote controlled html pages useful for overlays in OBS Studio, CasperCG, XSplit or simply fullscreen browser.\n\n## Features\n- server holds overlay state\n- on refresh or reconnect, state is updated from server for overlay and controller so you don't loose texts etc.\n- multiple overlay-controller groups on 1 server instance (via different websocket paths)\n- server is needed only for first connect, both controller and overlay holds state info\n\n# Install\nNodeJS is needed. You can download it from https://nodejs.org/en/\n\n    npm install\n\n# Run\n## 1. Open controller\nOpen in browser `scoreboard/controller.html`.\n\n## 2. Open overlay\nOpen in browser `scoreboard/overlay.html` on other PC or display.\n\n# Setup in playout software\nSetting you might need to change is websocket URI in `overlay.html` and `controller.html` in directory `your-overlay/`.\nSet it to the same IP address and port as your server is running on, (i.e. `http://127.0.0.1:3000/gun`).\n\n## OBS Studio\n1. Click the plus button under Sources\n2. Select BrowserSource\n3. Name the source and click \"OK\"\n4. Check the \"Local file\" box\n5. Click the \"Browse\" button on the right and select the client.html you want to use\n6. Set the Resolution to 1920x1080 (Width: 1920; Height: 1080) or the overlay resolution\n7. Set FPS to you stream FPS (examples: 25, 30, 50, 60)\n\n## Caspar CG\nhttps://github.com/CasparCG/help/wiki/Media:-HTML-Templates\n\n## ProPresenter\nProPresenter browser capabilities in versions 6 and 7 are very limited, and this overlays are not usable.\nhttps://learn.renewedvision.com/propresenter6/the-features-of-propresenter/web-view\n\n## XSplit\nhttps://www.xsplit.com/broadcaster/manual/sources/webpage\n\n# New overlays\nYou can create your own overlay and associated controller without implementing server.\n\n# Self-hosted server\n\n    HOST=0.0.0.0 PORT=8089 node server-ws.cjs\n    or \n    HOST=0.0.0.0 PORT=3000 node server-gun.cjs\n    or \n    HOST=0.0.0.0 PORT=8081 node server-mqtt.cjs\n\n## Server API\nhttps://gun.eco/docs/API\n\n## Developing\nOnce you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:\n```bash\nnpm run dev\n# or start the server and open the app in a new browser tab\nnpm run dev -- --open\n```\n## Building\nTo create a production version of your app:\n```bash\nnpm run build\n```\nYou can preview the production build with `npm run preview`.\n\u003e To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.\n\n\n# Thanks\nThis project was inspired by\n- https://github.com/lebaston100/htmlOverlayFramework\n- https://github.com/hberntsen/websocket-png-overlayer\n- https://github.com/Scrxtchy/ts3-overlay-ws\n- https://github.com/slugalisk/win-loss-overlay\n- https://github.com/filiphanes/websocket-overlays\n- https://github.com/ak5/svelte-gun-example\n\n# TODO\n- more overlays\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiliphanes%2Fweb-overlays","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiliphanes%2Fweb-overlays","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiliphanes%2Fweb-overlays/lists"}