videoanalysis improvements

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+# Next
+
+## Other Changes
+- Minor UI improvements
+
+## Bugfixes
+- Fixed an issue where the video analysis sensitivity does not work as desired
+
 # [1.0.4] - 2022-01-11
 
 ## Other Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "camera.ui",
-  "version": "1.0.4",
+  "version": "1.0.5-beta.0",
   "description": "User Interface for RTSP capable cameras.",
   "author": "SeydX (https://github.com/SeydX/camera.ui)",
   "scripts": {

src/controller/camera/services/session.service.js

@@ -15,7 +15,7 @@ class SessionService {
 
     this.session = {
       activeStreams: 0,
-      maxStreams: camera.videoConfig.maxStreams,
+      maxStreams: camera.videoConfig.maxStreams || 4,
     };
   }
 

src/controller/camera/services/stream.service.js

@@ -123,6 +123,11 @@ class StreamService {
       if (!prebuffer) {
         const allowStream = this.#sessionService.requestSession();
 
+        console.log('ALLOW???');
+        console.log(allowStream);
+
+        console.log(this.#sessionService);
+
         if (!allowStream) {
           log.error('Not allowed to start stream. Session limit exceeded!', this.cameraName, 'streams');
           return;

src/controller/camera/services/videoanalysis.service.js

@@ -19,6 +19,12 @@ const { log } = LoggerService;
 
 const isUINT = (value) => Number.isInteger(value) && value >= 0;
 
+const FFMPEG_MODE = 'rgba'; // gray, rgba, rgb24
+const FFMPEG_RESOLUTION = '640:360';
+const FFMPEG_FPS = '2';
+const DIFFERENCE = 9;
+const GRAYSCALE = 'luminosity';
+
 class VideoAnalysisService {
   #camera;
   #socket;
@@ -56,28 +62,19 @@ class VideoAnalysisService {
     }
   }
 
-  // 0 - 100
   changeSensitivity(sensitivity) {
     if (sensitivity >= 0 && sensitivity <= 100 && this.videoanalysisSession?.pamDiff) {
-      const value = 100 - sensitivity;
-
-      // 0: MAX - 100: MIN
-      const difference = Math.round(value / 3);
-
-      // 0: MAX - 100: MIN
-      const percentage = value;
-
-      this.videoanalysisSession.pamDiff.setDifference(difference);
-      this.videoanalysisSession.pamDiff.setPercent(percentage);
+      this.videoanalysisSession.pamDiff.setDifference(DIFFERENCE);
+      this.videoanalysisSession.pamDiff.setPercent(100 - sensitivity);
     }
   }
 
-  changeZone(regions, sensitivity) {
-    if (regions && regions.length > 0 && this.videoanalysisSession?.pamDiff) {
-      const zones = this.#createRegions(regions, sensitivity);
-      this.videoanalysisSession.pamDiff.regions = zones.length > 0 ? zones : null;
-
+  changeZone(regions = [], sensitivity) {
+    if (this.videoanalysisSession?.pamDiff) {
+      this.videoanalysisSession.pamDiff.resetCache();
       this.changeSensitivity(sensitivity);
+      const zones = this.#createRegions(regions, sensitivity);
+      this.videoanalysisSession.pamDiff.setRegions(zones.length > 0 ? zones : null);
     }
   }
 
@@ -193,11 +190,11 @@ class VideoAnalysisService {
       '-vcodec',
       'pam',
       '-pix_fmt',
-      'gray',
+      FFMPEG_MODE,
       '-f',
       'image2pipe',
       '-vf',
-      'fps=2,scale=400:225',
+      `fps=${FFMPEG_FPS},scale=${FFMPEG_RESOLUTION}`,
       'pipe:1',
     ];
 
@@ -213,12 +210,16 @@ class VideoAnalysisService {
 
     const p2p = new P2P();
     const pamDiff = new PamDiff({
-      difference: settings?.videoanalysis?.difference || 10,
-      percent: settings?.videoanalysis?.percentage || 30,
+      //difference: settings?.videoanalysis?.difference || 9,
+      grayscale: GRAYSCALE,
+      difference: DIFFERENCE,
+      percent: settings?.videoanalysis?.percentage || 5,
+      regions: regions.length > 0 ? regions : null,
+      //response: 'percent',
+      response: 'bounds',
+      draw: true,
     });
 
-    pamDiff.regions = regions.length > 0 ? regions : null;
-
     const restartWatchdog = () => {
       clearTimeout(this.watchdog);
       this.watchdog = setTimeout(() => {
@@ -243,16 +244,16 @@ class VideoAnalysisService {
     // eslint-disable-next-line no-unused-vars
     pamDiff.on('diff', async (data) => {
       if (!this.motionTriggered) {
-        log.debug(`Motion detected via Videoanalysis: ${JSON.stringify(data.trigger)}`, this.cameraName);
-
         this.motionTriggered = true;
 
+        log.debug(`Motion detected via Videoanalysis: ${JSON.stringify(data.trigger)}`, this.cameraName);
+
         const result = await MotionController.handleMotion('motion', this.cameraName, true, 'videoanalysis', {});
         log.debug(`Received a new VIDEOANALYSIS message ${JSON.stringify(result)} (${this.cameraName})`);
 
         setTimeout(() => {
           this.motionTriggered = false;
-        }, 45000);
+        }, 60000);
       }
     });
 
@@ -331,14 +332,18 @@ class VideoAnalysisService {
         if (region.coords?.length > 2) {
           return {
             name: `region${index}`,
-            difference: Math.round(sensitivity / 3),
-            percent: sensitivity,
+            difference: 9,
+            percent: 100 - sensitivity,
             polygon: region.coords
               ?.map((coord) => {
-                if (isUINT(coord[0]) && isUINT(coord[1])) {
+                let x = coord[0] < 0 ? 0 : coord[0] > 100 ? 100 : coord[0];
+                let y = coord[1] < 0 ? 0 : coord[1] > 100 ? 100 : coord[1];
+                if (isUINT(x) && isUINT(y)) {
+                  //x: 0 - 100 %   => 0 - 640 px
+                  //y: 0 - 100 %   => 0 - 360 px
                   return {
-                    x: coord[0],
-                    y: coord[1],
+                    x: Math.round((640 / 100) * x),
+                    y: Math.round((360 / 100) * y),
                   };
                 }
               })

ui/src/components/navbar.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
 .tw-relative(style="z-index: 99")
   .top-navi-bar-minified(v-if="$route.meta.config.showMinifiedNavbar")
-    v-btn.text-default.included(@click="toggleNavi" icon height="38px" width="38px")
-      v-icon.text-transparent {{ showSidebar ? icons['mdiArrowLeftThick'] : icons['mdiArrowRightThick'] }}
+    v-btn.text-muted.included(@click="toggleNavi" fab elevation="1" height="38px" width="38px" color="rgba(0, 0, 0, 0.5)" retain-focus-on-click)
+      v-icon {{ showSidebar ? icons['mdiArrowLeftThick'] : icons['mdiArrowRightThick'] }}
   v-app-bar.top-navi-bar.pt-safe(v-else height="64px" :class="($route.meta.config.fixedNavbar ? 'top-navi-bar-fixed ' : '') + (extendSidebar ? 'extended-sidebar' : '')")
     .navi-wrap.pl-safe.pr-safe
       v-btn.text-default.included(@click="toggleNavi" icon height="38px" width="38px")
@@ -137,7 +137,7 @@ span >>> .v-badge__badge::after {
 }
 
 .text-transparent {
-  color: rgba(255, 255, 255, 0.3) !important;
+  color: rgba(255, 255, 255, 0.6) !important;
 }
 
 .badge-text {

ui/src/views/Camview/Camview.vue

@@ -5,7 +5,7 @@
   .cameras-dropdown
     v-menu.tw-z-30(v-if="checkLevel('settings:edit')" v-model="showCardsMenu" transition="slide-y-transition" min-width="200px" :close-on-content-click="false" offset-y bottom left nudge-top="-15" content-class="light-shadow")
       template(v-slot:activator="{ on, attrs }")
-        v-btn.text-muted.tw-mr-1(icon height="38px" width="38px" v-bind="attrs" v-on="on")
+        v-btn.text-muted.tw-mr-1(fab elevation="1" height="38px" width="38px" v-bind="attrs" v-on="on" color="rgba(0, 0, 0, 0.5)" retain-focus-on-click)
           v-icon {{ icons['mdiCog'] }}
 
       v-card.light-shadow.card-border.dropdown-content(max-width="360px")