mirror of
https://github.com/langhuihui/monibuca.git
synced 2025-12-24 13:48:04 +08:00
229 lines
5.7 KiB
HTML
229 lines
5.7 KiB
HTML
<!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://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
|
|
<script src="../node_modules/jsonpack/main.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>
|
|
$(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 = new URL(
|
|
'index.html?src=' + encodeURIComponent(events.url),
|
|
window.location.href
|
|
).href;
|
|
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>
|