lws: support h265 camera streams

2 files changed, 162 insertions, 21 deletions

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;
+            }
         }
     },