Difference between revisions of "OpenGL Accelerated HTML Overlay/Performance/NVIDIA Jetson"

From RidgeRun Developer Connection
Jump to: navigation, search
(→‎Library API performance)
 
(67 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<noinclude>
 
<noinclude>
−
{{OpenGL Accelerated HTML Overlay/Head|previous=|next=|metakeywords=Contact Us}}
+
{{OpenGL Accelerated HTML Overlay/Head|previous=Examples/GStreamer_Usage|next=Performance/NXP_i.MX_6|metakeywords=Contact Us}}
 
</noinclude>
 
</noinclude>
−
= Library API performance =
+
 
−
In summary:
+
__TOC__
 +
 
 +
== Library performance ==
 +
The library has two major components: the hardware-accelerated graphical rendering done by OpenGL and the web rendering engine done by Webkit GTK.
 +
In the following section, you will find the performance for the library separated into these two sections.
 +
 
 +
=== Graphical Rendering by OpenGL ===
 +
<br>
 +
In this section, we present results about the performance of HTML Overlay tested in the following setup:
 +
 
 +
* Board: NVIDIA Jetson Xavier NX
 +
* Jetpack: 5.1
 +
 
 +
All the packages and dependencies are retrieved from the default APT repositories.
 +
 
 +
<br>
 +
The following table shows the CPU usage, GPU usage, processing time and FPS.
 +
<br>
 +
<br>
 
<center>
 
<center>
−
{| class="wikitable"  
+
{| class="wikitable" style="text-align:center;"
 +
|-
 +
! style="font-weight:bold; text-align:left;" | Board
 +
! colspan="12" style="font-weight:bold;" | NVIDIA Jetson Xavier NX
 +
|- style="font-weight:bold;"
 +
| style="text-align:left;" | Resolution
 +
| colspan="4" style="background-color:#9aff99;" | 4K
 +
| colspan="4" style="background-color:#ffce93;" | +1080p
 +
| colspan="4" style="background-color:#38fff8;" | +720p
 +
|- style="font-weight:bold;"
 +
| style="text-align:left;" | Measurement
 +
| style="background-color:#9aff99;" | CPU usage (%)
 +
| style="background-color:#9aff99;" | GPU usage (%)
 +
| style="background-color:#9aff99;" | Processing time (ms)
 +
| style="background-color:#9aff99;" | FPS
 +
| style="background-color:#ffce93;" | CPU usage (%)
 +
| style="background-color:#ffce93;" | GPU usage (%)
 +
| style="background-color:#ffce93;" | Processing time (ms)
 +
| style="background-color:#ffce93;" | FPS
 +
| style="background-color:#38fff8;" | CPU usage (%)
 +
| style="background-color:#38fff8;" | GPU usage (%)
 +
| style="background-color:#38fff8;" | Processing time (ms)
 +
| style="background-color:#38fff8;" | FPS
 +
|-
 +
| style="font-weight:bold; text-align:left;" | Power Configuration
 +
| colspan="12" | 10 W Desktop Mode
 +
|-
 +
| style="font-weight:bold; text-align:left;" | Upload
 +
| style="background-color:#9aff99;" | 6.34
 +
| style="background-color:#9aff99;" | 36.99
 +
| style="background-color:#9aff99;" | 11.46
 +
| style="background-color:#9aff99;" | 87.24
 +
| style="background-color:#ffce93;" | 7.25
 +
| style="background-color:#ffce93;" | 19.64
 +
| style="background-color:#ffce93;" | 14
 +
| style="background-color:#ffce93;" | 71.4
 +
| style="background-color:#38fff8;" | 4.44
 +
| style="background-color:#38fff8;" | 15.72
 +
| style="background-color:#38fff8;" | 7.293
 +
| style="background-color:#38fff8;" | 137
 +
|-
 +
| style="font-weight:bold; text-align:left;" | Draw
 +
| style="background-color:#9aff99;" | 0.16
 +
| style="background-color:#9aff99;" | 11.96
 +
| style="background-color:#9aff99;" | 4.329
 +
| style="background-color:#9aff99;" | 231
 +
| style="background-color:#ffce93;" | 0.36
 +
| style="background-color:#ffce93;" | 7.71
 +
| style="background-color:#ffce93;" | 2.5
 +
| style="background-color:#ffce93;" | 395
 +
| style="background-color:#38fff8;" | 0.40
 +
| style="background-color:#38fff8;" | 5.67
 +
| style="background-color:#38fff8;" | 2.077
 +
| style="background-color:#38fff8;" | 481
 +
|-
 +
| style="font-weight:bold;text-align:left;" | Download
 +
| style="background-color:#9aff99;" | 7.70
 +
| style="background-color:#9aff99;" | 29.08
 +
| style="background-color:#9aff99;" | 15.053
 +
| style="background-color:#9aff99;" | 66.43
 +
| style="background-color:#ffce93;" | 5
 +
| style="background-color:#ffce93;" | 14.73
 +
| style="background-color:#ffce93;" | 8.4
 +
| style="background-color:#ffce93;" | 118
 +
| style="background-color:#38fff8;" | 3.14
 +
| style="background-color:#38fff8;" | 6.53
 +
| style="background-color:#38fff8;" | 4.552
 +
| style="background-color:#38fff8;" | 220
 
|-
 
|-
−
! rowspan="2" |  
+
| style="font-weight:bold; text-align:left;" | Power Configuration
−
! colspan="4" style="text-align:center; background-color:#ffce93;" | Jetson NX (+1080p)
+
| colspan="12" | 20 W + Jetson Clocks (Max Power)
 +
|- style="vertical-align:middle;"
 +
| style="font-weight:bold; text-align:left;" | Upload
 +
| style="background-color:#9aff99;" | 4.25
 +
| style="background-color:#9aff99;" | 6.40
 +
| style="background-color:#9aff99;" | 11.357
 +
| style="background-color:#9aff99;" | 88
 +
| style="background-color:#ffce93;" | 1.45
 +
| style="background-color:#ffce93;" | 2.21
 +
| style="background-color:#ffce93;" | 2.997
 +
| style="background-color:#ffce93;" | 334
 +
| style="background-color:#38fff8;" | 0.77
 +
| style="background-color:#38fff8;" | 1.30
 +
| style="background-color:#38fff8;" | 1.492
 +
| style="background-color:#38fff8;" | 670
 +
|- style="vertical-align:middle;"
 +
| style="font-weight:bold; text-align:left;" | Draw
 +
| style="background-color:#9aff99;" | 0.09
 +
| style="background-color:#9aff99;" | 1.59
 +
| style="background-color:#9aff99;" | 0.773
 +
| style="background-color:#9aff99;" | 1294
 +
| style="background-color:#ffce93;" | 0.09
 +
| style="background-color:#ffce93;" | 0.82
 +
| style="background-color:#ffce93;" | 0.478
 +
| style="background-color:#ffce93;" | 2092
 +
| style="background-color:#38fff8;" | 0.10
 +
| style="background-color:#38fff8;" | 0.66
 +
| style="background-color:#38fff8;" | 0.443
 +
| style="background-color:#38fff8;" | 2309
 +
|- style="vertical-align:middle;"
 +
| style="font-weight:bold; text-align:left;" | Download
 +
| style="background-color:#9aff99;" | 2.73
 +
| style="background-color:#9aff99;" | 6.43
 +
| style="background-color:#9aff99;" | 6.489
 +
| style="background-color:#9aff99;" | 154.1
 +
| style="background-color:#ffce93;" | 0.94
 +
| style="background-color:#ffce93;" | 2.13
 +
| style="background-color:#ffce93;" | 1.947
 +
| style="background-color:#ffce93;" | 514
 +
| style="background-color:#38fff8;" | 0.57
 +
| style="background-color:#38fff8;" | 0.84
 +
| style="background-color:#38fff8;" | 1.071
 +
| style="background-color:#38fff8;" | 933.7
 +
|}
 +
</center>
 +
 
 +
=== Web rendering by WebkitGTK ===
 +
The following table shows the CPU usage, GPU usage, processing time and FPS.
 +
 
 +
<br>
 +
<center>
 +
{| class="wikitable" style="text-align:center;"
 
|-
 
|-
 +
! style="font-weight:bold; text-align:left;" | Board
 +
! colspan="12" style="font-weight:bold;" | NVIDIA Jetson Xavier NX
 +
|- style="font-weight:bold;"
 +
| style="text-align:left;" | Resolution
 +
| colspan="4" style="background-color:#9aff99;" | 4K
 +
| colspan="4" style="background-color:#ffce93;" | +1080p
 +
| colspan="4" style="background-color:#38fff8;" | +720p
 +
|- style="font-weight:bold;"
 +
| style="text-align:left;" | Measurement
 +
| style="background-color:#9aff99;" | CPU usage (%)
 +
| style="background-color:#9aff99;" | GPU usage (%)
 +
| style="background-color:#9aff99;" | Processing time (ms)
 +
| style="background-color:#9aff99;" | FPS
 
| style="background-color:#ffce93;" | CPU usage (%)
 
| style="background-color:#ffce93;" | CPU usage (%)
 
| style="background-color:#ffce93;" | GPU usage (%)
 
| style="background-color:#ffce93;" | GPU usage (%)
 
| style="background-color:#ffce93;" | Processing time (ms)
 
| style="background-color:#ffce93;" | Processing time (ms)
 
| style="background-color:#ffce93;" | FPS
 
| style="background-color:#ffce93;" | FPS
 +
| style="background-color:#38fff8;" | CPU usage (%)
 +
| style="background-color:#38fff8;" | GPU usage (%)
 +
| style="background-color:#38fff8;" | Processing time (ms)
 +
| style="background-color:#38fff8;" | FPS
 
|-
 
|-
−
| Upload
+
| style="font-weight:bold; text-align:left;" | Power Configuration
−
| style="background-color:#ffce93;" | 1
+
| colspan="12" | 10 W Desktop Mode
−
| style="background-color:#ffce93;" | 2
 
−
| style="background-color:#ffce93;" | 3
 
−
| style="background-color:#ffce93;" | 4
 
 
|-
 
|-
−
| Draw
+
| style="font-weight:bold; text-align:left;" | Draw
−
| style="background-color:#ffce93;" | 5
+
| style="background-color:#9aff99;" | 9.2
−
| style="background-color:#ffce93;" | 6
+
| style="background-color:#9aff99;" | 0
−
| style="background-color:#ffce93;" | 7
+
| style="background-color:#9aff99;" | 215.425
−
| style="background-color:#ffce93;" | 8
+
| style="background-color:#9aff99;" | 4.64
 +
| style="background-color:#ffce93;" | 9.2
 +
| style="background-color:#ffce93;" | 0
 +
| style="background-color:#ffce93;" | 52.525
 +
| style="background-color:#ffce93;" | 19
 +
| style="background-color:#38fff8;" | 6.77
 +
| style="background-color:#38fff8;" | 0
 +
| style="background-color:#38fff8;" | 23.095
 +
| style="background-color:#38fff8;" | 43.3
 +
|-
 +
| style="font-weight:bold; text-align:left;" | Power Configuration
 +
| colspan="12" | 20 W + Jetson Clocks (Max Power)<ref name=performace_note>The reduced results with the 20W power mode is expected since the CPU is running at a reduced clock of 1.4GHz compared to the 1.9GHz </ref>
 +
|- style="vertical-align:middle;"
 +
| style="font-weight:bold; text-align:left;" | Draw
 +
| style="background-color:#9aff99;" | 6.1
 +
| style="background-color:#9aff99;" | 0
 +
| style="background-color:#9aff99;" | 281.714
 +
| style="background-color:#9aff99;" | 3.55
 +
| style="background-color:#ffce93;" | 6.3
 +
| style="background-color:#ffce93;" | 0
 +
| style="background-color:#ffce93;" | 69.137
 +
| style="background-color:#ffce93;" | 14.46
 +
| style="background-color:#38fff8;" | 5.6
 +
| style="background-color:#38fff8;" | 0
 +
| style="background-color:#38fff8;" | 28.515
 +
| style="background-color:#38fff8;" | 35.1
 +
|- style="vertical-align:middle;"
 +
|}
 +
</center>
 +
 
 +
* Note: When on mode 20W+Jetson Clocks the frequency of operation is 1.4 GHz and for 10w+Desktop mode the frequency of operation is 1.9 GHz. This is shown for the measurements for processing time in each mode.
 +
* Note: There is no GPU consumption since we are using a flag that disables the use of GPU for WebkitGTK.
 +
<source lang=bash>
 +
export WEBKIT_DISABLE_COMPOSITING_MODE=1
 +
</source>
 +
 
 +
== GStreamer plugin performance ==
 +
 
 +
The plugin was tested with an example overlay and a camera, using a Jetson Xavier NX with Jetpack 5.1.1. The measurements were taken with the following pipeline, using gst-perf:
 +
<pre>
 +
gst-launch-1.0 -ve nvarguscamerasrc num-buffers=300 ! "video/x-raw(memory:NVMM),height=$H,width=$W,framerate=30/1" ! nvvidconv flip-method=2 ! queue ! htmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=10 ! perf ! queue ! nvvidconv ! xvimagesink
 +
</pre>
 +
<br>
 +
 
 +
<center>
 +
{| class="wikitable"
 +
|-
 +
! Board
 +
! colspan="12" style="text-align:center; font-weight:bold;" | Jetson Xavier NX
 +
|- style="font-weight:bold;"
 +
| style="font-weight:normal;" | Resolution
 +
| style="text-align:center; background-color:#a0f8f5;" | +720p
 +
| style="text-align:center; background-color:#f8dab4;" | +1080p
 +
| style="text-align:center; background-color:#f8dab4;" | +4k
 +
|-
 +
| style="font-weight:normal;" | FPS(10W-4core)
 +
| style="background-color:#a0f8f5;" | 166.6167
 +
| style="background-color:#f8dab4;" | 54.7143
 +
| style="background-color:#f8dab4;" | 13.4852
 
|-
 
|-
−
| Download
+
| style="font-weight:normal;" | FPS(20W-6core & jetson-clocks)<ref name=performace_note/>
−
| style="background-color:#ffce93;" | 9
+
| style="background-color:#a0f8f5;" | 120.5662
−
| style="background-color:#ffce93;" | 10
+
| style="background-color:#f8dab4;" | 56.2988
−
| style="background-color:#ffce93;" | 11
+
| style="background-color:#f8dab4;" | 12.7323
−
| style="background-color:#ffce93;" | 12
 
 
|}
 
|}
 
</center>
 
</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||}}
+
{{OpenGL Accelerated HTML Overlay/Foot|Examples/GStreamer_Usage|Performance/NXP_i.MX_6}}
 
