OpenGL Accelerated HTML Overlay/Examples/GStreamer Usage: Difference between revisions
(10 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
{{OpenGL Accelerated HTML Overlay/Head|previous=|next=|metakeywords= | {{OpenGL Accelerated HTML Overlay/Head|previous=Examples/Library_Usage|next=Performance/NVIDIA_Jetson|metakeywords=GStreamer Usage}} | ||
</noinclude> | </noinclude> | ||
Line 8: | Line 8: | ||
== GStreamer Element == | == GStreamer Element == | ||
=== Pre-requisites === | |||
==== NVIDIA Jetson ==== | |||
If you are on an NVIDIA Jetson, you may need to set the following variables | |||
<pre> | |||
export DISPLAY=:0 | |||
export WEBKIT_DISABLE_COMPOSITING_MODE=1 | |||
</pre> | |||
=== htmloverlay === | === htmloverlay === | ||
Line 14: | Line 25: | ||
* '''Example pipeline''' | * '''Example pipeline''' | ||
<u>'''On Jetson platforms:'''</u> | |||
<br> | |||
<source lang=bash> | <source lang=bash> | ||
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 | 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 | ||
</source> | </source> | ||
[[File:Overlay jetson cam.mp4|800px|frameless|center|alt=GStreamer example using HTML Overlay]] | |||
<u>'''On x86 platforms:'''</u> | |||
<br> | |||
'''With video sources:''' | |||
<source lang=bash> | <source lang=bash> | ||
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 | 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 | ||
</source> | </source> | ||
[[File:Example simple overlay x86.mp4|800px|frameless|center]] | [[File:Example simple overlay x86.mp4|800px|frameless|center|alt=GStreamer example using HTML Overlay]] | ||
<br> | |||
'''With camera to file:''' | |||
<source lang=bash> | |||
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 | |||
</source> | |||
[[File:Webcam overlay.mp4|800px|frameless|center|alt=GStreamer example using HTML Overlay]] | |||
== Use cases == | == 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. | 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''' | *'''Recording''' | ||
The following pipeline records a video from a camera sensor | The following pipeline records a video from a camera sensor applies the three different algorithms, and saves the video into an MP4 file. | ||
<source lang=bash> | <source lang=bash> | ||
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 | 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 | ||
Line 42: | Line 60: | ||
*'''Streaming''' | *'''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]] . | 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]]. | ||
<source lang=bash> | <source lang=bash> | ||
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 | 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 | ||
Line 49: | Line 67: | ||
<noinclude> | <noinclude> | ||
{{OpenGL Accelerated HTML Overlay/Foot||}} | {{OpenGL Accelerated HTML Overlay/Foot|Examples/Library_Usage|Performance/NVIDIA_Jetson}} | ||
</noinclude> | </noinclude> |
Latest revision as of 21:27, 1 October 2024
|
|
OpenGL Accelerated HTML Overlay |
---|
Basics |
Getting Started |
Library User Manual |
GStreamer |
Examples |
Performance |
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