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
- click link to read Instructions
- 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.
- Save the HTML code for the Example effect with alien text as
example.html
.
-
Open OBS or Streamlabs OBS.
-
Add a Browser Source:
- Click the
+
button in theSources
box. - Select
Browser
. - Name it (e.g.,
example.html
) and clickOK
. - Check
Local File
and browse to the location of your savedexample.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 youKEEP
theWeb Browser Open
while it is running in obs other wise it willNOT
work.- Set the width and height to match your stream resolution (e.g., 1920x1080).
- Click
OK
.
- Click the
-
Add a Video Capture Device:
- Click the
+
button in theSources
box. - Select
"Video Capture Device"
. - Name it (e.g.,
"webcam"
) and clickOK
. - Select your camera from the device list.
- Adjust the settings as needed (resolution, frame rate, etc.).
- Click
OK
.
- Click the
-
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.
- In the
-
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
.
-
Configure Crop/Pad Filter:
- Adjust the
values
forLeft
,Top
,Right
, andBottom
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.
- Adjust the
If the Example effect is not visible behind your webcam feed, you may need to adjust the opacity of your camera feed.
-
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 clickOK
.
-
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.
- Adjust the
-
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). -
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.
- Verify in the preview window that the Example effect ( which ever
- 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! π