OpenGL Accelerated HTML Overlay: Getting Started - Evaluating HTML Overlay

OpenGL Accelerated HTML Overlay
Basics
Getting Started
Evaluating HTML Overlay Getting the Code Building HTML Overlay
Library User Manual
GStreamer
GstHTMLOverlay
Examples
Library Usage GStreamer Usage
Performance
NVIDIA Jetson NXP i.MX 6 NXP i.MX 8
Contact Us

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. Use uname -a
  • Distribution name (Yocto if you are on i.MX)
• If you are on Jetson:
  • Jetpack version
• GStreamer 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.

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 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:

  • 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:

1. Input image file path (.jpg or .png)
2. 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:

1. Foreground image file path (.jpg or .png)
2. 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