OpenGL Accelerated HTML Overlay: Getting Started - Evaluating HTML Overlay

Supported Platforms

Requesting the Evaluation Binary

To request an evaluation binary for a specific architecture, don’t hesitate to get in touch with us, and provide the following information:

Platform (i.e.: NVIDIA Jetson boards, x86, i.MX)
Operating System version, including:
- Kernel version.
  - Open a terminal and run the command uname -a
- Distribution name.
  - You can find this information by running cat /etc/os-release in a command line terminal. Provide Yocto version if you are on i.MX
If you are on Jetson:
- Jetpack version.
  - You can run sudo apt-cache show nvidia-jetpack in a terminal and check the Version.
GStreamer version.
- Open a terminal and run the command gst-launch-1.0 --gst-version

Moreover, please, provide a brief description of your use case, and any other environment info that might be usefull, like if using cameras, what's the camera setup and so on.

RidgeRun will provide you with the binaries to evaluate HTMLOverlay with some limitations.

Docker container compatibility is not yet implemented.

Features of the Evaluation

To help you test our HTML Overlay library, RidgeRun can provide an evaluation version of the plug-in.

The following table summarizes the features available in the professional and evaluation versions of HTML Overlay.

Table 1. Features provided in the evaluation version
Feature	Professional	Evaluation
C++ headers	Y	Y
HTML Overlay examples	Y	Y
GStreamer plugin	Y	Y
Unlimited Processing Time	Y	N (1)
Source Code	Y	N

(1) The evaluation version is limited to 9000 executions for draws and 9000 executions for website updates.

Evaluating HTML Overlay

Installing dependencies

HTML Overlay has the following main dependencies:

OpenGL
GLEW
EGL
GTK+, version 3.0
WebKit2GTK+, version 4.0

The following dependencies are optional:

OpenCV: for examples.
GLFW: for examples.
stbi-image: for examples.
pre-commit: for developer mode.
Doxygen: to enable automatic documentation.

To see how to install these dependencies, follow this link: Building HTML Overlay

Installing and testing HTML Overlay

RidgeRun will provide you with a tarball with the contents of the evaluation version of the HTML Overlay library.

To test the binary for the evaluation version of HTML Overlay, please:

Install the required dependencies.
Decompress the tarball
Run the following command:

./configuration.sh

It will change the terminal promt to something similar to:

(htmloverlay-eval) user@host:~/htmloverlay-develop-gst-1.16-x86-0.1.0-eval$

Testing HTML Overlay elements

To validate that the installation was successful, run the following command:

gst-inspect-1.0 htmloverlay

To see more on how to use these elements, check the GStreamer usage section:

NOTES:

If the following error is encountered during the inspect:

libGLEW.so.2.0: cannot open shared object file: No such file or directory

Find your installed GLEW package:

ls /usr/lib/x86_64-linux-gnu/ | grep libGLEW

This will show something similar to:

libGLEW.so
libGLEW.so.2.1
libGLEW.so.2.1.0

Create a link with your installed package:

sudo ln -f -s /usr/lib/x86_64-linux-gnu/libGLEW.so.2.1 /usr/lib/libGLEW.so.2.0

Clean the plugin registry and now the plugin should be detected normally:

rm ~/.cache/gstreamer-1.0/registry*

For Jetson targets the following extra steps are needed:
- Enable autologin open /etc/gdm3/custom.conf and change the following lines, change USER with the current user:
```
AutomaticLoginEnable=true
AutomaticLogin=USER
```
- export DISPLAY=:0
- export WEBKIT_DISABLE_COMPOSITING_MODE=1

Examples

The C++ examples provided are:

Render with OpenGL
Render a webpage with Webkit
Overlay of two images
Usage example

The example binaries are compiled after building. If the build directory is build:

examples 
       ├── opengl_example
       ├── webkit_example
       ├── overlay_example
       └── usage_example

For the examples that require image files, take into account the images provided in the artifacts section of the examples directory.

Render with OpenGL: This example renders an image multiplied by a scaling factor on a window with a translation. The scaling factor makes the image bigger for values greater than one and smaller for values smaller than one. This example receives two arguments:

Input image file path (.jpg or .png)
Scaling factor

To run the example:

./opengl_example input_file_path scaling factor

Render a webpage with Webkit: This example renders a webpage on a window. To run the example:

To run the example:

./webkit_example

Overlay example. This example renders a background image on a window and then overlays an ROI of the foreground image on top of the specified ROI on the background image. This example requires two arguments:

Foreground image file path (.jpg or .png)
Background image file path (.jpg or .png)

To run the example:

./overlay_example foreground_image_file_path background_image_file_path

Usage example. This example takes the contents from a web page, applies the overlay on top of a background buffer and save the image in a file. To run the example:

./usage_example

Previous: Basics

Index

Next: Getting_Started/Getting_the_Code

❯