OpenGL Accelerated HTML Overlay/Performance/NXP i.MX 8: Difference between revisions
(Created page with "<noinclude> {{OpenGL Accelerated HTML Overlay/Head|previous=Performance/NXP_i.MX_6|next=Contact_us|metakeywords=Contact Us}} </noinclude> = NXP i.MX 8 = We are currently work...") |
|||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<noinclude> | <noinclude> | ||
{{OpenGL Accelerated HTML Overlay/Head|previous=Performance/ | {{OpenGL Accelerated HTML Overlay/Head|previous=Performance/x86|next=Contact_Us|metakeywords=imx8}} | ||
</noinclude> | </noinclude> | ||
= NXP i.MX 8 = | = NXP i.MX 8 = | ||
HTML Overlay can refresh the web page at 5 Hz maximum and run at 720p. | |||
== GStreamer plugin performance == | |||
The plugin was tested with an example overlay and a camera, using an i.MX8M Plus with Yocto Kirkstone. The measurements were taken with the following pipeline, using gst-perf: | |||
* HTML Overlay System memory | |||
<pre> | |||
W=1280 | |||
H=720 | |||
# Average Behaviour | |||
gst-launch-1.0 v4l2src device=/dev/video1 ! "video/x-raw,framerate=30/1,height=${HEIGHT},width=${WIDTH}" ! queue ! imxvideoconvert_g2d ! queue ! htmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! perf print-cpu-load=1 ! fakesink | |||
# Limit | |||
gst-launch-1.0 videotestsrc num-buffers=1 pattern=ball ! "video/x-raw,format=RGBA,height=${HEIGHT},width=${WIDTH}" ! imagefreeze ! queue ! htmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! perf ! fakesink | |||
</pre> | |||
* HTML Overlay GstGL | |||
<pre> | |||
W=1280 | |||
H=720 | |||
# Average Behaviour | |||
gst-launch-1.0 v4l2src device=/dev/video1 ! "video/x-raw,framerate=30/1,height=${HEIGHT},width=${WIDTH}" ! queue ! imxvideoconvert_g2d ! queue ! glupload ! "video/x-raw(memory:GLMemory)" ! queue ! glhtmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! "video/x-raw(memory:GLMemory)" ! gldownload ! queue ! perf ! fakesink | |||
# Limit | |||
gst-launch-1.0 videotestsrc num-buffers=1 pattern=ball ! "video/x-raw,format=RGBA,height=${HEIGHT},width=${WIDTH}" ! imagefreeze ! queue ! glupload ! "video/x-raw(memory:GLMemory)" ! queue ! glhtmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! "video/x-raw(memory:GLMemory)" ! gldownload ! queue ! perf ! fakesink | |||
</pre> | |||
<br> | |||
<center> | |||
{| class="wikitable" | |||
|- | |||
! colspan="4" style="text-align:center; font-weight:bold;" | i.MX8MP with HTML refresh at 5 Hz | |||
|- style="font-weight:bold; text-align:center;" | |||
| style="text-align:left;" | Resolution | |||
| style="background-color:#68cbd0;" | 720p | |||
| style="background-color:#ffcb2f;" | 1080p | |||
| style="background-color:#32cb00;" | 4K | |||
|- | |||
| colspan="4" style="text-align:center; font-weight:bold;" | System Memory (htmloverlay) | |||
|- | |||
| style="font-weight:bold;" | Maximum Framerate<br />(fps)<br /> | |||
| style="text-align:center; background-color:#68cbd0;" | 28.4 | |||
| style="background-color:#ffcb2f;" | - | |||
| style="background-color:#32cb00;" | - | |||
|- | |||
| style="font-weight:bold;" | CPU Consumption (%) | |||
| style="text-align:center; background-color:#68cbd0;" | 45 | |||
| style="background-color:#ffcb2f;" | - | |||
| style="background-color:#32cb00;" | - | |||
|- | |||
| style="font-weight:bold;" | RAM Consumption (MiB) | |||
| style="text-align:center; background-color:#68cbd0;" | 204.9 | |||
| style="background-color:#ffcb2f;" | - | |||
| style="background-color:#32cb00;" | - | |||
|- style="text-align:center;" | |||
| colspan="4" style="font-weight:bold;" | GstGL-based (glhtmloverlay) | |||
|- | |||
| style="font-weight:bold;" | Maximum Framerate<br />(fps)<br /> | |||
| style="text-align:center; background-color:#68cbd0;" | 116.92 | |||
| style="background-color:#ffcb2f;" | - | |||
| style="background-color:#32cb00;" | - | |||
|- | |||
| style="font-weight:bold;" | CPU Consumption (%) | |||
| style="text-align:center; background-color:#68cbd0;" | 26 | |||
| style="background-color:#ffcb2f;" | - | |||
| style="background-color:#32cb00;" | - | |||
|- | |||
| style="font-weight:bold;" | RAM Consumption (MiB) | |||
| style="text-align:center; background-color:#68cbd0;" | 183.6 | |||
| style="background-color:#ffcb2f;" | - | |||
| style="background-color:#32cb00;" | - | |||
|} | |||
</center> | |||
===Used overlay=== | |||
The user overlay (click [https://drive.google.com/file/d/1iflIbRJxrRg5m9s0ZhfCOWusdoCVbIF7/view?usp=sharing View Source] on the wiki to see the html): | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" | |||
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> | |||
<style> | |||
.head-icons { | |||
margin-top: -3px; | |||
margin-left: 3px; | |||
margin-right: 3px; | |||
} | |||
.row {height: 50%;} | |||
@keyframes flickerAnimation { | |||
0% {opacity: 1;} | |||
50% {opacity: 0;} | |||
100% {opacity: 1;} | |||
} | |||
@-o-keyframes flickerAnimation { | |||
0% {opacity: 1;} | |||
50% {opacity: 0;} | |||
100% {opacity: 1;} | |||
} | |||
@-moz-keyframes flickerAnimation { | |||
0% {opacity: 1;} | |||
50% {opacity: 0;} | |||
100% {opacity: 1;} | |||
} | |||
@-webkit-keyframes flickerAnimation { | |||
0% {opacity: 1;} | |||
50% {opacity: 0;} | |||
100% {opacity: 1;} | |||
} | |||
#rec { | |||
-webkit-animation: flickerAnimation 2s infinite; | |||
-moz-animation: flickerAnimation 2s infinite; | |||
-o-animation: flickerAnimation 2s infinite; | |||
animation: flickerAnimation 2s infinite; | |||
} | |||
.container { | |||
position: relative; | |||
font-size: x-large; | |||
} | |||
</style> | |||
</head> | |||
<body class="p-3 bg-transparent text-white " style="height:720px;"> | |||
<div class="container"> | |||
<div class="row align-items-start" style="padding:1%"> | |||
<div class="col text-start"> | |||
<svg id="rec" class="text-danger head-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" | |||
fill="currentColor" class="bi bi-record2" viewBox="0 0 16 16"> | |||
<path d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1A5 5 0 1 0 8 3a5 5 0 0 0 0 10z" /> | |||
<path d="M10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" /> | |||
</svg> | |||
<span>REC</span> | |||
</div> | |||
<div class="col text-center"> | |||
Montreal City, Canada | |||
</div> | |||
<div class="col text-end"> | |||
<svg class="head-icons d-none" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" | |||
class="bi bi-wifi-1" viewBox="0 0 16 16"> | |||
<path | |||
d="M11.046 10.454c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.611-.091l.015-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.708-.707z" /> | |||
</svg> | |||
<svg class="head-icons d-none" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" | |||
class="bi bi-wifi-2" viewBox="0 0 16 16"> | |||
<path | |||
d="M13.229 8.271c.216-.216.194-.578-.063-.745A9.456 9.456 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.577 1.336c.205.132.48.108.652-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.408.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.611-.091l.015-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .708 0l.707-.707z" /> | |||
</svg> | |||
<svg class="head-icons" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" | |||
class="bi bi-wifi-2" viewBox="0 0 16 16"> | |||
<path | |||
d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z" /> | |||
<path | |||
d="M13.229 8.271c.216-.216.194-.578-.063-.745A9.456 9.456 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.577 1.336c.205.132.48.108.652-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.408.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.611-.091l.015-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .708 0l.707-.707z" /> | |||
</svg> | |||
<svg class="head-icons" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" | |||
class="bi bi-battery-half" viewBox="0 0 16 16"> | |||
<!--Modify --> | |||
<path d="M2 6h5v4H2V6z" /> | |||
<path | |||
d="M2 4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2zm10 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h10zm4 3a1.5 1.5 0 0 1-1.5 1.5v-3A1.5 1.5 0 0 1 16 8z" /> | |||
</svg> | |||
</div> | |||
</div> | |||
<div class="row align-items-end"> | |||
<div class="col text-center"> | |||
<span id="time"></span> | |||
</div> | |||
</div> | |||
</div> | |||
</body> | |||
<script> | |||
var time = 1233200; | |||
setInterval(() => { | |||
var datetime = new Date(time); | |||
var timestring = `${datetime.getHours()}:${datetime.getMinutes()}:${datetime.getSeconds()}`; | |||
document.getElementById('time').innerHTML = datetime.toTimeString().split(' ')[0]; | |||
time += 1000; | |||
}, 1000); | |||
</script> | |||
</html> | |||
<noinclude> | <noinclude> | ||
{{OpenGL Accelerated HTML Overlay/Foot|Performance/ | {{OpenGL Accelerated HTML Overlay/Foot|Performance/x86|Contact_Us}} | ||
</noinclude> | </noinclude> |
Latest revision as of 19:31, 28 September 2023
|
|
NXP i.MX 8
HTML Overlay can refresh the web page at 5 Hz maximum and run at 720p.
GStreamer plugin performance
The plugin was tested with an example overlay and a camera, using an i.MX8M Plus with Yocto Kirkstone. The measurements were taken with the following pipeline, using gst-perf:
- HTML Overlay System memory
W=1280 H=720 # Average Behaviour gst-launch-1.0 v4l2src device=/dev/video1 ! "video/x-raw,framerate=30/1,height=${HEIGHT},width=${WIDTH}" ! queue ! imxvideoconvert_g2d ! queue ! htmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! perf print-cpu-load=1 ! fakesink # Limit gst-launch-1.0 videotestsrc num-buffers=1 pattern=ball ! "video/x-raw,format=RGBA,height=${HEIGHT},width=${WIDTH}" ! imagefreeze ! queue ! htmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! perf ! fakesink
- HTML Overlay GstGL
W=1280 H=720 # Average Behaviour gst-launch-1.0 v4l2src device=/dev/video1 ! "video/x-raw,framerate=30/1,height=${HEIGHT},width=${WIDTH}" ! queue ! imxvideoconvert_g2d ! queue ! glupload ! "video/x-raw(memory:GLMemory)" ! queue ! glhtmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! "video/x-raw(memory:GLMemory)" ! gldownload ! queue ! perf ! fakesink # Limit gst-launch-1.0 videotestsrc num-buffers=1 pattern=ball ! "video/x-raw,format=RGBA,height=${HEIGHT},width=${WIDTH}" ! imagefreeze ! queue ! glupload ! "video/x-raw(memory:GLMemory)" ! queue ! glhtmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=5 overlay-x=100 ! queue ! "video/x-raw(memory:GLMemory)" ! gldownload ! queue ! perf ! fakesink
i.MX8MP with HTML refresh at 5 Hz | |||
---|---|---|---|
Resolution | 720p | 1080p | 4K |
System Memory (htmloverlay) | |||
Maximum Framerate (fps) |
28.4 | - | - |
CPU Consumption (%) | 45 | - | - |
RAM Consumption (MiB) | 204.9 | - | - |
GstGL-based (glhtmloverlay) | |||
Maximum Framerate (fps) |
116.92 | - | - |
CPU Consumption (%) | 26 | - | - |
RAM Consumption (MiB) | 183.6 | - | - |
Used overlay
The user overlay (click View Source on the wiki to see the html):
REC
Montreal City, Canada