Web Page (Chromium, Windows)

Prev Next

The Web Page (Chromium, Windows) input allows you to fetch and render content from external web pages using the CefSharp (Chromium Embedded Framework) library. This provides high-quality, standards-compliant web content rendering with full browser capabilities for your compositions.

Image

This input is ideal for displaying HTML5 graphics, web-based dashboards, real-time data feeds, interactive content, and any web-based application within your video production workflow. The browser renders off-screen and captures both video frames and audio that can be composited with other sources.

ℹ️ Available web page renderers in Composer

Composer offers three different web page rendering engines:

Feature Chromium (cross-platform) Chromium (Windows) Ultralight
Platform Windows + Linux Windows only Windows + Linux
Browser Engine Full Chromium Full Chromium Lightweight renderer
Audio Capture ❌ ✅ 48kHz stereo ❌
Scrollbar Control ❌ ✅ X/Y position ❌
Live URL Changes ❌ ✅ ❌
Chromium Switches ✅ ❌ ❌
Web Compatibility All modern web All modern web Basic HTML/CSS/JS

Choose Chromium (cross-platform) if: You need Linux support or Chromium configuration switches
Choose Chromium (Windows) if: You need audio capture or scrollbar control
Choose Ultralight if: You need low memory usage or simple web content

Quick Start Guide

  1. Add the input to your composition
  2. Enter a URL in the Url field (e.g., https://example.com)
  3. Set resolution (optional): Adjust Renderer width and height if needed (default: 1024x360)
  4. Click "Start page rendering" to begin capturing the web page
  5. Wait for loading: Monitor the Cef renderer load state until it shows "Loaded"
  6. Add to scene: Add the input to a layer in your scene to display it
Windows Only:

This input is Windows-only due to CefSharp platform requirements. For cross-platform support, consider using the DotNetBrowser-based web page input.

Tip: Enable "Start rendering when loaded" (enabled by default) to automatically start the browser when you load your composition.

Basic Settings

Setting Description
Show advanced options Toggle to show or hide advanced configuration options. Options: No / Yes. Default: No.
Url Enter the web page URL to render. Must be HTTP or HTTPS. Default: Empty.
Cef renderer load state Read-only status display showing the current state of the CEF browser engine. Options: Idle, Loading, Loaded, Waiting for sub services load finalizer, Error loading page. Default: Idle.

Important: The Url field can be changed at any time, and the browser will automatically navigate to the new URL.

URL Examples:

  • https://example.com
  • http://localhost:3000/dashboard
  • https://your-domain.com/custom-page.html

Dimensions

Setting Default Description
Renderer width 1024 The width of the browser rendering viewport in pixels. This determines the resolution at which the web page is rendered. This property is locked while the browser is loading or loaded. You must stop rendering to change this value. Range: 32 - 4096 pixels.
Renderer height 360 The height of the browser rendering viewport in pixels. This determines the resolution at which the web page is rendered. This property is locked while the browser is loading or loaded. You must stop rendering to change this value. Range: 32 - 4096 pixels.

Performance impact: Higher resolutions provide better quality but require more processing power and memory.

Resolution tips:

  • Match your output resolution when possible for optimal quality
  • Use lower resolutions for better performance on complex web pages
  • Common presets: 1920x1080 (Full HD), 1280x720 (HD), 1024x768 (4:3)
  • The web page will scale to fit the specified dimensions

Scrollbar

Setting Default Description
ScrollBar X-Pos 0 Sets the horizontal scroll position of the web page. Range: 0 - 50000. Use this to programmatically scroll the page horizontally, useful for viewing content that extends beyond the viewport width.
ScrollBar Y-Pos 0 Sets the vertical scroll position of the web page. Range: 0 - 50000. Use this to programmatically scroll the page vertically, useful for viewing content that extends beyond the viewport height.

Use case: Ideal for automatically scrolling through long-form content, news tickers, or displaying different sections of a web page without user interaction.

Note: Scrollbar values are in pixels and represent the absolute scroll position from the top-left corner of the page.

Commands

Command Description
Start page rendering Initiates the rendering of the web page specified in the URL field. When clicked, the browser engine starts, navigates to the specified URL, and begins capturing frames and audio. The button becomes disabled once rendering has started.
Stop page rendering Stops the current rendering session and returns the browser to idle state. This releases browser resources and allows you to change settings like width and height. Enabled when the browser is loading or has loaded a page.
Reload page url Reloads the current web page from scratch. Useful for refreshing content or recovering from display issues. This performs a hard reload, clearing the cache. Enabled after a page has been loaded.

Configuration

Setting Default Description
Start rendering when loaded Enabled When enabled, the input automatically starts rendering when the composition is loaded or when the input is added to a project. This is useful for automated workflows where you want the web page to start immediately without manual intervention.
Auto reload page on error Disabled [Advanced] Automatically attempts to reload the page if a loading error occurs (e.g., network timeout, server error, or failed navigation). This can help maintain continuous operation in production environments, though it may create an infinite reload loop if the underlying issue persists.
Enable web page console logging Disabled [Advanced] Enables logging of JavaScript console messages from the web page for debugging purposes. Console errors, warnings, and info messages will appear in the application log. Useful for debugging web page issues and monitoring JavaScript execution.

Use case: Enable "Auto reload page on error" for resilient production workflows where temporary network issues might occur.

Debugging tip: Enable "Enable web page console logging" when developing or troubleshooting custom web pages to see JavaScript console output.

Performance and properties

Setting Default Description
Video queue size 0 Read-only display showing the current number of frames in the video rendering queue. The browser maintains a small queue to smooth frame delivery. A consistently high value may indicate the web page is rendering faster than your composition can consume frames.
Page render performance Empty Read-only display showing the average page rendering performance in milliseconds (e.g., "16.67 ms"). Lower values indicate better performance. This metric helps you monitor the rendering efficiency of your web page.

Performance monitoring: Use these metrics to identify performance bottlenecks. High queue sizes or slow render times may indicate the need to optimize your web page or reduce the renderer resolution.

Note: The browser typically renders at 50 FPS (20ms per frame). Complex web pages with heavy animations may not maintain this rate consistently.

Icon

Setting Default Description
Icon text WEB [Advanced] Custom text displayed on the input's icon in the inputs list and other UI elements. Change this to help distinguish between multiple web page inputs in your composition.

Audio mixer

Setting Default Description
Hide in audio mixer Disabled [Advanced] When enabled, this input is hidden and removed from the Audio Mixer view in the Composer GUI without disabling its audio. The audio continues to be captured and processed but won't appear in the mixer interface.

Use case: Useful when you have many inputs and want to declutter the audio mixer view while maintaining audio functionality.

Render Options

Setting Default Description
Invisible (Do not render in scene) Disabled [Advanced] When enabled, this input will not be rendered in any layer, in any scene. The input continues to process in the background (including audio capture) but produces no visible output.
Do not render input Let Composer decide [Advanced] Controls how the rendering behavior is managed. Let Composer decide: Composer automatically decides whether the input should be rendered based on the active scene and if Render Tuning is enabled. This is the recommended setting for most users as it optimizes performance automatically. Manual Configuration: Allows you to manually control rendering behavior using the "Render / Do not render" toggle below. Choose this when you need precise control over when the input processes frames.
Render / Do not render Render [Advanced] When set to "Do not render", this disables the internal render method of the input. The browser will not capture new frames, which can significantly reduce CPU/GPU load. Audio continues to be captured even when set to "Do not render". Only visible when "Manual Configuration" is selected.

Important difference from "Invisible":

  • "Do not render input" = stops frame capture entirely (better performance, audio still works)
  • "Invisible" = continues capturing frames but doesn't display them (uses more resources)

Use case: Enable "Do not render" when you only need audio from the web page, or when the input is temporarily not needed visually to save system resources.

Optional TAGS

Setting Default Description
TAGS Empty Tag the input with keywords. Tags can be used with Smart Search to search and filter your inputs. Useful for organizing and classifying your content. Separate multiple tags with commas or spaces.

Performance Considerations

The Web Page input is GPU-accelerated and designed for real-time performance. However, performance can be affected by several factors:

  • Resolution: Higher resolutions (especially 4K) require proportionally more processing power and memory
  • Web page complexity: Heavy JavaScript, CSS animations, WebGL content, and continuous updates consume significant CPU/GPU resources
  • Browser rendering: Complex DOM structures, large images, and multiple CSS effects impact browser performance
  • Frame rate: The browser renders at approximately 50 FPS, which may be higher than your project framerate
  • Multiple instances: Each Web Page input requires substantial memory; multiple inputs multiply resource requirements
  • Audio processing: Audio capture and processing adds additional overhead

Recommendations for optimal performance:

  • Match the renderer resolution to your output resolution to avoid unnecessary scaling
  • Use lower resolutions (e.g., 1280x720 instead of 1920x1080) for complex web pages
  • Optimize your web content: minimize JavaScript, optimize images, reduce animations
  • Use "Do not render input" when the input isn't visible to save CPU/GPU resources
  • Stop unused Web Page inputs rather than leaving them running in the background
  • Limit the number of simultaneous Web Page inputs based on your system capabilities
  • For 4K content, ensure your system has adequate GPU memory and processing power
  • Consider using static images or pre-rendered video if real-time web rendering isn't required
  • Monitor the "Video queue size" and "Page render performance" metrics to identify issues

Note: The browser maintains a small frame queue and automatically manages frame delivery. The Video queue size metric helps you monitor this behavior.

Technical Details

Browser Engine

  • Engine: CefSharp (Chromium Embedded Framework) for Windows
  • Rendering mode: Off-screen rendering (OSR) for optimal performance
  • Transparency: Supports transparent backgrounds when the web page CSS specifies it
  • Frame rate: Approximately 50 FPS (configurable in browser settings)

Audio Capture

  • Audio support: Full audio capture from web pages
  • Format: 48kHz stereo audio
  • Processing: Audio is processed through Composer's audio pipeline with support for volume, pan, effects, and routing

Supported Protocols

  • HTTP
  • HTTPS
  • Local file URLs may have restrictions depending on security settings

Platform Support

  • Windows: Fully supported
  • Other platforms: Not supported (Windows-only due to CefSharp limitations)

Performance Characteristics

  • Resolution: Configurable viewport from 32x32 to 4096x4096 pixels
  • Frame rate: Captures frames as the browser renders them (approximately 50 FPS)
  • Video queue: Maintains an internal queue with up to 4 render targets for efficient frame rotation
  • Memory: Allocates render target buffers for efficient frame rotation
  • Processing: GPU-accelerated rendering with efficient memory management

JavaScript Console

  • JavaScript console messages from the web page can be logged when "Enable web page console logging" is enabled
  • Console errors, warnings, and info messages appear in the application log
  • Useful for debugging web page issues and monitoring JavaScript execution

CEF Initialization

  • CEF is initialized once when the first Web Page input is created
  • Browser subprocess path is automatically configured
  • Cache is stored in the user's local application data folder
  • Media stream and autoplay policies are pre-configured for optimal compatibility

Best Practices

Performance and Configuration

  1. Match your output resolution: Set Renderer width/height to match your final output resolution to avoid unnecessary scaling
  2. Optimize web content: Keep HTML/CSS/JavaScript as simple as possible; complex animations and effects impact performance
  3. Stop when not needed: Use "Stop page rendering" when the input isn't actively being used to free up resources
  4. Enable "Auto reload on error": This helps recover from temporary network issues automatically in production
  5. Monitor performance metrics: Keep an eye on "Video queue size" and "Page render performance" to identify issues

Web Page Development

  1. Set explicit dimensions: Design your HTML with fixed dimensions that match your renderer size for predictable layouts
  2. Use transparent backgrounds: Set background: transparent on html and body elements if you need transparency
  3. Avoid user interactions: The browser is non-interactive; design for automated display rather than user clicks
  4. Self-contained pages: Keep all resources (CSS, JS, images) either inline or on the same server to avoid CORS issues
  5. Optimize for performance: Minimize DOM complexity, use CSS transforms for animations, optimize images
  6. Test audio: Ensure your web page's audio works correctly before using it in production

Scrolling and Navigation

  1. Programmatic scrolling: Use the ScrollBar X-Pos and Y-Pos controls to navigate through long pages
  2. Smooth scrolling: Consider animating scroll position changes for smooth visual transitions
  3. Content visibility: Ensure important content fits within the viewport or use scrolling to reveal it

Security

  1. Trust your sources: Only load content from trusted URLs
  2. Test URLs thoroughly: Always test your web pages in a regular browser first to ensure they work correctly
  3. Be cautious with local files: Local file URLs may have security restrictions

Limitations and Known Issues

Input and Browser Limitations

  • Windows only: This input requires Windows due to CefSharp platform requirements
  • No real-time scrolling control: While ScrollBar position can be set, there's no automatic scrolling animation feature
  • No user interaction: The browser is non-interactive. Mouse clicks, keyboard input, and other user interactions are not supported
  • Static viewport during rendering: The viewport size must be set before starting and cannot be changed while running
  • Some websites may block embedding: Websites with strict Content Security Policies or X-Frame-Options may refuse to load
  • Browser process startup: The first Web Page input may take a moment to initialize as CEF starts its browser process

Performance

  • High resolution impact: Very high resolutions (e.g., 4K) may impact system performance significantly
  • Memory usage: Each browser instance requires substantial memory; multiple Web Page inputs in one composition will multiply memory requirements
  • Complex web pages: Pages with heavy JavaScript, WebGL, or continuous animations may not maintain consistent frame rates
  • Audio processing overhead: Audio capture adds additional processing overhead

CEF and Chromium

  • CEF version: The specific CEF version is determined by the CefSharp library version
  • Browser updates: CEF/Chromium updates require application updates
  • Chromium features: Some newer Chromium features may not be available depending on the CEF version