Debug tools for web

  1. Streamroot Documentation
  2. Web
  3. Getting started on Web

To debug or troubleshoot your web integration, Streamroot has developed three tools, which are detailed blow:

  1. DNA graph,
  2. DNA graph bookmarklet,
  3. DNA stats in console logs bookmarklet.

 

1. DNA graph

Streamroot DNA graph can be added to and shown on any page that is running our technology. The graph provides you with information about how much of the stream is being provided via the CDN versus via DNA one__3_.png. The Streamroot DNA graph also allows you to see the number of users you are connected to two.png and how many megabytes were uploaded from your device to other users three.png. On the right-hand side, you can see an offload percentage, which corresponds to the percentage of data that has been sourced from the DNA network four.png. You can simulate new users locally for testing purposes by clicking on the simulate a user button five.png.

 

 

Integrate the graph within your test page

To include the Streamroot DNA graph in your test page, add the following HTML code.

In the <head> tag

<Head>
    <script src="//tools.streamroot.io/usage-graphs/stable/graphs.js"></script>
</Head>

 

In the <body> tag

<body>
    <div id="streamroot-graphs"></div>
</body>

 

If you see an error message, please visit this FAQ article.

 

2. DNA graph bookmarklet

To use the Streamroot DNA graph on any page, add a bookmarklet in your browser.

Bookmarklet Code

javascript:!function(){var t=document.getElementById("streamroot-graphs");if(t)t.remove(),document.getElementById("streamroot-graphs-script").remove();else{var e=document.createElement("script");t=document.createElement("div"),e.src="https://tools.streamroot.io/usage-graphs/latest/graphs.js",e.setAttribute("id","streamroot-graphs-script"),t.setAttribute("id","streamroot-graphs"),t.style.padding="10px",t.style.position="fixed",t.style.bottom="0%",t.style.width="100%",t.style.zIndex="2147483647",document.body.appendChild(e),document.body.appendChild(t)}}();

To add the bookmarklet in Chrome:

  1. Go to you bookmark manager: chrome://bookmarks/
  2. Right click on the list and select Add Page
  3. Then enter a name for you bookmarklet in the first input, copy paste the bookmarklet code in the second one
  4. Save it, you're set!

add_bookmarklet_chrom.gif

 

If you see an error message, please visit this FAQ article.

 

3. DNA stats in console logs bookmarklet

To display basic DNA stats in your browser, you can copy paste the following snippet: 

!function(){function n(){if(Streamroot.instances.length){var n=Streamroot.instances[0].stats,t=n.allContents.dnaDownload?n.allContents.dnaDownload/(n.allContents.dnaDownload+n.allContents.cdnDownload)*100:0,a={upload:o(n.allContents.dnaUpload),dna:o(n.allContents.dnaDownload),cdn:o(n.allContents.cdnDownload),efficiency:`${t}%`,peers:n.realtime.dnaSources};console.table(a)}else console.warn("Streamrooot not initialized")}function o(n,o=10){if(0===n)return"0B";var t=o+1||1,a=Math.floor(Math.log(n)/Math.log(1e3));return parseFloat((n/1e3**a).toFixed(t))+["B","KB","MB","GB","TB","PB","EB","ZB","YB"][a]}setInterval(()=>{n()},1e4),n()}();

 

 

Related articles