add dynamic canvas reporting loading metrics

demo/canvas.js

@@ -0,0 +1,76 @@
+
+  function canvasPushEvent(canvas,event) {
+    if(canvas.canvasEvents === undefined) {
+      canvas.canvasEvents = [];
+    }
+    canvas.canvasEvents.push(event);
+    canvas.canvasMaxTime = event.time + event.latency + event.duration;
+  }
+
+  function canvasFlushEvents(canvas) {
+    canvas.canvasEvents = [];
+  }
+
+  function canvasUpdate(canvas) {
+    var ctx = canvas.getContext('2d');
+    canvas.height = 20*(canvas.canvasEvents.length+1);
+
+    //draw legend
+    var legend = 'start time / latency / load duration / end time';
+    ctx.fillStyle = "green";
+    ctx.font = "12px Arial";
+    ctx.fillText(legend,5,15);
+
+    for (var i =0 ; i < canvas.canvasEvents.length; i++) {
+      canvasDrawEvent(ctx,20*(i+1),canvas.canvasEvents[i]);
+    }
+  }
+
+  var eventNameWidth = 150;
+  var eventLegendWidth = 100;
+
+  function canvasDrawEvent(ctx,yoffset,event) {
+    // draw event name
+    ctx.fillStyle = "black";
+    ctx.font = "15px Arial";
+    ctx.fillText(event.name,5,yoffset+15);
+
+    var networkChartStart = eventNameWidth+eventLegendWidth;
+    var networkChartWidth = ctx.canvas.width-eventNameWidth-eventLegendWidth;
+
+    //draw latency rectangle
+    ctx.fillStyle = "green";
+    var x_start = networkChartStart + networkChartWidth*event.time/ctx.canvas.canvasMaxTime;
+    var x_w = networkChartWidth*event.latency/ctx.canvas.canvasMaxTime;
+    ctx.fillRect(x_start,yoffset,x_w, 15);
+    //draw download rectangle
+    ctx.fillStyle = "blue";
+    x_start = networkChartStart + networkChartWidth*(event.time+event.latency)/ctx.canvas.canvasMaxTime;
+    x_w = networkChartWidth*event.duration/ctx.canvas.canvasMaxTime;
+    ctx.fillRect(x_start,yoffset,x_w, 15);
+
+    //draw legend
+    var legend = event.legend;
+    if (legend === undefined) {
+      var tend = event.time + event.latency + event.duration;
+      legend = event.time + '/' + event.latency + '/' + event.duration + '/' + tend;
+    }
+    ctx.fillStyle = "green";
+    ctx.font = "12px Arial";
+    x_start = eventNameWidth; //*(event.time+event.latency+event.duration)/ctx.canvas.canvasMaxTime;
+    ctx.fillText(legend,x_start+5,yoffset+15);
+  }
+
+  function canvasDrawLegend(canvas, eventIdx) {
+    var ctx = canvas.getContext('2d');
+    // draw event name
+    ctx.fillStyle = "green";
+    ctx.font = "15px Arial";
+    var event = canvas.canvasEvents[eventIdx];
+    var legend = event.legend;
+    if (legend === undefined) {
+      legend = event.name + ' :t/rtt/duration(ms):' + event.time + '/' + event.latency + '/' + event.duration;
+    }
+    ctx.fillText(legend,5,20*(canvas.canvasEvents.length+1));
+
+  }

demo/index.html

@@ -54,8 +54,8 @@ <h1 class="title">HLS Media Sources Demo</h1>
     <!-- #main -->
     <pre id='HlsStatus'></pre>
     <pre id='HlsLevel'></pre>
-    <canvas id="buffered_c" width="640" height="15" onclick="buffered_seek(event)";>
-    </canvas> <br>
+    <canvas id="buffered_c" width="640" height="15" onclick="buffered_seek(event)";></canvas> <br>
+    <canvas id="event_c" width="640" height="15" style="border:1px solid #000000";></canvas><br>
   </div>
   <div id="buffered_log" style="font-size: small;"></div>
 
@@ -85,6 +85,7 @@ <h3> Test Videos </h3>
   <!-- live-reload script -->
   <script src="//localhost:8001"></script>
   <script src="../dist/hls.js"></script>
+  <script src="canvas.js"></script>
   <script>
 
    'use strict';
@@ -133,6 +134,9 @@ <h3> Test Videos </h3>
        hls.debug(true);
        hls.on(hls.Events.FRAMEWORK_READY,function() {
           document.getElementById("HlsStatus").innerHTML = 'attaching URL to video tag';
+          canvasFlushEvents(document.getElementById('event_c'));
+          document.getElementById('event_c').width = window.innerWidth-100;
+          hls.t0 = Date.now();
           hls.attachSource(_url);
        });
        hls.on(hls.Events.INIT_SEGMENT,function(event,data) {
@@ -152,8 +156,36 @@ <h3> Test Videos </h3>
        hls.on(hls.Events.LEVEL_LOADING,function(event,data) {
           document.getElementById("HlsLevel").innerHTML = "manual level:" + hls.manualLevel + ",loading level:" + data.id;
        });
+       hls.on(hls.Events.MANIFEST_LOADED,function(event,data) {
+          var event = {
+            name : "variant manifest",
+            time : data.stats.trequest - hls.t0,
+            latency : data.stats.tfirst - data.stats.trequest,
+            duration : data.stats.tend - data.stats.tfirst,
+          };
+          canvasPushEvent(document.getElementById('event_c'),event);
+          canvasUpdate(document.getElementById('event_c'));
+       });
        hls.on(hls.Events.LEVEL_LOADED,function(event,data) {
           document.getElementById("HlsLevel").innerHTML = "manual level:" + hls.manualLevel + ",last loaded level:" + data.id;
+          var event = {
+            name : "stream manifest @ " + data.id,
+            time : data.stats.trequest - hls.t0,
+            latency : data.stats.tfirst - data.stats.trequest,
+            duration : data.stats.tend - data.stats.tfirst,
+          };
+          canvasPushEvent(document.getElementById('event_c'),event);
+          canvasUpdate(document.getElementById('event_c'));
+       });
+       hls.on(hls.Events.FRAGMENT_LOADED,function(event,data) {
+          var event = {
+            name : "fragment " + data.frag.sn + " @ " + data.levelId,
+            time : data.stats.trequest - hls.t0,
+            latency : data.stats.tfirst - data.stats.trequest,
+            duration : data.stats.tend - data.stats.tfirst,
+          };
+          canvasPushEvent(document.getElementById('event_c'),event);
+          canvasUpdate(document.getElementById('event_c'));
        });
        hls.on(hls.Events.VIDEO_ERROR,function(event,data) {
           hls.destroy();