OpenGL Accelerated HTML Overlay: Examples - GStreamer Usage

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

General

HTMLOverlay includes out of the box, an easy to use GStreamer plugin, that allows users to add overlays to media in a quick an easy manner.

GStreamer Element

Pre-requisites

NVIDIA Jetson

If you are on an NVIDIA Jetson, you may need to set the following variables

export DISPLAY=:0
export WEBKIT_DISABLE_COMPOSITING_MODE=1

htmloverlay

This element takes an RGBA video stream, renders the website and overlays the resulting website on top of the incoming video.

• Example pipeline

On Jetson platforms

gst-launch-1.0 nvarguscamerasrc ! "video/x-raw(memory:NVMM),height=1080,width=1920,framerate=30/1" ! nvvidconv ! queue ! htmloverlay url="http://0.0.0.0:8000/fancy_overlay.html" enable-js=true web-refresh-rate=0 ! queue ! nvvidconv ! xvimagesink

On x86 platforms:
With video sources:

gst-launch-1.0 videotestsrc pattern=ball ! "video/x-raw,height=720,width=1280,framerate=30/1" ! queue ! htmloverlay url="http://0.0.0.0:8000/fancy_overlay.html" enable-js=true web-refresh-rate=0 ! queue ! videoconvert ! xvimagesink

With camera to file:

gst-launch-1.0 v4l2src num-buffers=100 ! videoconvert ! queue ! htmloverlay url="http://0.0.0.0:8000/fancy_overlay.html" enable-js=true web-refresh-rate=0 ! queue ! videoconvert ! x264enc ! h264parse ! qtmux ! filesink location=test.mp4 -v

Use cases

In this section, you can find some use cases for the HTMLOverlay. The examples were tested on a Jetson Xavier NX with Jetpack 5.1.1.

• Recording

The following pipeline records a video from a camera sensor, applies the three different algorithms and saves the video into an MP4 file.

gst-launch-1.0 -ve nvarguscamerasrc ! "video/x-raw(memory:NVMM),height=1080,width=1920,framerate=30/1" ! nvvidconv ! queue ! htmloverlay url="http://0.0.0.0:8000/fancy_overlay.html" enable-js=true web-refresh-rate=0 ! queue ! nvvidconv ! nvv4l2h264enc ! h264parse ! qtmux ! filesink location=test.mp4 -e

• Streaming

The following pipeline is an example of a streaming application with the overlay element. These pipelines use another RidgeRun product for high-performance streaming called GstRtspSink .

gst-launch-1.0 nvarguscamerasrc ! "video/x-raw(memory:NVMM),height=1080,width=1920,framerate=30/1" ! nvvidconv ! queue ! htmloverlay url="http://0.0.0.0:8000/fancy_overlay.html" enable-js=true web-refresh-rate=0 ! queue ! nvvidconv ! nvv4l2h264enc insert-sps-pps=true idrinterval=30 ! "video/x-h264,mapping=/stream1" ! rtspsink service=5000 -vvv