{"id":17126498,"url":"https://github.com/sergeychernyshev/streamerjs","last_synced_at":"2026-05-13T07:04:08.670Z","repository":{"id":214575268,"uuid":"736852504","full_name":"sergeychernyshev/streamerjs","owner":"sergeychernyshev","description":"Video stream layout manager","archived":false,"fork":false,"pushed_at":"2024-01-04T21:17:20.000Z","size":83,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-15T07:22:39.640Z","etag":null,"topics":["obs","streaming","twitch","youtube"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sergeychernyshev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-12-29T04:19:26.000Z","updated_at":"2024-01-02T22:56:19.000Z","dependencies_parsed_at":"2024-01-04T21:25:37.840Z","dependency_job_id":"96e49442-3e45-4bc5-8f1a-58ecbb696aca","html_url":"https://github.com/sergeychernyshev/streamerjs","commit_stats":null,"previous_names":["sergeychernyshev/streamerjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeychernyshev%2Fstreamerjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeychernyshev%2Fstreamerjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeychernyshev%2Fstreamerjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sergeychernyshev%2Fstreamerjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sergeychernyshev","download_url":"https://codeload.github.com/sergeychernyshev/streamerjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245206530,"owners_count":20577582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["obs","streaming","twitch","youtube"],"created_at":"2024-10-14T18:48:13.630Z","updated_at":"2026-05-13T07:04:08.665Z","avatar_url":"https://github.com/sergeychernyshev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Streamer JS\n\nVideo stream layout manager for OBS Studio and other streaming application.\n\nWe use web technologies to manage the layout of the video stream and control it remotely using a web browser.\n\n## Running the application\n\nTo run Streamer JS in your project, create a `/scenes/` sub-folder and put your scenes HTML files there.\n\nThen just run the following command:\n\n```bash\nnpx @streamerjs/streamerjs\n```\n\n## Scenes\n\nScenes are HTML files that are used to create the layout of the video stream. You can create multiple scenes and add them to OBS Studio as browser sources.\n\nYou can also create multiple files for different layers and group in folders per scene - ultimately, file organization is up to you.\n\n### Create a basic scene\n\nRun the following command to create a basic scene:\n\n```bash\nnpx @streamerjs/streamerjs create-scene my-scene.html\n```\n\nStreamer JS will create a basic scene in `/scenes/` folder that has some basic HTML elements, CSS stylesheet and a JavaScript file that uses PouchDB synchronization with the [control panel](#control-panel).\n\nFor further customization, you can modify the scene HTML, CSS and JavaScript to accomplish whatever you want.\n\n## Control Panel\n\nTo enable control panel, create a folder named `/control/` in the root of the project and add HTML page with a control panel that uses the PouchDB to update the UI.\n\n### Create a basic control panel\n\nTo create a basic control panel file in `/control/` folder, run the following command:\n\n```bash\nnpx @streamerjs/streamerjs create-control-panel index.html\n```\n\nThe page will include the control panel HTML, CSS and JavaScript files and will use PouchDB to synchronize with the [scenes](#scenes).\n\n## Server Scripts\n\nYou can now create server-side scripts in the `/server/` folder. These scripts can be used to customize the behavior of the Streamer JS application when it starts and has access to `db` object to initialize the application or to react to changes.\n\nTo enable scripts, create a `/server/` folder and add any number of `.mjs` files. Each file should export a default class. The constructor of the class will be called on application start and will receive an object with a `db` property.\n\nHere's an example:\n\n```javascript\n// sample `server/my-script.mjs` logging current state\n// of a document in the database on startup\nexport default class MyScript {\n  constructor({ db }) {\n    db.get(\"my_scene\")\n      .then(function (doc) {\n        console.log(\"Current my_scene document:\", doc);\n      })\n      .catch(function (err) {\n        if (err.name !== \"not_found\") {\n          console.error(\"Error fetching my_scene document:\", err);\n        }\n      });\n  }\n}\n```\n\nScripts currently can't be called directly from the client, unless you somehow pass messages through a DB queue document making scripts listen to database changes, picking up and processing those messages.\n\nWe hope to implement this kind of RPC functionality soon so you don't have to jump through hoops to accomplish that.\n\n## Help\n\nTo get help, run the following command:\n\n```bash\nnpx @streamerjs/streamerjs --help\n```\n\n## Additional Configuration\n\nTo configure the application, you need to create a file named `config.json` in the root of the project. This file can contain the following information:\n\n```json\n{\n  \"port\": 2525,\n  \"dbpath\": \"db\"\n}\n```\n\n- `port`: The port where the web server will run\n- `dbpath`: The path where the database will be stored\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergeychernyshev%2Fstreamerjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsergeychernyshev%2Fstreamerjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsergeychernyshev%2Fstreamerjs/lists"}