August 28, 2024

How to add a facecam feed and webcam overlay in OBS Studio

Use our new webcam border, inspired by @EagleGarett!

A webcam border can make your stream look more professional. Here’s our tips on how set up your webcam, add your facecam source, and use our webcam overlay in OBS Studio.

Viewers love faces, which is why a facecam can be the secret component to increasing audience engagement. Make your stream more exciting by sharing your live reactions, and add a professional polish with a webcam border. Here are our tips on setting up your webcam, and using OBS to add a facecam and webcam overlay.  

Set up your camera and lighting

There are few things you can set up easily and within your budget to make sure your raw video feed appears polished and professional – without wasting precious time on installs and RAM on filters.

  • Choose good lighting. If ring lights will interfere with gameplay or crafting, try setting up two clip lights on either side of your webcam to avoid shadows. You can use different colored lighting for dramatic effect, or use warm-tone lighting to prevent yourself looking washed out on screen. 
  • Invest in a camera. You can, of course, use your computer or laptop’s built-in webcam, but the quality of this can vary and may not provide a very flattering angle or effective lens.
  • Try out different camera positions. One of the best options is to position your webcam at eye level. A tripod can help explore more angles and heights without having to clip onto your monitor. 
  • Frame your face. Good framing ensures instant production quality. Try to include your whole head and shoulders within the camera frame.
A side-by-side example of how to frame a facecam on OBS

Add your facecam source to OBS Studio

Once you’ve added your screen capture or main camera source to OBS, here’s how to add your webcam feed:

1. Click the + symbol in your Sources panel

2. Click “Video Capture Device”.

3. Name your webcam.

4. Select your device name from the Device dropdown list. 

Reposition and resize your facecam

 It might go without saying, but when adding a facecam to your streaming layout, don’t block anything important. If you’re live streaming arts and crafts or other hobbies, some overlap between your facecam and the main camera should be fine so long as you aren’t covering up any important things. If you’re live streaming gaming, viewers tend to want to see as much of your screen as possible to catch all of the action. 

The lower third section of your screen is considered to be the area least likely to distract viewers from on-screen action. You can use this theory to add your facecam to the bottom left corner of your streaming screen. However, some streamers choose to add their facecam in the top right of the screen, and filling the rest of the empty space with widgets, notifications, or custom backgrounds. 

Reposition and resize your facecam by dragging the borders around your screen in OBS. You can also manually adjust the width and height of your video capture. Right click on your webcam in the Sources panel and click on “Properties” to adjust your facecam properties. 

Add flair with a webcam overlay

A webcam overlay decorates and frames your webcam, separating it from the main action and attracting the viewer’s eye. Here are some options for decorating your facecam:

Add a custom webcam border 

As with most stream overlays, you can make your own webcam overlay using tools like Photoshop, Illustrator, After Effects, and Blender.  You can also commission a freelancer to create a super-personalized, fully-branded webcam overlay – but this might stretch your budget a bit.

Use uno’s webcam overlay for free

You can also use our new fully customizable webcam border, inspired by @EagleGarrett. This transparent overlay is fully customizable to your branding and free to use. Plus, because all our overlays are controlled through our online interface, you don’t have to download any overlays and you can edit them in real-time, from any of your devices. 

Here’s how to place our webcam border over your facecam in OBS Studio:

1. On overlays.uno, add the Nitrogen-themed Web Cam Border overlay to My Library. 

2. Edit the overlay in the online interface. Customize colors, edit or delete the text, and modify the line’s thickness and style to match your branding.

uno webcam overlay interface
The Nitrogen-themed uno webcam overlay interface. (You won't see your webcam feed in the actual uno app, this is just a visual reference).

3. Click the Copy Output URL symbol to copy the overlay browser link.

4. Go to OBS Studio. Click the + symbol in the Sources panel.

5. Click on “Browser”.

6. Paste the uno overlay browser link into the URL tab.

7. Adjust the overlay’s size and position by dragging the corners of the bounding box. 

You can alter the dimensions of your webcam overlay using either or both of these tools:

  • In the uno interface, adjust the Width and Height sliders in the Size panel.

In OBS Studio, right click the webcam overlay in your Sources panel, and select “Properties”. You can manually enter the width and height you want.

Integrating a facecam with a polished webcam overlay can transform the production quality of your live stream. With this quick guide, you should be able to set up your facecam on OBS Studio with minimum fuss and within budget – especially when your webcam border can be edited again and again online, for free! If you’re still not sure how to begin, find support on our Discord community.

Sign up for free

Sign up for a free uno account, allowing you to save overlays and more.

Sign up for uno