</noinclude>
 
</noinclude>

Latest revision as of 14:42, 1 September 2023



Previous: Examples/GStreamer_Usage Index Next: Performance/NXP_i.MX_6
Nvidia-preferred-partner-badge-rgb-for-screen.png
NXP Partner Program Registered Vertical.jpg
OpenGL Accelerated HTML Overlay
Logo-exported.png
Basics
Getting Started
Library User Manual
GStreamer
Examples
Performance
Contact Us




Library performance

The library has two major components: the hardware-accelerated graphical rendering done by OpenGL and the web rendering engine done by Webkit GTK. In the following section, you will find the performance for the library separated into these two sections.

Graphical Rendering by OpenGL


In this section, we present results about the performance of HTML Overlay tested in the following setup:

  • Board: NVIDIA Jetson Xavier NX
  • Jetpack: 5.1

All the packages and dependencies are retrieved from the default APT repositories.


The following table shows the CPU usage, GPU usage, processing time and FPS.

Board NVIDIA Jetson Xavier NX
Resolution 4K +1080p +720p
Measurement CPU usage (%) GPU usage (%) Processing time (ms) FPS CPU usage (%) GPU usage (%) Processing time (ms) FPS CPU usage (%) GPU usage (%) Processing time (ms) FPS
Power Configuration 10 W Desktop Mode
Upload 6.34 36.99 11.46 87.24 7.25 19.64 14 71.4 4.44 15.72 7.293 137
Draw 0.16 11.96 4.329 231 0.36 7.71 2.5 395 0.40 5.67 2.077 481
Download 7.70 29.08 15.053 66.43 5 14.73 8.4 118 3.14 6.53 4.552 220
Power Configuration 20 W + Jetson Clocks (Max Power)
Upload 4.25 6.40 11.357 88 1.45 2.21 2.997 334 0.77 1.30 1.492 670
Draw 0.09 1.59 0.773 1294 0.09 0.82 0.478 2092 0.10 0.66 0.443 2309
Download 2.73 6.43 6.489 154.1 0.94 2.13 1.947 514 0.57 0.84 1.071 933.7

