{"id":23288569,"url":"https://github.com/kernferm/browser-source-overlays","last_synced_at":"2025-04-06T16:33:04.373Z","repository":{"id":242002016,"uuid":"808333150","full_name":"KernFerm/browser-source-overlays","owner":"KernFerm","description":"🌟 OBS Browser Source Overlays The OBS Browser Source Overlays project offers dynamic browser source overlays for OBS Studio and Streamlabs OBS.","archived":false,"fork":false,"pushed_at":"2024-09-25T07:45:59.000Z","size":81,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T22:32:43.220Z","etag":null,"topics":["browser-source","obs","overlays","streamlabs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KernFerm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-30T21:11:17.000Z","updated_at":"2024-09-25T07:46:02.000Z","dependencies_parsed_at":"2024-06-21T04:48:44.030Z","dependency_job_id":"d3f20198-6927-4a3f-97c4-20c5558fcb4b","html_url":"https://github.com/KernFerm/browser-source-overlays","commit_stats":null,"previous_names":["kernferm/browser-source-overlays"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernFerm%2Fbrowser-source-overlays","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernFerm%2Fbrowser-source-overlays/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernFerm%2Fbrowser-source-overlays/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KernFerm%2Fbrowser-source-overlays/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KernFerm","download_url":"https://codeload.github.com/KernFerm/browser-source-overlays/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247512769,"owners_count":20950919,"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":["browser-source","obs","overlays","streamlabs"],"created_at":"2024-12-20T03:20:46.594Z","updated_at":"2025-04-06T16:33:04.344Z","avatar_url":"https://github.com/KernFerm.png","language":"HTML","readme":"## Support the Project ⭐\r\n\r\nIf you find this project useful, please give it a star! Your support is appreciated and helps keep the project growing. 🌟\r\n\r\n\r\n# Browser Source Overlay for OBS/Streamlabs OBS 🎥\r\n\r\nThis guide provides step-by-step instructions on how to set up a browser source as a background for your webcam feed in OBS or Streamlabs OBS.  **`OPEN SOURCE`**\r\n\r\n-----\r\n## Check for Updates Below:\r\n\r\n[**Releases**](https://github.com/KernFerm/obs-browser-source-overlays/releases)\r\n[**Pre-Release**](https://github.com/KernFerm/browser-source-overlays/releases/tag/notepad)\r\n\r\n\r\n## how to download the repo first time users\r\n\r\n  - click link to read [**Instructions**](https://www.gitprojects.fnbubbles420.org/how-to-download-repos)\r\n\r\n-----\r\n\r\n## Prerequisites\r\n- OBS Studio or Streamlabs OBS installed on your computer.\r\n- A webcam connected and configured.\r\n-**`IF YOU DONT HAVE A CAMERA THAT IS FINE YOU CAN USE IT AS A BACKGROUND , make sure to read n continue steps as if you didn't have a camera.`**\r\n- The `example.html` file (containing the Example code).\r\n\u003e Note: There is no `example.html` provided. This is just to illustrate the setup process.\r\n\r\n## Step 1: Download the Example HTML File 📥\r\n1. Save the HTML code for the Example effect with alien text as `example.html`.\r\n\r\n## Step 2: Add the Example effect in OBS/Streamlabs OBS 🛠️\r\n1. **Open OBS or Streamlabs OBS**.\r\n2. **Add a Browser Source**:\r\n   - Click the `+` button in the `Sources` box.\r\n   - Select `Browser`.\r\n   - Name it (e.g., `example.html`) and click `OK`.\r\n   - Check `Local File` and browse to the location of your saved `example.html` file.\r\n\r\n   \u003e **Tip**: To find the location, **right-click** on the file in your file explorer and select `\"Copy path\"` or `\"Properties\"` to get the file's location. and paste that location in your `\"Browser URL\"`. Make sure you `KEEP` the `Web Browser Open` while it is running in obs other wise it will `NOT` work.\r\n   \r\n   - Set the width and height to match your stream resolution (e.g., 1920x1080).\r\n   - Click `OK`.\r\n\r\n## Step 3: Add and Configure Your Webcam Feed 📹\r\n1. **Add a Video Capture Device**:\r\n   - Click the `+` button in the `Sources` box.\r\n   - Select `\"Video Capture Device\"`.\r\n   - Name it (e.g., `\"webcam\"`) and click `OK`.\r\n   - Select your camera from the device list.\r\n   - Adjust the settings as needed (resolution, frame rate, etc.).\r\n   - Click `OK`.\r\n\r\n2. **Ensure Proper Source Order**:\r\n   - In the `Sources` box, ensure the Video Capture Device (camera feed) is listed above the Browser source (Matrix effect).\r\n   - You can drag and drop the sources to reorder them if necessary.\r\n\r\n## Step 4: Adjust the Browser Source to Fit Your Camera Size 🖼️\r\n1. **Add Crop/Pad Filter to Browser Source**:\r\n   - Right-click on the Browser source.\r\n   - Select `Filters`.\r\n   - In the `Effect Filters` section, click the `+` button and select `\"Crop/Pad\"`.\r\n   - Name it (e.g., \"Adjust Browser Size\") and click `OK`.\r\n\r\n2. **Configure Crop/Pad Filter**:\r\n   - Adjust the `values` for `Left`, `Top`, `Right`, and `Bottom` to **fit the Browser source to your camera size.**\r\n   - `You can fine-tune the cropping to match the dimensions of your webcam feed.`\r\n   - `Close the filters window once done.`\r\n\r\n## Step 5: Adjust Camera Feed Opacity (If Needed) 🌟\r\nIf the Example effect is not visible behind your webcam feed, you may need to adjust the opacity of your camera feed.\r\n\r\n1. **Add Color Correction Filter**:\r\n   - `Right-click` on the Video Capture Device source.\r\n   - Select `\"Filters\"`.\r\n   - In the `\"Effect Filters\"` section, click the `+` button and select `\"Color Correction\"`.\r\n   - Name it (e.g., `\"Camera Opacity\"`) and click `OK`.\r\n\r\n2. **Configure Opacity**:\r\n   - Adjust the `\"Opacity\"` slider to make the camera feed partially transparent.\r\n   - Start with an opacity of around 70-80% and adjust to your preference.\r\n   - Close the filters window once done.\r\n\r\n## Step 6: Final Adjustments 🎉\r\n1. **Re-enable All Sources**:\r\n    Ensure **both** the Browser source (**Example effect**) and the Video Capture Device  \r\n   (**camera feed**) are visible (**eye icons are not crossed out**).\r\n\r\n2. **Check Preview**:\r\n   - Verify in the preview window that the Example effect ( **which ever `.html file` you downloaded**) is visible in the background of your camera feed.\r\n   - Adjust the opacity or other filter settings as needed to achieve the desired effect.\r\n\r\n## Troubleshooting ⚠️\r\n- **Example effect Not Visible**: Ensure the Browser source is at the bottom of the source list and the Video Capture Device is above it.\r\n- **Webcam Feed Too Opaque**: Adjust the opacity of the webcam feed using the Color Correction filter.\r\n- **Performance Issues**: Ensure your system can handle the additional processing load of the overlay.\r\n\r\nBy following these steps, you should be able to create a dynamic and unique **Example-themed** background for your webcam feed in OBS or Streamlabs OBS. Enjoy streaming with your new setup! 🙂\r\n\r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernferm%2Fbrowser-source-overlays","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkernferm%2Fbrowser-source-overlays","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkernferm%2Fbrowser-source-overlays/lists"}