OpenGL Accelerated HTML Overlay/Performance/NXP i.MX 8: Difference between revisions

From RidgeRun Developer Wiki
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
{{OpenGL Accelerated HTML Overlay/Head|previous=Performance/NXP_i.MX_6|next=Contact_Us|metakeywords=imx8}}
{{OpenGL Accelerated HTML Overlay/Head|previous=Performance/x86|next=Contact_Us|metakeywords=imx8}}
</noinclude>
</noinclude>


= NXP i.MX 8 =
= NXP i.MX 8 =
We are currently working on accelerating on i.MX. Stay tuned!
 
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/NXP_i.MX_6|Contact_Us}}
{{OpenGL Accelerated HTML Overlay/Foot|Performance/x86|Contact_Us}}
</noinclude>
</noinclude>

Latest revision as of 19:31, 28 September 2023



Previous: Performance/x86 Index Next: Contact_Us
OpenGL Accelerated HTML Overlay
Basics
Getting Started
Library User Manual
GStreamer
Examples
Performance
Contact Us




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



Previous: Performance/x86 Index Next: Contact_Us



Retrieved from "https://developer.ridgerun.com/wiki/index.php?title=OpenGL_Accelerated_HTML_Overlay/Performance/NXP_i.MX_8&oldid=50743"