Browser Overlay

Overlays a live webpage onto an input video stream

Component Configuration

Option Description Required Environment override

Option	Description	Required	Environment override
id	A unique identifier for the component instance	✓
displayName	The name shown in the Studio UI of this component	✓
url	URL to render on top of the video. May contain ${VAR} or ${VAR:-default}, substituted from the environment when the component starts — e.g. https://cdn.example/marker.html?id=${NORSK_MIGRATION_ID:-origin}. A ${VAR} with no default whose variable is unset is an error, not a blank.	✗	`<COMPONENT_ID>_URL`
hardwareAcceleration	Override the global hardware acceleration setting	✗	`<COMPONENT_ID>_HARDWAREACCELERATION`
gpuSupport	Which rendering engine should CEF use	✗	`<COMPONENT_ID>_GPUSUPPORT`
browserCpus	Override the CPUs used for the underlying browser instance	✗	`<COMPONENT_ID>_BROWSERCPUS`
customCefArgs	Additional Chromium/CEF command-line switches passed verbatim to the browser process (default: [])	✗
enableRemoteDebugging	Enable Chromium remote debugging (injects --remote-debugging-port and --remote-debugging-address=0.0.0.0). CEF binds the debugger to loopback only, so on a headless host reach it via an SSH tunnel (e.g. ssh -L 9222:127.0.0.1:9222). Exposes an unauthenticated DevTools endpoint — only use in trusted environments. (default: false)	✗
remoteDebuggingPort	Port the remote debugger listens on (only used when remote debugging is enabled). Must be unique across the workflow. (default: 9222)	✗
captureAudio	Also capture the audio played by the overlay web page and publish it as an additional audio stream (default: false)	✗
notes	Notes about this component	✗

A unique identifier for the component instance

✓

displayName

The name shown in the Studio UI of this component

✓

url

URL to render on top of the video. May contain ${VAR} or ${VAR:-default}, substituted from the environment when the component starts — e.g. https://cdn.example/marker.html?id=${NORSK_MIGRATION_ID:-origin}. A ${VAR} with no default whose variable is unset is an error, not a blank.

✗

<COMPONENT_ID>_URL

hardwareAcceleration

Override the global hardware acceleration setting

✗

<COMPONENT_ID>_HARDWAREACCELERATION

gpuSupport

Which rendering engine should CEF use

✗

<COMPONENT_ID>_GPUSUPPORT

browserCpus

Override the CPUs used for the underlying browser instance

✗

<COMPONENT_ID>_BROWSERCPUS

customCefArgs

Additional Chromium/CEF command-line switches passed verbatim to the browser process (default: [])

✗

enableRemoteDebugging

Enable Chromium remote debugging (injects --remote-debugging-port and --remote-debugging-address=0.0.0.0). CEF binds the debugger to loopback only, so on a headless host reach it via an SSH tunnel (e.g. ssh -L 9222:127.0.0.1:9222). Exposes an unauthenticated DevTools endpoint — only use in trusted environments. (default: false)

✗

remoteDebuggingPort

Port the remote debugger listens on (only used when remote debugging is enabled). Must be unique across the workflow. (default: 9222)

✗

captureAudio

Also capture the audio played by the overlay web page and publish it as an additional audio stream (default: false)

✗

notes

Notes about this component

✗

Options with an environment override can be set when Studio starts, without editing the workflow. <COMPONENT_ID> is this component’s id in your workflow, uppercased, with spaces and dashes replaced by underscores and other punctuation removed — a component named SRT Input reads SRT_INPUT_PORT. Renaming a component changes its id, and so changes these variable names.

Tags: browser overlay html web graphics