diff --git a/main.css b/main.css index 7924777..2d32774 100644 --- a/main.css +++ b/main.css @@ -92,6 +92,16 @@ button.grey { color: white; } +button.red { + -webkit-app-region: no-drag; + padding: 10px; + margin: 10px 0px; + cursor: pointer; + border-radius: 2px; + background-color: var(--red-accent); + color: white; +} + button { -webkit-app-region: no-drag; padding: 7px 10px 6px 10px; diff --git a/speedtest.css b/speedtest.css new file mode 100644 index 0000000..8d70df1 --- /dev/null +++ b/speedtest.css @@ -0,0 +1,119 @@ +body { + background-color: #141926; +} + +h1 { + color: white; + margin: 20px 0px; +} + +h1 small { + display: block; + margin-top: 0.5em; + font-size: 0.5em; +} + +#container, #graphs, #log { + width: 80%; + margin: 0 auto; +} + +#explanation { + color: white; + font-family: sans-serif; + width: 80%; + margin: 0 auto; + margin-top: 20px; +} + +#explanation h2 { + border-bottom: 1px solid #383838; + margin-bottom: 10px; + padding-bottom: 5px; +} + +iframe { + min-height: 30vh; + width: 39vw; +} + +#controls { + margin-top: 20px; +} + +#controls button { + margin: 5px; +} + +canvas { + background-color: black; + margin: 20px; +} + +#log { + margin-top: 20px; + background: #2a2a2a; + padding: 20px 0px; + border: 1px solid #383838; +} + +#log ul { + margin: 20px; + list-style: none; + color: #cacaca; + max-height: 20vh; + overflow: auto; + overflow-x: hidden; +} + +#graphs { + display: flex; + margin-top: 20px; + background: #2a2a2a; + padding: 20px 0px; + border: 1px solid #383838; +} + +.graph { + flex: 1; + position: relative; +} + +.graph h2, #log h2 { + margin: 0px 20px; + font-size: 1em; +} + +.graph > span { + position: absolute; + bottom: 30px; + left: 30px; + color: #cacaca; + font-weight: bold; +} + +ol { + margin-left: 20px; + margin-top: 30px; +} + +@media only screen + and (min-device-width: 375px) + and (max-device-width: 812px) + and (orientation: portrait) { + + #container { + width: 90%; + } + + #graphs { + flex-direction: column; + } + + iframe { + width: 90vw; + min-height: 0; + } + } + + #statsdiv {display: none;} \ No newline at end of file diff --git a/speedtest.html b/speedtest.html index 5de1a40..7668132 100644 --- a/speedtest.html +++ b/speedtest.html @@ -1,192 +1,343 @@ -OBSN Speed Test - - + + + +
+

+ OBS.Ninja Speed Test - prototype version + (Tests connection to TURN server and back) +

+
+
+
+

Bitrate (kbps)

+ 0 + +
+ +
+

Buffer delay (ms)

+ 0 + +
+ +
+

Packet Loss (%)

+ 0 + +
+
+
+

Log

+ +
- if ("stats" in e.data){ - var out = ""; - - for (var streamID in e.data.stats.inbound_stats){ - out += printValues(e.data.stats.inbound_stats[streamID]); - } - if (out.split("Bitrate_in_kbps").length>1){ - document.getElementById("statsdiv").innerHTML = "Bitrate_in_kbps"+out.split("Bitrate_in_kbps")[1]; - } - } - }); - - -} - -function printValues( obj) { - var out = ""; - for (var key in obj) { - if (typeof obj[key] === "object") { - out +="
"; - out += printValues(obj[key]); - } else { - if (key.startsWith("_")){} else { - out +=""+key+": "+obj[key]+"
"; - } - } - } - return out; -} - - - -
-
-
-

OBS.Ninja Speed Test - prototype version

-(Tests connection to TURN server and back)

-
  • 1.Select your camera.
    • -
  • 2.Hit start
    • -
  • 3.Wait for the video to load side-by-side. *If it does not auto-load within 20s, refresh and try again.*
    • -
  • 4.Stats will load on the right-hand side of the page here. (or press CTRL + LeftClick on the new video to open stats that way)
    • -
  • 5.Bitrate_in_kbps, Buffer_Delay_in_ms, and packetLoss_percentage are important connection quality metrics
    • -
  • 6.Increase the video bitrate by pressing High Bitrate; it should approach 6000-kbps if the network allows.
    • -
    -
    -
    - - \ No newline at end of file +
    +

    How to use

    +
      +
    1. Select your camera.
      2. +
    2. Hit start
      3. +
    3. + Wait for the video to load side-by-side. *If it does not auto-load + within 20s, refresh and try again.* +
      4. +
    4. + Stats will load on the right-hand side of the page here. (or press + CTRL + LeftClick on the new video to open stats that way) +
      5. +
    5. + Bitrate, Buffer delay, and packet loss are + important connection quality metrics +
      6. +
    6. + Change the video bitrate by pressing the buttons below the video. + It should approach 6000-kbps if the network allows. +
      7. +
    +
    +
    + + + +