This repository has been archived by the owner on Jan 16, 2023. It is now read-only.
forked from Dash-Industry-Forum/dash.js
-
Notifications
You must be signed in to change notification settings - Fork 2
/
monitoring.html
109 lines (95 loc) · 3.93 KB
/
monitoring.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Monitoring stream example</title>
<script src="../../dist/dash.all.debug.js"></script>
<!--dash.all.min.js should be used in production over dash.all.debug.js
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->
<script class="code">
function init() {
var video,
player,
url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
video = document.querySelector("video");
player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
player.on(dashjs.MediaPlayer.events["PLAYBACK_ENDED"], function () {
clearInterval(eventPoller);
clearInterval(bitrateCalculator);
});
var eventPoller = setInterval(function () {
var streamInfo = player.getActiveStream().getStreamInfo();
var dashMetrics = player.getDashMetrics();
var dashAdapter = player.getDashAdapter();
if (dashMetrics && streamInfo) {
const periodIdx = streamInfo.index;
var repSwitch = dashMetrics.getCurrentRepresentationSwitch('video', true);
var bufferLevel = dashMetrics.getCurrentBufferLevel('video', true);
var bitrate = repSwitch ? Math.round(dashAdapter.getBandwidthForRepresentation(repSwitch.to, periodIdx) / 1000) : NaN;
var adaptation = dashAdapter.getAdaptationForType(periodIdx, 'video', streamInfo)
var frameRate = adaptation.Representation_asArray.find(function (rep) {
return rep.id === repSwitch.to
}).frameRate;
document.getElementById('bufferLevel').innerText = bufferLevel + " secs";
document.getElementById('framerate').innerText = frameRate + " fps";
document.getElementById('reportedBitrate').innerText = bitrate + " Kbps";
}
}, 1000);
if (video.webkitVideoDecodedByteCount !== undefined) {
var lastDecodedByteCount = 0;
const bitrateInterval = 5;
var bitrateCalculator = setInterval(function () {
var calculatedBitrate = (((video.webkitVideoDecodedByteCount - lastDecodedByteCount) / 1000) * 8) / bitrateInterval;
document.getElementById('calculatedBitrate').innerText = Math.round(calculatedBitrate) + " Kbps";
lastDecodedByteCount = video.webkitVideoDecodedByteCount;
}, bitrateInterval * 1000);
} else {
document.getElementById('chrome-only').style.display = "none";
}
}
</script>
<style>
video {
width: 640px;
height: 360px;
}
#container {
display: inline-block;
}
#container > div {
display: inline-block;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="video-container">
<video data-dashjs-player autoplay controls="true">
</video>
</div>
<div>
<strong>Reported bitrate:</strong>
<span id="reportedBitrate"></span>
<br/>
<strong>Buffer level:</strong>
<span id="bufferLevel"></span>
<div id="chrome-only">
<strong>Calculated bitrate:</strong>
<span id="calculatedBitrate"></span>
</div>
<strong>Framerate:</strong>
<span id="framerate"></span>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>