web_kbn: basic support of cams hls streaming

2 files changed, 28 insertions, 145 deletions

diff --git a/web/kbn_assets/app.js b/web/kbn_assets/app.js
index 6081681..82b2db1 100644
--- a/web/kbn_assets/app.js
+++ b/web/kbn_assets/app.js
@@ -122,9 +122,8 @@ function indexInit() {
     }
 }
 
-window.Cameras = {
+var Cameras = {
     hlsOptions: null,
-    h265webjsOptions: null,
     host: null,
     proto: null,
     hlsDebugVideoEvents: false,
@@ -185,126 +184,10 @@ window.Cameras = {
         }
     },
 
-    setupH265WebJS: function(videoContainer, name) {
-        var containerHeightFixed = false;
-        var config = {
-            player: 'video-'+name,
-            width: videoContainer.offsetWidth,
-            height: parseInt(videoContainer.offsetWidth * 9 / 16, 10),
-            accurateSeek: true,
-            token: this.h265webjsOptions.token,
-            extInfo: {
-                moovStartFlag: true,
-                readyShow: true,
-                autoPlay: true,
-                rawFps: 15,
-            }
-        };
-
-        var mediaInfo;
-        var player = window.new265webjs(this.getUrl(name), config);
-
-        player.onSeekStart = (pts) => {
-            console.log(name + ": onSeekStart:" + pts);
-        };
-
-        player.onSeekFinish = () => {
-            console.log(name + ": onSeekFinish");
-        };
-
-        player.onPlayFinish = () => {
-            console.log(name + ": onPlayFinish");
-        };
-
-        player.onRender = (width, height, imageBufferY, imageBufferB, imageBufferR) => {
-            // console.log(name + ": onRender");
-            if (!containerHeightFixed) {
-                var ratio = height / width;
-                videoContainer.style.width = parseInt(videoContainer.offsetWidth * ratio, 10)+'px';
-                containerHeightFixed = true;
-            }
-        };
-
-        player.onOpenFullScreen = () => {
-            console.log(name + ": onOpenFullScreen");
-        };
-
-        player.onCloseFullScreen = () => {
-            console.log(name + ": onCloseFullScreen");
-        };
-
-        player.onSeekFinish = () => {
-            console.log(name + ": onSeekFinish");
-        };
-
-        player.onLoadCache = () => {
-            console.log(name + ": onLoadCache");
-        };
-
-        player.onLoadCacheFinshed = () => {
-            console.log(name + ": onLoadCacheFinshed");
-        };
-
-        player.onReadyShowDone = () => {
-            // console.log(name + ": onReadyShowDone:【You can play now】");
-            player.play()
-        };
-
-        player.onLoadFinish = () => {
-            console.log(name + ": onLoadFinish");
-
-            player.setVoice(1.0);
-
-            mediaInfo = player.mediaInfo();
-            console.log("onLoadFinish mediaInfo===========>", mediaInfo);
-
-            var codecName = "h265";
-            if (mediaInfo.meta.isHEVC === false) {
-                console.log(name + ": onLoadFinish is Not HEVC/H.265");
-                codecName = "h264";
-            } else {
-                console.log(name + ": onLoadFinish is HEVC/H.265");
-            }
-
-            console.log(name + ": onLoadFinish media Codec:" + codecName);
-            console.log(name + ": onLoadFinish media FPS:" + mediaInfo.meta.fps);
-            console.log(name + ": onLoadFinish media size:" + mediaInfo.meta.size.width + "x" + mediaInfo.meta.size.height);
-
-            if (mediaInfo.meta.audioNone) {
-                console.log(name + ": onLoadFinish media no Audio");
-            } else {
-                console.log(name + ": onLoadFinish media sampleRate:" + mediaInfo.meta.sampleRate);
-            }
-
-            if (mediaInfo.videoType == "vod") {
-                console.log(name + ": onLoadFinish media is VOD");
-                console.log(name + ": onLoadFinish media dur:" + Math.ceil(mediaInfo.meta.durationMs) / 1000.0);
-            } else {
-                console.log(name + ": onLoadFinish media is LIVE");
-            }
-        };
-
-        player.onCacheProcess = (cPts) => {
-            console.log(name + ": onCacheProcess:" + cPts);
-        };
-
-        player.onPlayTime = (videoPTS) => {
-            if (mediaInfo.videoType == "vod") {
-                console.log(name + ": onPlayTime:" + videoPTS);
-            } else {
-                // LIVE
-            }
-        };
-
-        player.do();
-        // console.log('setupH265WebJS: video: ', video.offsetWidth, video.offsetHeight)
-    },
-
     init: function(opts) {
         this.proto = opts.proto;
         this.host = opts.host;
         this.hlsOptions = opts.hlsConfig;
-        this.h265webjsOptions = opts.h265webjsConfig;
 
         var useHls;
         if (opts.hlsConfig !== undefined) {
@@ -315,33 +198,12 @@ window.Cameras = {
             }
         }
 
-        for (var camId in opts.camsByType) {
-            var name = camId + '';
-            if (opts.isLow)
-                name += '-low';
-            var type = opts.camsByType[camId];
-
-            switch (type) {
-                case 'h265':
-                    var videoContainer = document.createElement('div');
-                    videoContainer.setAttribute('id', 'video-'+name);
-                    videoContainer.setAttribute('style', 'position: relative'); // a hack to fix an error in h265webjs lib
-                    videoContainer.className = 'video-container';
-                    document.getElementById('videos').appendChild(videoContainer);
-                    try {
-                        this.setupH265WebJS(videoContainer, name);
-                    } catch (e) {
-                        console.error('cam'+camId+': error', e)
-                    }
-                    break;
-
-                case 'h264':
-                    var video = document.createElement('video');
-                    video.setAttribute('id', 'video-'+name);
-                    document.getElementById('videos').appendChild(video);
-                    this.setupHls(video, name, useHls);
-                    break;
-            }
+        for (var i = 0; i < opts.cams.length; i++) {
+            var camId = opts.cams[i]+'-low';
+            var video = document.createElement('video');
+            video.setAttribute('id', 'video-'+camId);
+            document.getElementById('videos').appendChild(video);
+            this.setupHls(video, camId, useHls);
         }
     },
 
diff --git a/web/kbn_templates/cams.j2 b/web/kbn_templates/cams.j2
new file mode 100644
index 0000000..79cb64b
--- /dev/null
+++ b/web/kbn_templates/cams.j2
@@ -0,0 +1,21 @@
+{% extends "base.j2" %}
+{% block content %}
+{{ breadcrumbs([{'text': 'Камеры'}]) }}
+
+{#<nav>#}
+{#    <div class="nav nav-tabs" id="nav-tab">#}
+{#        <a href="/cams/{{ camera_param ? camera_param~"/" : "" }}" class="text-decoration-none"><button class="nav-link{% if tab == 'low' %} active{% endif %}" type="button">Low-res</button></a>#}
+{#        <a href="/cams/{{ camera_param ? camera_param~"/" : "" }}?high=1" class="text-decoration-none"><button class="nav-link{% if tab == 'high' %} active{% endif %}" type="button">High-res</button></a>#}
+{#    </div>#}
+{#</nav>#}
+
+<div id="videos" class="camfeeds"></div>
+
+{% endblock %}
+
+{% block js %}
+if (isTouchDevice()) {
+    addClass(ge('videos'), 'is_mobile');
+}
+Cameras.init({{ js_config|tojson }});
+{% endblock %}