home home about about blog blog music music tech tech photos photos art art photoshop photoshop
blog post
back to blog main

using webgbcam in OBS

2023-05-26 @ 23:26 UTC
filed under: art tech

webgbcam version 4.1 introduces two new features: edge-sharpening and a URL query parameter to start with the UI hidden, which is meant to aid in using it directly into OBS

firstly, to use camera and audio capture into an OBS browser source, you need to start it with the -use-fake-ui-for-media-stream parameter. if you're using a POSIX system, this might need to be passed with two dashes in front like so: --use-fake-ui-for-media-stream. this will tell OBS's internal browser to bypass the need to ask for permission for media capture, since it currently doesn't support such dialog manually. if you launch OBS from a shortcut, it's useful to add this parameter to in. in windows this is the "Target" field in the shortcut's properties.

windows OBS shortcut properties

once you have OBS open, you can add a browser source and point it towards https://maple.pet/webgbcam/?hideui, which has the special URL parameter to start it with hidden UI. keep the browser resolution at 800 x 600. make sure that no other application on your computer is using your camera (including OBS outside the browser source) and once the page loads you should see webgbcam in your stream feed active and with the UI automatically hidden.

browser source properties for webgbcam

right-click the browser source in your OBS scene and go to "Transform -> Edit transform...". here you'll be able to set the crop for the browser source such that the element in your scene is perfectly aligned with just the image portion of webgbcam. for an 800 x 600 browser source, the crop is as follows:

  • Left: 144px
  • Right: 144px
  • Top: 104px
  • Bottom: 48px

set the bounding box type to "Scale to inner bounds" and now you should be able to position and scale your webgbcam browser source however you want in your OBS scene!

transform settings for browser source

you can still use OBS's browser source "Interact" function to change the settings in webgbcam to your liking, these will be stored whenever you change them and every time you restart OBS the webgbcam source should start up as you left it.

OBS with webgbcam browser source

<- upgrading an 80s Hitachi boombox solving a base64 mystery nobody asked for ->