support street cameras

7 files changed, 101 insertions, 2 deletions

diff --git a/localwebsite/config.php b/localwebsite/config.php
index 47be2f7..262aeae 100644
--- a/localwebsite/config.php
+++ b/localwebsite/config.php
@@ -49,10 +49,15 @@ return [
     ],
 
     'static' => [
-        'app.css' => 6,
+        'app.css' => 8,
         'app.js' => 1,
         'polyfills.js' => 1,
         'modem.js' => 1,
         'inverter.js' => 2,
+    ],
+
+    'cam_hls_host' => '192.168.1.1',
+    'cam_list' => [
+        // fill me with names
     ]
 ];
diff --git a/localwebsite/engine/tpl.php b/localwebsite/engine/tpl.php
index a12807d..3d18c9a 100644
--- a/localwebsite/engine/tpl.php
+++ b/localwebsite/engine/tpl.php
@@ -20,7 +20,7 @@ abstract class base_tpl {
     public function __construct($templates_dir, $cache_dir) {
         global $config;
 
-        $cl = get_called_class();
+        // $cl = get_called_class();
 
         $this->twig = self::twig_instance($templates_dir, $cache_dir, $config['is_dev']);
         $this->static_time = time();
diff --git a/localwebsite/handlers/MiscHandler.php b/localwebsite/handlers/MiscHandler.php
index 4f35981..314920a 100644
--- a/localwebsite/handlers/MiscHandler.php
+++ b/localwebsite/handlers/MiscHandler.php
@@ -49,4 +49,17 @@ class MiscHandler extends RequestHandler
         $this->tpl->render_page('pump.twig');
     }
 
+    public function GET_cams() {
+        global $config;
+
+        $this->tpl->add_external_static('js', 'https://cdn.jsdelivr.net/npm/hls.js@latest');
+
+        $this->tpl->set([
+            'hls_host' => $config['cam_hls_host'],
+            'cams' => $config['cam_list']
+        ]);
+        $this->tpl->set_title('Камеры');
+        $this->tpl->render_page('cams.twig');
+    }
+
 }
\ No newline at end of file
diff --git a/localwebsite/htdocs/assets/app.css b/localwebsite/htdocs/assets/app.css
index cab674e..73e0667 100644
--- a/localwebsite/htdocs/assets/app.css
+++ b/localwebsite/htdocs/assets/app.css
@@ -150,4 +150,19 @@
 @keyframes sk-circleFadeDelay {
     0%, 39%, 100% { opacity: 0; }
     40% { opacity: 1; }
+}
+
+/* cams page */
+.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;
 }
\ No newline at end of file
diff --git a/localwebsite/htdocs/index.php b/localwebsite/htdocs/index.php
index 3961c2c..65afc72 100644
--- a/localwebsite/htdocs/index.php
+++ b/localwebsite/htdocs/index.php
@@ -25,6 +25,7 @@ $router->add('/',        'Misc main');
 $router->add('sensors/', 'Misc sensors_page');
 $router->add('pump/',    'Misc pump_page');
 $router->add('phpinfo/', 'Misc phpinfo');
+$router->add('cams/',    'Misc cams');
 
 
 $route = routerFind($router);
diff --git a/localwebsite/templates-web/cams.twig b/localwebsite/templates-web/cams.twig
new file mode 100644
index 0000000..2963fdb
--- /dev/null
+++ b/localwebsite/templates-web/cams.twig
@@ -0,0 +1,64 @@
+<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>
+<video height="300" id="video"></video>
+
+<script>
+function hasFallbackSupport() {
+    var video = document.createElement('video');
+    return video.canPlayType('application/vnd.apple.mpegurl');
+}
+
+function setupHls(video, name, useHls) {
+    var src = 'http://{{ hls_host }}/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 hls = new Hls({
+            // debug: true,
+            startPosition: -1,
+        });
+        hls.loadSource(src);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+            video.muted = true;
+            video.play();
+        });
+    } else {
+        video.src = src;
+        video.addEventListener('canplay', function () {
+            video.play();
+        });
+    }
+}
+
+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>
\ No newline at end of file
diff --git a/localwebsite/templates-web/index.twig b/localwebsite/templates-web/index.twig
index d293cfd..1635459 100644
--- a/localwebsite/templates-web/index.twig
+++ b/localwebsite/templates-web/index.twig
@@ -17,5 +17,6 @@
     <li class="list-group-item"><a href="/inverter/">Инвертор</a></li>
     <li class="list-group-item"><a href="/pump/">Насос</a></li>
     <li class="list-group-item"><a href="/sensors/">Датчики</a></li>
+    <li class="list-group-item"><a href="/cams/">Камеры</a></li>
   </ul>
 </div>
\ No newline at end of file