Articles in this section

See more

HTML5 Graphic Overlay Renderer for Node Devices: What It Is and How It Works (4 FPS Limit)

  • Updated
Follow

Table of Contents:

 

🧭 Overview

The HTML5 Graphic Overlay Renderer container renders dynamic HTML5-based graphics and integrates them into the encoded video stream. This makes it ideal for adding overlays such as scoreboards, lower thirds, and animations to live video.

⚠️ Important: This container is intended for use with LiveEdge Node devices.
While it is technically compatible with Max, we recommend using the Dynamic Graphic Overlay feature available natively in the Max device UI.

This article explains what the container does, how it works, and where to find setup instructions.

 

❓ What Is the HTML5 Graphic Overlay Renderer Container?

The HTML5 Graphic Overlay Renderer is a Docker container that processes HTML5 graphics and feeds them into the graphics input of a LiveEdge device.

It supports dynamic content built with HTML, CSS, and JavaScript, enabling rich visual elements to be overlaid seamlessly into live video workflows.

Key benefits include:

  • 📦 Docker-based integration with LiveEdge devices

  • 🎨 Support for dynamic, real-time HTML5 graphics, including animations and data-driven elements

  • 🧩 Compatibility with custom-built graphic interfaces using web technologies

  • 🎥 Simplified production setup for smaller or remote workflows, such as local sports broadcasts

  • ❌ Reduces reliance on external graphics hardware by handling overlays directly on the device

 

✨ Key Features and Limitations

  • Dynamic Graphics Support:
    The container processes graphics from an HTML5 URL. This includes content generated dynamically by JavaScript, making it ideal for live graphics such as scoreboards and real-time data-driven overlays. The rendered output is converted into PNG images, which are sent to your LiveEdge device's graphics input API, before being integrated to your live stream.
  • Frame Rate:
    The current container renders graphics at a maximum of 4 frames per second (FPS), making it suitable for scenarios requiring light but effective graphical updates.
  • Device Compatibility:
    Supported on LiveEdge Node. While it is technically compatible with Max devices, we recommend using the Max’s built-in Dynamic Graphic Overlay feature instead.
     

⚙️ How to Install and Configure the Container

For step-by-step installation instructions of the HTML5 Graphic Overlay Renderer container, see the How to Install a Docker Container via the Containers Tab article.

To configure the HTML5 Graphic Overlay Renderer container after installation:

  1. Ensure the Graphic Overlay feature is enabled for your device (you can modify it on the device’s Web UI or LiveEdge Cloud).
  2. Set the container’s HTML5 URL to the desired graphic content source by following these steps with local access to the device. Otherwise, if you wish to deploy these configurations remotely, you may use the API instructions starting at step 8 from this guide to interface with the LiveEdge Cloud API.
  3. Determine the device's internal IP address.
  4. Navigate to http://internal_ip:2020/v2/in_channels in a web browser, replacing internal_ip with your device's IP address. If an input has already been created on the device, this will display the in_channel_id: in this case, it is 23. If the in_channel_id is not displayed, you may need to ensure that you create an input on your Videon Node first.
  5. Copy the entire JSON in the code block below, replacing the number for the in_channel_id with your device's in_channel_id from step 5 above (23 in this example), and replace fps (supported values 1 to 4), url (any valid URL hosting an HTML image), and enabled (supported values true or false) with your desired values. This JSON will be pasted into the LiveEdge Cloud Containers section later.
    • {
    "fps": 2,
    "in_channel_id": 23,
    "url": "https://app.overlays.uno/output/5Vbo4fKHRTChKnRUjy9ih8",
    "enabled": true
}
  6. Navigate to https://videoncloud.com/, find your device, and go to the Containers tab. 
  7. Select the "MANAGE" button to the right of the HTML5 Graphic Overlay Renderer container.
  8. Click the"CONFIGURE CONTAINER" tab and select JSON.
  9. Paste the JSON copied from step 6 above with your appropriate values entered.
  10. Click Save. If your JSON was formatted properly with the correct values, the container should begin processing your HTML5 graphic onto your Node device. Congratulations!
    • NOTE: if you are using a 3840x2160 resolution input source, this container will not overlay a graphic onto it as expected. This container only supports up to 1920x1080.
  11. Use the AV Input Preview in the local Web UI or LiveEdge Cloud to verify the presence of the graphics in your encoded video.
  12. For future configuration changes, you can navigate to https://videoncloud.com/, find your device, and go to the Containers tab. Select the "MANAGE" button to the right of the HTML5 Graphic Overlay Renderer container. Click the"CONFIGURE CONTAINER" tab and select CONFIGURATION to adjust the parameters that were set by the JSON earlier.


🆘 Need Help?
For any further assistance, feel free to submit a ticket to Videon Support.

Related articles