https://github.com/kernferm/browser-source-overlays
🌟 OBS Browser Source Overlays The OBS Browser Source Overlays project offers dynamic browser source overlays for OBS Studio and Streamlabs OBS.
https://github.com/kernferm/browser-source-overlays
browser-source obs overlays streamlabs
Last synced: about 1 month ago
JSON representation
🌟 OBS Browser Source Overlays The OBS Browser Source Overlays project offers dynamic browser source overlays for OBS Studio and Streamlabs OBS.
- Host: GitHub
- URL: https://github.com/kernferm/browser-source-overlays
- Owner: KernFerm
- License: mit
- Created: 2024-05-30T21:11:17.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-09-25T07:45:59.000Z (8 months ago)
- Last Synced: 2025-02-12T22:32:43.220Z (3 months ago)
- Topics: browser-source, obs, overlays, streamlabs
- Language: HTML
- Homepage:
- Size: 79.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
## Support the Project ⭐
If you find this project useful, please give it a star! Your support is appreciated and helps keep the project growing. 🌟
# Browser Source Overlay for OBS/Streamlabs OBS 🎥
This 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`**
-----
## Check for Updates Below:
[**Releases**](https://github.com/KernFerm/obs-browser-source-overlays/releases)
[**Pre-Release**](https://github.com/KernFerm/browser-source-overlays/releases/tag/notepad)
## how to download the repo first time users
- click link to read [**Instructions**](https://www.gitprojects.fnbubbles420.org/how-to-download-repos)
-----
## Prerequisites
- OBS Studio or Streamlabs OBS installed on your computer.
- A webcam connected and configured.
-**`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.`**
- The `example.html` file (containing the Example code).
> Note: There is no `example.html` provided. This is just to illustrate the setup process.
## Step 1: Download the Example HTML File 📥
1. Save the HTML code for the Example effect with alien text as `example.html`.
## Step 2: Add the Example effect in OBS/Streamlabs OBS 🛠️
1. **Open OBS or Streamlabs OBS**.
2. **Add a Browser Source**:
- Click the `+` button in the `Sources` box.
- Select `Browser`.
- Name it (e.g., `example.html`) and click `OK`.
- Check `Local File` and browse to the location of your saved `example.html` file.
> **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.
- Set the width and height to match your stream resolution (e.g., 1920x1080).
- Click `OK`.
## Step 3: Add and Configure Your Webcam Feed 📹
1. **Add a Video Capture Device**:
- Click the `+` button in the `Sources` box.
- Select `"Video Capture Device"`.
- Name it (e.g., `"webcam"`) and click `OK`.
- Select your camera from the device list.
- Adjust the settings as needed (resolution, frame rate, etc.).
- Click `OK`.
2. **Ensure Proper Source Order**:
- In the `Sources` box, ensure the Video Capture Device (camera feed) is listed above the Browser source (Matrix effect).
- You can drag and drop the sources to reorder them if necessary.
## Step 4: Adjust the Browser Source to Fit Your Camera Size 🖼️
1. **Add Crop/Pad Filter to Browser Source**:
- Right-click on the Browser source.
- Select `Filters`.
- In the `Effect Filters` section, click the `+` button and select `"Crop/Pad"`.
- Name it (e.g., "Adjust Browser Size") and click `OK`.
2. **Configure Crop/Pad Filter**:
- Adjust the `values` for `Left`, `Top`, `Right`, and `Bottom` to **fit the Browser source to your camera size.**
- `You can fine-tune the cropping to match the dimensions of your webcam feed.`
- `Close the filters window once done.`
## Step 5: Adjust Camera Feed Opacity (If Needed) 🌟
If the Example effect is not visible behind your webcam feed, you may need to adjust the opacity of your camera feed.
1. **Add Color Correction Filter**:
- `Right-click` on the Video Capture Device source.
- Select `"Filters"`.
- In the `"Effect Filters"` section, click the `+` button and select `"Color Correction"`.
- Name it (e.g., `"Camera Opacity"`) and click `OK`.
2. **Configure Opacity**:
- Adjust the `"Opacity"` slider to make the camera feed partially transparent.
- Start with an opacity of around 70-80% and adjust to your preference.
- Close the filters window once done.
## Step 6: Final Adjustments 🎉
1. **Re-enable All Sources**:
Ensure **both** the Browser source (**Example effect**) and the Video Capture Device
(**camera feed**) are visible (**eye icons are not crossed out**).
2. **Check Preview**:
- Verify in the preview window that the Example effect ( **which ever `.html file` you downloaded**) is visible in the background of your camera feed.
- Adjust the opacity or other filter settings as needed to achieve the desired effect.
## Troubleshooting ⚠️
- **Example effect Not Visible**: Ensure the Browser source is at the bottom of the source list and the Video Capture Device is above it.
- **Webcam Feed Too Opaque**: Adjust the opacity of the webcam feed using the Color Correction filter.
- **Performance Issues**: Ensure your system can handle the additional processing load of the overlay.
By 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! 🙂