Overview
The HTML5 Graphics Renderer container is a specialized tool developed to render dynamic HTML5-based graphics and integrate them into encoded video streams. It provides a flexible solution for adding visually engaging overlays like scoreboards, lower thirds, and animations to live video streams. This article explains what the container does, how it works, and where to find setup instructions.
What Is the HTML5 Graphics Renderer Container?
The HTML5 Graphics Renderer container is a Docker container designed to process HTML5 graphics and feed them into the graphics input of a LiveEdge device. By supporting dynamic content created with HTML, CSS, and JavaScript, the container makes it possible to render a variety of visual elements and integrate them seamlessly into live workflows. For smaller productions, such as hockey events in smaller arenas, it reduces the need for complex production equipment, allowing overlays to be managed directly from LiveEdge devices.
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.
*Development efforts are being made for a new 60 frames per second (FPS) solution for LiveEdge Max devices. Submit a request to join our Beta testing program! -
Device Compatibility:
Supported on both LiveEdge Node (single input) and LiveEdge Max (dual input).
How to Install and Configure the Container
For step-by-step installation instructions, see the How to Install a Docker Container via the Containers Tab article.
To configure the HTML5 Graphics Renderer container after installation:
- Ensure the Graphic Overlay feature is enabled for your device (you can modify it on the device’s Web UI or LiveEdge Cloud).
- Use the AV Input Preview in the local Web UI or LiveEdge Cloud to verify the presence of the graphics in your encoded video.
- Set the container’s HTML5 URL to the desired graphic content source using step 8 from this guide to interface with the LiveEdge Cloud API.
For any further assistance, feel free to submit a ticket to Videon Support.