OpenGL accelerated HTML rendering is the newest solution developed by RidgeRun for content overlaying on video streams and recordings. This tool seamlessly overlays HTML-based content onto image frames by harnessing the power of OpenGL acceleration.
Built upon WebKitGTK, users can use HTML5, CSS3, and modern JavaScript features, enabling high-quality content representation. Lightweight animations can be effortlessly integrated using HTML5 and CSS3, enhancing the overall visual experience. The dynamic capabilities of JavaScript empower the content to interact with the cloud and retrieve real-time data.
Compared to alternative solutions like QML-based overlaying, HTML Overlay offers the advantage of leveraging widely documented web technologies. This approach simplifies the development process and allows users to harness the full potential of web-based tools.
Discover the possibilities of HTML Overlay as we explore its features and see how it elevates content overlaying, opening up new avenues for creating captivating and dynamic video content.
Architecture Overview
RidgeRun has made HTML Overlay as a library with cutting-edge technologies but keeping simplicity using C++. HTML Overlay is composed of two main blocks:
Content Loader: renders the contents to overlay
Graphics Backend: allows painting the overlay on one of many frames
Unlike other Open Source solutions, HTML Overlay integrates the composition and the web rendering in the same place. At the GStreamer level, it leads to simpler pipelines and less complex computations while taking most of the GPU processing. It only allows rendering a part of the web contents on a predetermined Region-of-Interest (ROI), a feature absent in most of the existing solutions in the market.
Demonstration
You can use HTML overlay in a wide variety of applications and scenarios. Below, we present some examples that use HTML5 in the company of CSS3 animations and Bootstrap.
Drone Footage
Without overlay (Original video) | With HTML Overlay |
|
Sports Streaming
Without overlay (Original video) | With HTML Overlay |
How to Use it?
The HTML Overlay also offers a companion GStreamer plugin to integrate overlays into your existing video pipeline. Below, you can see a sample capture:
GStreamer pipeline:
gst-launch-1.0 -ve nvarguscamerasrc ! "video/x-raw(memory:NVMM),height=720,width=1280" ! nvvidconv ! queue ! htmloverlay url="http://127.0.0.1:8000/drone.html" ! queue ! nvvidconv ! nvv4l2h264enc ! h264parse ! qtmux ! filesink location=output.mp4 -eYou can also use HTML Overlay standalone as a library that can be integrated into your applications. You can check more information in our developer wiki.
Platforms Compatible with our OpenGL Accelerated HTML Rendering
You can easily achieve more than 60 fps* at 1080p in any of the following platforms:
X86-based systems with OpenGL-capable GPUs
NVIDIA Jetson: Nano, TX2, Xavier (NX, AGX), Orin (Nano, AGX, NX)
More features are coming for NVIDIA Jetson and NXP i.MX platforms. More information is available in our developer wiki.
* Subject to the frequency and power mode of the platforms.
Let's Get Into it
Want to give it a try? Email: support@ridgerun.com for an evaluation version!
Please submit the Contact Us form if you have any questions or send an email to contactus@ridgerun.com
 |  |  |