API tools faq
paste
Advertisement
Guest User

Quick WebRTC Video Quality Checker (Fixed version)

a guest
Jul 29th, 2023
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.80 KB | Fixit | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. NOTE: FIXED VERSION!
  6. PLEASE DO NOT USE https://pastebin.com/YcR3dGYh AS THE LOOKUP TABLE CONTAINED WRONG VALUES FOR LEVEL 1, 2, 3, 4, 5 and 6!
  7.  
  8.  
  9. https://datatracker.ietf.org/doc/html/rfc6184
  10.  
  11. Description
  12. This quick and dirty tool identifies the level_idc and does a lookup for you.
  13.  
  14. Author
  15. DaveLawang, https://community.cisco.com/, July 2023
  16. https://community.cisco.com/t5/telepresence-and-video-infrastructure/cms-what-causes-the-bad-presentation-quality-example-attached/m-p/4893159
  17.  
  18. How to use
  19. 1) Fire up your browser
  20. 2) Start your WebRTC session
  21. 3) Open another tab and enter edge://webrtc-internals or chrome://webrtc-internals (Firefox: about:webrtc)
  22. 4) Ctrl + F -> search for "profile-level-id"
  23. 5) Copy value and insert it here
  24.  
  25. Sidenote:
  26. You can copy & paste this whole code here to run it in the browser:
  27. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
  28. -->
  29.  
  30.  
  31. <style>
  32. table, th, td {
  33.     border: 0px;
  34. }
  35. #screenresolution, #userInput {
  36.     border:             2px solid red;
  37.     border-radius:      4px;
  38.     background-color:   #ff3;
  39.     height:             35px;
  40.     width:              450px;
  41.     color:              #f00;
  42. }
  43.  
  44. .boldresult {
  45.     font-size:      1.2em;
  46.     font-weight:    bold;
  47.     font-family:    sans-serif;
  48.     text-align:     center;
  49.   }
  50. .button {}
  51. </style>
  52.  
  53. </head>
  54. <body onload="checkScreenresolution();">
  55.  
  56.  
  57. <h1>Quick WebRTC Video Quality Checker</h1>
  58. <p>
  59. <h2>Description</h2>
  60. You experience bad video quality in an online meeting?<br />Blurred image, low resolution, lags, macroblocking? This quick and dirty tool identifies what maximum resolution/bitrate your browser has picked for the meeting.<br /> This tool identifies the level_idc (<a href="https://datatracker.ietf.org/doc/html/rfc6184
  61. " target="_blank">RFC6184</a>) and does a lookup for you.<br />
  62. <br />
  63. <h1>How to use</h2>
  64. <ol>
  65. <li>Fire up your browser</li>
  66. <li>Start your WebRTC session</li>
  67. <li>Open another tab and enter <span style="color: #f00;">edge://webrtc-internals</span> or <span style="color: #f00;">chrome://webrtc-internals</span> (Firefox: about:webrtc)</li>
  68. <li>Ctrl + F -> search for "<span style="color: #f00;">profile-level-id</span>" <span style="color: #3b3;">//Make sure you have picked the right video stream</span></li>
  69. <li>Copy value and insert it here</li>
  70. </ol>
  71. </p>
  72.  
  73.  
  74. <table>
  75.   <tr>
  76.     <td>Current screen resolution:</td>
  77.     <td id="screenresolution" class="boldresult"></td>
  78.   </tr>
  79.     <tr>
  80.     <td>profile-level-id:</td>
  81.     <td><input type="text" id="userInput" placeholder="Insert profile-level-id value here (XXXXXX)..."  ></td>
  82.   </tr>
  83.     </tr>
  84.     <tr>
  85.     <td></td>
  86.     <td style="text-align: center;"><button onclick="myFunction()" id="analyze">Analyze</button></td>
  87.   </tr>
  88. </table>
  89.  
  90. <h1>What your stream was set to (Displayed after analysis)</h1>
  91. <div id="result" style="color: #f00;"></div>
  92. <div id="lookuptable"></div>
  93.  
  94. <script>
  95. //Lookup array, source https://en.wikipedia.org/wiki/Advanced_Video_Coding#Levels
  96. var tableArr = [
  97. ["level_idc (rfc6184)",     "Level",    "Maximum decoding speed (macroblocks/s)",   "Maximum frame size (macroblocks)",     "Maximum video bit rate for video coding layer (VCL) (Constrained Baseline, Baseline, Extended and Main Profiles) (kbits/s)", "Examples for high resolution @ highest frame rate (maximum stored frames)"],
  98. ["0a",  "1",    "1,485",    "99",   "64",   "176×144@15.0 (4)" ],
  99. ["1b",  "1b",   "1,485",    "99",   "128",  "176×144@15.0 (4)" ],
  100. ["0b",  "1.1",  "3,000",    "396",  "192",  "352×288@7.5 (2)" ],
  101. ["0c",  "1.2",  "6,000",    "396",  "384",  "352×288@15.2 (6)" ],
  102. ["0d",  "1.3",  "11,880",   "396",  "768",  "352×288@30.0 (6)" ],
  103. ["14",  "2",    "11,880",   "396",  "2,000",    "352×288@30.0 (6)" ],
  104. ["15",  "2.1",  "19,800",   "792",  "4,000",    "352×576@25.0 (6)" ],
  105. ["16",  "2.2",  "20,250",   "1,620",    "4,000",    "720×576@12.5 (5)" ],
  106. ["1e",  "3",    "40,500",   "1,620",    "10,000",   "720×576@25.0 (5)" ],
  107. ["1f",  "3.1",  "108,000",  "3,600",    "14,000",   "1,280×720@30.0 (5)" ],
  108. ["20",  "3.2",  "216,000",  "5,120",    "20,000",   "1,280×1,024@42.2 (4)" ],
  109. ["28",  "4",    "245,760",  "8,192",    "20,000",   "2,048×1,024@30.0 (4)" ],
  110. ["29",  "4.1",  "245,760",  "8,192",    "50,000",   "2,048×1,024@30.0 (4)" ],
  111. ["2a",  "4.2",  "522,240",  "8,704",    "50,000",   "2,048×1,080@60.0 (4)" ],
  112. ["32",  "5",    "589,824",  "22,080",   "135,000",  "3,672×1,536@26.7 (5)" ],
  113. ["33",  "5.1",  "983,040",  "36,864",   "240,000",  "4,096×2,304@26.7 (5)" ],
  114. ["34",  "5.2",  "2,073,600",    "36,864",   "240,000",  "4,096×2,304@56.3 (5)" ],
  115. ["3c",  "6",    "4,177,920",    "139,264",  "240,000",  "8,192×4,320@30.2 (5)" ],
  116. ["3d",  "6.1",  "8,355,840",    "139,264",  "480,000",  "8,192×4,320@60.4 (5)" ],
  117. ["3e",  "6.2",  "16,711,680",   "139,264",  "800,000",  "8,192×4,320@120.9 (5)" ]
  118. ]
  119.  
  120. function checkScreenresolution() {
  121.  document.getElementById("screenresolution").innerHTML = screen.width + "x" + screen.height ;
  122.  document.getElementById("userInput").focus();
  123. }
  124.  
  125. var input = document.getElementById("userInput");
  126. input.addEventListener("keypress", function(event) {
  127.   if (event.key === "Enter") {
  128.     event.preventDefault();
  129.     document.getElementById("analyze").click();
  130.   }
  131. })
  132.  
  133. function myFunction() {
  134.   var profile_level_id = document.getElementById("userInput").value;
  135.   profile_level_id = profile_level_id.replace(/\s+/, "");   //sanitization, remove whitespaces
  136.   var level_idc = profile_level_id.slice(-2);               //Get the level_idc according to rfc6184
  137.  
  138.   var value_found = false;
  139.   var result = "";
  140.  
  141.   //create a Table Object
  142.   let table = document.createElement('table');
  143.   //iterate over every array(row) within tableArr
  144.   var rownumber = 0;
  145.   for (let row of tableArr) {
  146.   //Insert a new row element into the table element
  147.     var temprow = table.insertRow();
  148.     temprow.style.align = "center";
  149.   //Iterate over every index(cell) in each array(row)
  150.  
  151.     for (let cell of row) {
  152.    
  153.   //While iterating over the index(cell)
  154.   //insert a cell into the table element
  155.       let newCell = table.rows[table.rows.length - 1].insertCell();
  156.       if(rownumber==0) {temprow.style.backgroundColor = "#bba";  temprow.style.fontWeight = "bold";}
  157.      
  158.   //add text to the created cell element
  159.       if(cell == level_idc.toLowerCase()) {   temprow.style.backgroundColor = "#ff0"; value_found=true; }
  160.       newCell.textContent = cell;
  161.       newCell.align = "center";
  162.      
  163.       rownumber++;
  164.     }
  165.   }
  166.   //append the compiled table to the DOM
  167.   document.getElementById("lookuptable").innerHTML = "";
  168.   document.getElementById("lookuptable").appendChild(table);
  169.  
  170.  
  171.   if(value_found){result="";}
  172.   else{result="<h1>Error: Value not found in the lookup table!</h1>Make sure you haven't accidentally pasted unwanted characters. It should be a six digit, hexadecimal value.<br /><br />";}
  173.   document.getElementById("result").innerHTML = result;
  174.  
  175. }
  176.  
  177. </script>
  178.  
  179. </body>
  180. </html>
Tags: codec h264 webrtc rfc6184
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!