-
Notifications
You must be signed in to change notification settings - Fork 18
/
livestream.htm
245 lines (240 loc) · 7.24 KB
/
livestream.htm
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Live Video - Blue Iris</title>
<script type="text/javascript">
var local_bi_session = "%%SESSION%%";
var local_bi_session_arg = navigator.cookieEnabled ? "" : "&session=" + local_bi_session;
var bi_version = "%%VERSION%%";
var badsession = !local_bi_session || (local_bi_session.length === 11 && local_bi_session.startsWith("%") && local_bi_session.endsWith("%") && local_bi_session.indexOf("SESSION") === 2);
var UrlParameters =
{
loaded: false,
parsed_url_params: {},
Get: function (key)
{
if (!this.loaded)
{
var params = this.parsed_url_params;
window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) { params[key.toLowerCase()] = decodeURIComponent(value); });
this.loaded = true;
}
if (typeof this.parsed_url_params[key.toLowerCase()] !== 'undefined')
return this.parsed_url_params[key.toLowerCase()];
return "";
}
};
function onResize()
{
var dataplayer = getElementWithAttribute("data-player");
if (dataplayer !== null)
{
dataplayer.style.width = window.innerWidth + "px";
dataplayer.style.height = window.innerHeight + "px";
}
}
function getElementWithAttribute(attribute)
{
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++)
if (allElements[i].getAttribute(attribute) !== null)
return allElements[i];
return null;
}
function onStreamingError(obj)
{
var description = "Unknown";
try
{
var code = obj.raw.response.code;
if (code === 503)
description = "Unable to load stream with this camera name.";
else if (code === 403)
{
description = "Session Lost";
location.reload();
return;
}
else
description = obj.description;
}
catch (ex)
{
}
ShowErrorMessage("Video player reports error: " + description);
}
function ShowErrorMessage(message)
{
console.log(message);
var errorDiv = document.createElement("div");
errorDiv.style.position = "absolute";
errorDiv.style.top = "10px";
errorDiv.style.left = "10px";
errorDiv.style.width = "350px";
errorDiv.style.height = "100px";
errorDiv.style.borderStyle = "solid";
errorDiv.style.borderWidth = "3px";
errorDiv.style.borderRadius = "5px";
errorDiv.style.borderColor = "#FF0000";
errorDiv.style.backgroundColor = "#FFFFFF";
errorDiv.style.padding = "10px";
errorDiv.style.color = "#000000";
errorDiv.innerHTML = message;
errorDiv.id = "errordiv";
errorDiv.onclick = function ()
{
errorDiv.remove();
};
document.body.appendChild(errorDiv);
}
/**
* Changes the current URL by removing the specified query string parameter(s) from it.
* @returns {String} Returns null if successful, otherwise returns the new URL if changing the history state failed.
*/
function NavRemoveUrlParams()
{
var url = RemoveUrlParams.apply(this, arguments);
try { history.replaceState(history.state, "", url); return null; } catch (ex) { return url; }
}
function RemoveUrlParams()
{
var s = location.search;
for (var i = 0; i < arguments.length; i++)
{
var param = arguments[i];
var rx = new RegExp('(&|\\?)' + param + '=[^&?#%]+', 'gi');
s = s.replace(rx, "");
while (s.indexOf("&") === 0)
{
if (s.length > 1)
s = s.substr(1);
else
s = "";
}
if (s.length > 0 && s.indexOf("?") === -1)
s = "?" + s;
}
return location.origin + location.pathname + s + location.hash;
}
window.onresize = onResize;
if (badsession)
{
alert("This page can only be loaded from the Blue Iris web server and requires Blue Iris 4.8.2.3 or newer");
}
else
{
if (navigator.cookieEnabled)
NavRemoveUrlParams("session");
document.write('<script src="clappr/clappr.min.js?v=' + bi_version + local_bi_session_arg + '"><\/script>');
}
function getHiddenProp()
{
var prefixes = ['webkit', 'moz', 'ms', 'o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
function documentIsHidden()
{
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
</script>
<style type="text/css">
body
{
background-color: Black;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<div id="player"></div>
</div>
<script type="text/javascript">
console.log("=========================================================================");
console.log("Welcome to livestream.htm");
console.log("Supported URL parameters:");
console.log("* cam=short -- Select camera or group with [short] name");
console.log("* autoplay=0 -- Disables autoplay.");
console.log("* audio=1 -- Unmute at startup. May cause browser to disable autoplay.");
console.log("* mode=2 -- Hide video player controls");
console.log("* mode=3 -- Use browser's standard video player controls");
console.log("=========================================================================");
function SetPlayerState()
{
var visibleNow = !documentIsHidden();
console.log("Tab is " + (visibleNow ? "visible" : "hidden"));
if (player)
{
if (visibleNow)
{
player.play();
player.seek(player.getDuration());
}
else
player.stop();
}
}
var visProp = getHiddenProp();
if (visProp)
{
var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
document.addEventListener(evtname, function ()
{
// Called when page visibility changes.
SetPlayerState();
});
}
if (!badsession)
{
var camId = (UrlParameters.Get("cam") === "" ? "index" : UrlParameters.Get("cam"));
var src = "/h264/" + camId + "/temp.m3u8?session=" + local_bi_session;
var mode = parseInt(UrlParameters.Get("mode"));
var autoplay = UrlParameters.Get("autoplay");
autoplay = autoplay !== "0" && autoplay.toUpperCase() !== "FALSE";
var audio = UrlParameters.Get("audio");
audio = audio === "1" || audio.toUpperCase() === "TRUE";
//if (audio)
// autoplay = false;
var args = { source: src, parentId: "#player", autoPlay: false, mute: !audio, chromeless: false, disableVideoTagContextMenu: true, allowUserInteraction: true, actualLiveTime: true, hlsMinimumDvrSize: 1 };
if (mode === 2 || mode === 3)
{
args.chromeless = true;
args.disableVideoTagContextMenu = false;
}
var player = new Clappr.Player(args);
player.on('playererror', onStreamingError);
player.on('fullscreen', function () { setTimeout(onResize, 0); setTimeout(onResize, 100); });
player.on('ready', function ()
{
setTimeout(function ()
{
onResize();
}, 0);
});
if (autoplay)
SetPlayerState();
onResize();
if (mode === 3)
{
var ele = document.getElementById("player");
if (ele.querySelector)
ele.querySelector("video").setAttribute("controls", "controls");
}
}
</script>
</body>
</html>