diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/kbn_assets/app.js | 152 | ||||
| -rw-r--r-- | web/kbn_templates/cams.j2 | 21 |
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 %} |