From 850083225ca0c3df7168d84655e1352b05b153fa Mon Sep 17 00:00:00 2001 From: Evgeny Zinoviev Date: Mon, 29 May 2023 23:40:14 +0300 Subject: lws: support h265 camera streams --- localwebsite/htdocs/assets/app.css | 8 +- localwebsite/htdocs/assets/app.js | 175 +++++++++++++++++++++++++++++++++---- 2 files changed, 162 insertions(+), 21 deletions(-) (limited to 'localwebsite/htdocs') diff --git a/localwebsite/htdocs/assets/app.css b/localwebsite/htdocs/assets/app.css index d93c4f7..3146bcf 100644 --- a/localwebsite/htdocs/assets/app.css +++ b/localwebsite/htdocs/assets/app.css @@ -159,15 +159,17 @@ flex-direction: row; } -.camfeeds:not(.is_mobile) > video { +.camfeeds:not(.is_mobile) > video, +.camfeeds:not(.is_mobile) > .video-container { display: flex; flex-basis: calc(50% - 20px); justify-content: center; flex-direction: column; - width: calc(50% - 10px); + width: calc(50% - 10px) !important; margin: 5px; } -.camfeeds.is_mobile > video { +.camfeeds.is_mobile > video, +.camfeeds.is_mobile > .video-container { max-width: 100%; } diff --git a/localwebsite/htdocs/assets/app.js b/localwebsite/htdocs/assets/app.js index 9574c8c..e72ecd9 100644 --- a/localwebsite/htdocs/assets/app.js +++ b/localwebsite/htdocs/assets/app.js @@ -90,12 +90,17 @@ window.addClass = function(el, name) { window.Cameras = { hlsOptions: null, - hlsHost: null, - hlsProto: null, - debugVideoEvents: false, + 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.hlsProto + '://' + this.hlsHost + '/ipcam/' + name + '/live.m3u8'; + var src = this.getUrl(name); // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled. @@ -128,7 +133,7 @@ window.Cameras = { video.src = src; var events = ['canplay']; - if (this.debugVideoEvents) + 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++) { @@ -146,26 +151,160 @@ window.Cameras = { } }, - init: function(cams, options, proto, host, debugVideoEvents) { - // this.cams = cams; - this.hlsOptions = options; - this.hlsProto = proto; - this.hlsHost = host; - this.debugVideoEvents = debugVideoEvents + 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; let useHls = Hls.isSupported(); - if (!useHls && !this.hasFallbackSupport()) { + if (!useHls && !this.hasFallbackSupport() && opts.hlsConfig !== undefined) { alert('Neither HLS nor vnd.apple.mpegurl is not supported by your browser.'); return; } - for (var i = 0; i < cams.length; i++) { - var name = cams[i]; - var video = document.createElement('video'); - video.setAttribute('id', 'video-'+name); - document.getElementById('videos').appendChild(video); + for (var camId in opts.camsByType) { + var name = camId + ''; + if (opts.isLow) + name += '-low'; + var type = opts.camsByType[camId]; - this.setupHls(video, name, useHls); + 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; + } } }, -- cgit v1.2.3