cams page frontend refator
This commit is contained in:
Evgeny Zinoviev
parent
f1276e23d8
commit
9f4cee9213
@ -49,8 +49,8 @@ return [
|
||||
],
|
||||
|
||||
'static' => [
|
||||
'app.css' => 9,
|
||||
'app.js' => 2,
|
||||
'app.css' => 10,
|
||||
'app.js' => 4,
|
||||
'polyfills.js' => 1,
|
||||
'modem.js' => 1,
|
||||
'inverter.js' => 2,
|
||||
|
||||
@ -152,25 +152,22 @@
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* cams page */
|
||||
@media only screen and (min-width: 640px) {
|
||||
.camfeeds {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.camfeeds > video {
|
||||
display: flex;
|
||||
flex-basis: calc(50% - 20px);
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: calc(50% - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
.camfeeds:not(.is_mobile) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.camfeeds:not(.is_mobile) > video {
|
||||
display: flex;
|
||||
flex-basis: calc(50% - 20px);
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: calc(50% - 10px);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.camfeeds.is_mobile > video {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media only screen and (max-width: 639px) {
|
||||
.camfeeds > video {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
var ajax = {
|
||||
(function() {
|
||||
var RE_WHITESPACE = /[\t\r\n\f]/g
|
||||
|
||||
window.ajax = {
|
||||
get: function(url, data) {
|
||||
if (typeof data == 'object') {
|
||||
var index = 0;
|
||||
@ -35,28 +38,138 @@ var ajax = {
|
||||
}
|
||||
};
|
||||
|
||||
function extend(a, b) {
|
||||
window.extend = function(a, b) {
|
||||
return Object.assign(a, b);
|
||||
}
|
||||
|
||||
function ge(id) {
|
||||
window.ge = function(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
(function() {
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
window.browserInfo = {
|
||||
version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
|
||||
//opera: /opera/i.test(ua),
|
||||
msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
|
||||
mozilla: /firefox/i.test(ua),
|
||||
android: /android/i.test(ua),
|
||||
mac: /mac/i.test(ua),
|
||||
samsungBrowser: /samsungbrowser/i.test(ua),
|
||||
chrome: /chrome/i.test(ua),
|
||||
safari: /safari/i.test(ua),
|
||||
mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
|
||||
operaMini: /opera mini/i.test(ua),
|
||||
ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
|
||||
};
|
||||
})();
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
window.browserInfo = {
|
||||
version: (ua.match(/.+(?:me|ox|on|rv|it|ra|ie)[\/: ]([\d.]+)/) || [0,'0'])[1],
|
||||
//opera: /opera/i.test(ua),
|
||||
msie: (/msie/i.test(ua) && !/opera/i.test(ua)) || /trident/i.test(ua),
|
||||
mozilla: /firefox/i.test(ua),
|
||||
android: /android/i.test(ua),
|
||||
mac: /mac/i.test(ua),
|
||||
samsungBrowser: /samsungbrowser/i.test(ua),
|
||||
chrome: /chrome/i.test(ua),
|
||||
safari: /safari/i.test(ua),
|
||||
mobile: /iphone|ipod|ipad|opera mini|opera mobi|iemobile|android/i.test(ua),
|
||||
operaMini: /opera mini/i.test(ua),
|
||||
ios: /iphone|ipod|ipad|watchos/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),
|
||||
};
|
||||
|
||||
window.isTouchDevice = function() {
|
||||
return 'ontouchstart' in window || navigator.msMaxTouchPoints;
|
||||
}
|
||||
|
||||
window.hasClass = function(el, name) {
|
||||
if (!el)
|
||||
throw new Error('hasClass: invalid element')
|
||||
|
||||
if (el.nodeType !== 1)
|
||||
throw new Error('hasClass: expected nodeType is 1, got' + el.nodeType)
|
||||
|
||||
if (window.DOMTokenList && el.classList instanceof DOMTokenList) {
|
||||
return el.classList.contains(name)
|
||||
} else {
|
||||
return (" " + el.className + " ").replace(RE_WHITESPACE, " ").indexOf(" " + name + " ") >= 0
|
||||
}
|
||||
}
|
||||
|
||||
window.addClass = function(el, name) {
|
||||
if (!hasClass(el, name)) {
|
||||
el.className = (el.className ? el.className + ' ' : '') + name;
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
window.Cameras = {
|
||||
hlsOptions: null,
|
||||
hlsHost: null,
|
||||
hlsProto: null,
|
||||
debugVideoEvents: false,
|
||||
|
||||
setupHls: function(video, name, useHls) {
|
||||
var src = this.hlsProto + '://' + this.hlsHost + '/ipcam/' + name + '/live.m3u8';
|
||||
|
||||
// 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 = this.hlsOptions;
|
||||
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 (this.debugVideoEvents)
|
||||
events.push('canplay', 'canplaythrough', 'durationchange', 'ended', 'loadeddata', 'loadedmetadata', 'pause', 'play', 'playing', 'progress', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'waiting');
|
||||
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var evt = events[i];
|
||||
(function(evt, video, name) {
|
||||
video.addEventListener(evt, function(e) {
|
||||
if (this.debugVideoEvents)
|
||||
console.log(name + ': ' + evt, e);
|
||||
|
||||
if (!window.browserInfo.ios && ['canplay', 'loadedmetadata'].includes(evt))
|
||||
video.play();
|
||||
})
|
||||
})(evt, video, name);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
init: function(cams, options, proto, host, debugVideoEvents) {
|
||||
// this.cams = cams;
|
||||
this.hlsOptions = options;
|
||||
this.hlsProto = proto;
|
||||
this.hlsHost = host;
|
||||
this.debugVideoEvents = debugVideoEvents
|
||||
|
||||
let useHls = Hls.isSupported();
|
||||
if (!useHls && !this.hasFallbackSupport()) {
|
||||
alert('Neither HLS nor vnd.apple.mpegurl is not supported by your browser.');
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < cams.length; i++) {
|
||||
var name = cams[i];
|
||||
var video = document.createElement('video');
|
||||
video.setAttribute('id', 'video-'+name);
|
||||
document.getElementById('videos').appendChild(video);
|
||||
|
||||
this.setupHls(video, name, useHls);
|
||||
}
|
||||
},
|
||||
|
||||
hasFallbackSupport: function() {
|
||||
var video = document.createElement('video');
|
||||
return video.canPlayType('application/vnd.apple.mpegurl');
|
||||
},
|
||||
};
|
||||
})();
|
||||
@ -6,84 +6,9 @@
|
||||
|
||||
<div id="videos" class="camfeeds"></div>
|
||||
|
||||
<script>
|
||||
function hasFallbackSupport() {
|
||||
var video = document.createElement('video');
|
||||
return video.canPlayType('application/vnd.apple.mpegurl');
|
||||
{% js %}
|
||||
if (isTouchDevice()) {
|
||||
addClass(ge('videos'), 'is_mobile');
|
||||
}
|
||||
|
||||
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>
|
||||
Cameras.init({{ cams|json_encode|raw }}, {{ hls_opts|json_encode|raw }}, '{{ hls_proto }}', '{{ hls_host }}', {{ video_events ? 'true' : 'false' }});
|
||||
{% endjs %}
|
||||
Loading…
x
Reference in New Issue
Block a user