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
|
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Главная</a></li>
<li class="breadcrumb-item active" aria-current="page">Камеры</li>
</ol>
</nav>
<div id="videos" class="camfeeds"></div>
<script>
function hasFallbackSupport() {
var video = document.createElement('video');
return video.canPlayType('application/vnd.apple.mpegurl');
}
function setupHls(video, name, useHls) {
var src = '{{ hls_proto }}://{{ hls_host }}/ipcam/'+name+'/live.m3u8';
{% if hls_access_key %}
src += '?access_key={{ hls_access_key }}';
{% endif %}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
if (useHls) {
var config = {{ hls_opts|json_encode|raw }};
config.xhrSetup = function (xhr,url) {
xhr.withCredentials = true;
};
var hls = new Hls(config);
hls.loadSource(src);
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
} else {
console.warn('hls.js is not supported, trying the native way...')
video.autoplay = true;
video.muted = true;
if (window.browserInfo.ios)
video.setAttribute('controls', 'controls');
video.src = src;
var events = ['canplay'];
{% if video_events %}
events.push('canplay', 'canplaythrough', 'durationchange', 'ended', 'loadeddata', 'loadedmetadata', 'pause', 'play', 'playing', 'progress', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'waiting');
{% endif %}
for (var i = 0; i < events.length; i++) {
var evt = events[i];
(function(evt, video, name) {
video.addEventListener(evt, function(e) {
{% if video_events %}
console.log(name + ': ' + evt, e);
{% endif %}
if (!window.browserInfo.ios && ['canplay', 'loadedmetadata'].includes(evt))
video.play();
})
})(evt, video, name);
}
}
}
function init() {
let useHls = Hls.isSupported();
if (!useHls && !hasFallbackSupport()) {
alert('Neither HLS nor vnd.apple.mpegurl is not supported by your browser.');
return;
}
var cams = {{ cams|json_encode|raw }};
for (var i = 0; i < cams.length; i++) {
var name = cams[i];
var video = document.createElement('video');
// video.setAttribute('height', '400');
video.setAttribute('id', 'video-'+name);
document.getElementById('videos').appendChild(video);
setupHls(video, name, useHls);
}
}
init();
</script>
|