Web rendering by WebkitGTK

The following table shows the CPU usage, GPU usage, processing time and FPS.


Board NVIDIA Jetson Xavier NX
Resolution 4K +1080p +720p
Measurement CPU usage (%) GPU usage (%) Processing time (ms) FPS CPU usage (%) GPU usage (%) Processing time (ms) FPS CPU usage (%) GPU usage (%) Processing time (ms) FPS
Power Configuration 10 W Desktop Mode
Draw 9.2 0 215.425 4.64 9.2 0 52.525 19 6.77 0 23.095 43.3
Power Configuration 20 W + Jetson Clocks (Max Power)[1]
Draw 6.1 0 281.714 3.55 6.3 0 69.137 14.46 5.6 0 28.515 35.1
  • Note: When on mode 20W+Jetson Clocks the frequency of operation is 1.4 GHz and for 10w+Desktop mode the frequency of operation is 1.9 GHz. This is shown for the measurements for processing time in each mode.
  • Note: There is no GPU consumption since we are using a flag that disables the use of GPU for WebkitGTK.
export WEBKIT_DISABLE_COMPOSITING_MODE=1

GStreamer plugin performance

The plugin was tested with an example overlay and a camera, using a Jetson Xavier NX with Jetpack 5.1.1. The measurements were taken with the following pipeline, using gst-perf: 

gst-launch-1.0 -ve nvarguscamerasrc num-buffers=300 ! "video/x-raw(memory:NVMM),height=$H,width=$W,framerate=30/1" ! nvvidconv flip-method=2 ! queue ! htmloverlay url="http://0.0.0.0:8000/overlay.html" enable-js=true web-refresh-rate=10 ! perf ! queue ! nvvidconv ! xvimagesink


Board Jetson Xavier NX
Resolution +720p +1080p +4k
FPS(10W-4core) 166.6167 54.7143 13.4852
FPS(20W-6core & jetson-clocks)[1] 120.5662 56.2988 12.7323

Used overlay

The user overlay (click View Source on the wiki to see the html):

REC
Montreal City, Canada



Previous: Examples/GStreamer_Usage Index Next: Performance/NXP_i.MX_6


  1. ↑ 1.0 1.1 The reduced results with the 20W power mode is expected since the CPU is running at a reduced clock of 1.4GHz compared to the 1.9GHz
Retrieved from "http://developer.ridgerun.com/wiki/index.php?title=OpenGL_Accelerated_HTML_Overlay/Performance/NVIDIA_Jetson&oldid=50532"