forked from video-dev/hls.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
metrics.html
86 lines (75 loc) · 4.69 KB
/
metrics.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<head>
<title>hls.js metrics page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">hls.js metrics page</h1>
</header>
</div>
<pre id='HlsDate'></pre>
<pre id='StreamPermalink'></pre>
<input id="metricsData" class="innerControls" type=text value=""/>
window size
<div id="metricsButton">
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(0)">window ALL</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(2000)">2s</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(5000)">5s</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(10000)">10s</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(20000)">20s</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(30000)">30s</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(60000)">60s</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSetSliding(120000)">120s</button><br>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeZoomIn()">Window Zoom In</button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeZoomOut()">Window Zoom Out</button><br>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSlideLeft()"> <<< Window Slide </button>
<button type="button" class="btn btn-xs btn-primary" onclick="timeRangeSlideRight()">Window Slide >>> </button><br>
<button type="button" class="btn btn-xs btn-primary" onclick="windowStart=$('#windowStart').val()">fixed window start(ms)</button>
<input type="text" id='windowStart' defaultValue="0" size="8" onkeydown="if(window.event.keyCode=='13'){windowStart=$('#windowStart').val();}">
<button type="button" class="btn btn-xs btn-primary" onclick="windowEnd=$('#windowEnd').val()">fixed window end(ms)</button>
<input type="text" id='windowEnd' defaultValue="10000" size="8" onkeydown="if(window.event.keyCode=='13'){windowEnd=$('#windowEnd').val();}"><br>
<canvas id="bufferTimerange_c" width="640" height="100" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="bitrateTimerange_c" width="640" height="100" style="border:1px solid #000000";></canvas>
<canvas id="bufferWindow_c" width="640" height="100" style="border:1px solid #000000" onmousemove="windowCanvasonMouseMove(event)";></canvas>
<canvas id="videoEvent_c" width="640" height="15" style="border:1px solid #000000";></canvas>
<canvas id="loadEvent_c" width="640" height="15" style="border:1px solid #000000";></canvas><br>
</div>
<script src="canvas.js"></script>
<script src="metrics.js"></script>
<script src="jsonpack.js"></script>
<script>
$(document).ready(function() {
$('#metricsData').change(function() { events = jsonpack.unpack(atob($('#metricsData').val())); updateMetrics(); });
});
var data = location.search.split('data=')[1] || location.hash.split('data=')[1],events;
if (data) {
events = jsonpack.unpack(atob(decodeURIComponent(data)));
updateMetrics();
}
function updateMetrics() {
var hlsLink = document.URL.substr(0,document.URL.lastIndexOf("/")+1) + 'index.html?src=' + encodeURIComponent(events.url);
var playlistLink = document.createElement("a");
playlistLink.setAttribute("href", events.url);
playlistLink.textContent = events.url;
var replayLink = document.createElement("a");
replayLink.setAttribute("href", hlsLink);
replayLink.textContent = hlsLink;
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('playlist: '));
fragment.appendChild(playlistLink);
fragment.appendChild(document.createElement("br"));
fragment.appendChild(document.createTextNode('replay: '));
fragment.appendChild(replayLink);
$("#StreamPermalink").html(fragment);
$("#HlsDate").text("session Start Date:" + new Date(events.t0));
metricsDisplayed=true;
showMetrics();
refreshCanvas();
}
</script>
</body>