diff options
Diffstat (limited to 'localwebsite')
| -rw-r--r-- | localwebsite/config.php | 2 | ||||
| -rw-r--r-- | localwebsite/handlers/MiscHandler.php | 5 | ||||
| -rw-r--r-- | localwebsite/htdocs/assets/app.js | 20 | ||||
| -rw-r--r-- | localwebsite/templates-web/cams.twig | 28 |
4 files changed, 48 insertions, 7 deletions
diff --git a/localwebsite/config.php b/localwebsite/config.php index 262aeae..6b595a4 100644 --- a/localwebsite/config.php +++ b/localwebsite/config.php @@ -50,7 +50,7 @@ return [ 'static' => [ 'app.css' => 8, - 'app.js' => 1, + 'app.js' => 2, 'polyfills.js' => 1, 'modem.js' => 1, 'inverter.js' => 2, diff --git a/localwebsite/handlers/MiscHandler.php b/localwebsite/handlers/MiscHandler.php index 61a82e0..486ff45 100644 --- a/localwebsite/handlers/MiscHandler.php +++ b/localwebsite/handlers/MiscHandler.php @@ -52,7 +52,7 @@ class MiscHandler extends RequestHandler public function GET_cams() { global $config; - list($hls_debug) = $this->input('b:hls_debug'); + list($hls_debug, $video_events) = $this->input('b:hls_debug, b:video_events'); $hls_opts = [ 'startPosition' => -1 @@ -65,7 +65,8 @@ class MiscHandler extends RequestHandler $this->tpl->set([ 'hls_host' => $config['cam_hls_host'], 'hls_opts' => $hls_opts, - 'cams' => $config['cam_list'] + 'cams' => $config['cam_list'], + 'video_events' => $video_events ]); $this->tpl->set_title('Камеры'); $this->tpl->render_page('cams.twig'); diff --git a/localwebsite/htdocs/assets/app.js b/localwebsite/htdocs/assets/app.js index da5052d..c08490f 100644 --- a/localwebsite/htdocs/assets/app.js +++ b/localwebsite/htdocs/assets/app.js @@ -41,4 +41,22 @@ function extend(a, b) { function ge(id) { return document.getElementById(id); -}
\ No newline at end of file +} + +(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), + }; +})(); diff --git a/localwebsite/templates-web/cams.twig b/localwebsite/templates-web/cams.twig index 5d25a9d..cf6009c 100644 --- a/localwebsite/templates-web/cams.twig +++ b/localwebsite/templates-web/cams.twig @@ -30,10 +30,32 @@ function setupHls(video, name, useHls) { 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; - video.addEventListener('canplay', function () { - video.play(); - }); + + 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); + } } } |