save

1 files changed, 349 insertions, 0 deletions

diff --git a/web/kbn_assets/app.js b/web/kbn_assets/app.js
new file mode 100644
index 0000000..c187f89
--- /dev/null
+++ b/web/kbn_assets/app.js
@@ -0,0 +1,349 @@
+(function() {
+var RE_WHITESPACE = /[\t\r\n\f]/g
+
+window.ajax = {
+    get: function(url, data) {
+        if (typeof data == 'object') {
+            var index = 0;
+            for (var key in data) {
+                var val = data[key];
+                url += index === 0 && url.indexOf('?') === -1 ? '?' : '&';
+                url += encodeURIComponent(key) + '=' + encodeURIComponent(val);
+            }
+        }
+        return this.raw(url);
+    },
+
+    post: function(url, body) {
+        var opts = {
+            method: 'POST'
+        };
+        if (body)
+            opts.body = body;
+        return this.raw(url, opts);
+    },
+
+    raw: function(url, options) {
+        if (!options)
+            options = {}
+
+        return fetch(url, Object.assign({
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest',
+            }
+        }, options))
+        .then(resp => {
+            return resp.json()
+        })
+    }
+};
+
+window.extend = function(a, b) {
+    return Object.assign(a, b);
+}
+
+window.ge = function(id) {
+    return document.getElementById(id);
+}
+
+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,
+    h265webjsOptions: null,
+    host: null,
+    proto: null,
+    hlsDebugVideoEvents: false,
+
+    getUrl: function(name) {
+        return this.proto + '://' + this.host + '/ipcam/' + name + '/live.m3u8';
+    },
+
+    setupHls: function(video, name, useHls) {
+        var src = this.getUrl(name);
+
+        // 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;
+            video.playsInline = true;
+            video.autoplay = true;
+            if (window.browserInfo.ios)
+                video.setAttribute('controls', 'controls');
+
+            video.src = src;
+
+            var events = ['canplay'];
+            if (this.hlsDebugVideoEvents)
+                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);
+            }
+        }
+    },
+
+    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) {
+            useHls = Hls.isSupported();
+            if (!useHls && !this.hasFallbackSupport()) {
+                alert('Neither HLS nor vnd.apple.mpegurl is not supported by your browser.');
+                return;
+            }
+        }
+
+        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;
+            }
+        }
+    },
+
+    hasFallbackSupport: function() {
+        var video = document.createElement('video');
+        return video.canPlayType('application/vnd.apple.mpegurl');
+    },
+};
+})();
+
+
+var ModemStatus = {
+    _modems: [],
+
+    init: function(modems) {
+        for (var i = 0; i < modems.length; i++) {
+            var modem = modems[i];
+            this._modems.push(new ModemStatusUpdater(modem));
+        }
+    }
+};
+
+function ModemStatusUpdater(id) {
+    this.id = id;
+    this.elem = ge('modem_data_'+id);
+    this.fetch();
+}
+extend(ModemStatusUpdater.prototype, {
+    fetch: function() {
+        ajax.get('/modem/get.ajax', {
+            id: this.id
+        }).then(({response}) => {
+            var {html} = response;
+            this.elem.innerHTML = html;
+
+            // TODO enqueue rerender
+        });
+    },
+});
\ No newline at end of file