readme

README.md

@@ -2,88 +2,151 @@
     <img src="https://github.com/SeydX/camera.ui/blob/master/images/logo.png">
 </p>
 
-
 # camera.ui
 
 [![npm](https://img.shields.io/npm/v/camera.ui.svg?style=flat-square)](https://www.npmjs.com/package/camera.ui)
 [![npm](https://img.shields.io/npm/dt/camera.ui.svg?style=flat-square)](https://www.npmjs.com/package/camera.ui)
 [![GitHub last commit](https://img.shields.io/github/last-commit/SeydX/camera.ui.svg?style=flat-square)](https://github.com/SeydX/camera.ui)
 [![Donate](https://img.shields.io/badge/Donate-PayPal-blue.svg?style=flat-square&maxAge=2592000)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NP4T3KASWQLD8)
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/camviews_full_mobile_loss.gif" align="right" alt="camera.ui">
-
-**camera.ui** is a user interface to control your RTSP capable cameras with:
+**camera.ui** is a NVR like PWA to control your RTSP capable cameras with:
 
-- **Live streams** on Web
-- **Web App** with push notifications and more (requires https)
-- **Multi-language** support
-- **CamViews**: A resizable, drag & drop camera overview
-- **Motion Detection** with prebuffering
+- **Live Streams** on Web
+- **Camview**: A resizable, drag & drop camera overview
+- **Web Application** with almost full PWA support like push notification and more
+- **Multi-language**: Easily expandable multi-language support
+- **Motion Detection** via video analysis, MQTT, FTP, SMT or HTTP.
 - **Image Rekognition** via AWS Rekognition
 - **Notifications** via Alexa, Telegram, Webhook and WebPush
-- **Record Snapshot/Video** on movement detection
+- **Snapshot/Video**: Save recording of snapshots/videos locally when motion is detected
 - **Prebuffering:** See the seconds before the movement event
-- **User interface** with 8 different color themes and darkmode
-- and much mure...
+- **User Interface**: Beautiful and with love designed interface with 8 different color themes, darkmode and more
+- **HomeKit**: Easily expose the cameras to Apple Home with HSV support
+
+and much mure...
 
 **Supported Languages:** 
 
 :de: | :gb: | :netherlands:
 
-
 ## Installation
 
-
 ```
 sudo npm install -g camera.ui@latest
 ```
 
-## Defaults
+## Configuration
 
-Once you have installed and configured it you can access the interface via http://localhost:8181.
+camera.ui installs itself in the user directory under `~/.camera.u`.
 
-The default username is ``master`` and the default password is ``master``.
+The database, recordings as well as config.json are stored locally in this folder and are never accessible to others. The settings can be changed directly with the help of an editor, or directly via the interface.
 
-# Image Rekognition
+After the installation you can start camera.ui with the following command in the terminal
 
-camera.ui also uses image rekognition with Amazon Web Services to analyse, detect, remember and recognize objects, scenes, and faces in images. You can enable for each camera the image rekogniton and you can even set labels for each camera. For each object, scene, and concept the API returns one or more labels. Each label provides the object name. For example, suppose the input image has a lighthouse, the sea, and a rock. The response includes all three labels, one for each object.
+``camera.ui``
 
-This makes it possible to analyze every movement before this is stored or sent as a notification.
+`-D, --debug`: Turn on debug level logging
+`-C, --no-color`: Disable color in logging
+`-T, --no-timestamp`: Do not issue timestamps in logging
+`--no-sudo`: Disable sudo for updating through ui
+`--no-global`: Disable global (-g) prefix for updating through ui
+`-S, --storage-path`: Look for camera.ui files at [path] instead of the default location (~/.camera.ui)'
 
-To use image rekognition, you need to set up a AWS account with an IAM user. More Infos: [AWS Image Rekognition](https://aws.amazon.com/rekognition/?nc1=h_ls&blog-cards.sort-by=item.additionalFields.createdDate&blog-cards.sort-order=desc)
+## Defaults
+
+Once you have installed and configured it you can access the interface via http://localhost:8081.
 
+The default username is ``master`` and the default password is ``master``. When you log in for the first time, camera.ui will ask you to change your username and password.
 
 # Usage
 
- ### Login
+### Login
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/login.png" align="center" alt="camera.ui">
+
+### Dashboard
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/dashboard.png" align="center" alt="camera.ui">
+
+### Cameras
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/cameras.png" align="center" alt="camera.ui">
+
+### Camera
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/camera.png" align="center" alt="camera.ui">
+
+### Recordings
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/recordings.png" align="center" alt="camera.ui">
+
+### Notifications
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/notifications.png" align="center" alt="camera.ui">
+
+### Camview
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/camview.png" align="center" alt="camera.ui">
+
+### Log
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/login_white.png" align="center" alt="camera.ui">
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/console.png" align="center" alt="camera.ui">
 
- ### Dashboard
+### Config
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/dashboard_white.png" align="center" alt="camera.ui">
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/config.png" align="center" alt="camera.ui">
 
- ### Camview
+### Utilization
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/camviews.gif" align="center" alt="camera.ui">
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/utilization.png" align="center" alt="camera.ui">
 
- ### Recordings
+### Settings
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/recordings_white.png" align="center" alt="camera.ui">
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/settings.png" align="center" alt="camera.ui">
 
- ### Notifications
+# HomeKit
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/nots_white.png" align="center" alt="camera.ui">
+The cameras that are included in camera.ui can easily be exposed to Apple Home via Homebridge.
 
- ### Settings
+To do this, please install `homebridge-config-ui-x` and search for the plugin `homebridge-camera-ui` and install it.
 
-<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/settings_white.png" align="center" alt="camera.ui">
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/homebridge/homebridge_search.png" align="center" alt="camera.ui">
+
+Your database, if you have not changed the path, will remain the same. However you have to copy the content of `config.json` and paste it via homebridge-config-ui-x into the config.json block of homebridge-camera-ui.
+
+# Motion detection
+
+camera.ui offers a variety of options to detect and process motion.
+
+### Videoanalysis
+
+<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/videoanalysis.png" align="center" alt="camera.ui">
+
+With this option camera.ui connects to the stream and compares frame by frame if there are changes. The zones and sensitivity can be set in the interface.
+
+### HTTP / MQTT / SMTP / FTP
+
+If your camera is able to send an email when motion is detected, or send a command vie MQTT or upload an image vie FTP, then you can easily configure camera.ui to act as a destination. With this camera.ui interprets a movement and processes it (takes a picture/video, sends a notification etc)
+
+# Image Rekognition
+
+camera.ui also uses image rekognition with Amazon Web Services to analyse, detect, remember and recognize objects, scenes, and faces in images. You can enable for each camera the image rekogniton and you can even set labels for each camera. For each object, scene, and concept the API returns one or more labels. Each label provides the object name. For example, suppose the input image has a lighthouse, the sea, and a rock. The response includes all three labels, one for each object.
+
+This makes it possible to analyze every movement before this is stored or sent as a notification.
+
+To use image rekognition, you need to set up a AWS account with an IAM user. More Infos: [AWS Image Rekognition](https://aws.amazon.com/rekognition/?nc1=h_ls&blog-cards.sort-by=item.additionalFields.createdDate&blog-cards.sort-order=desc)
+
+# PWA
+
+camera.ui is a full-featured PWA (Progressive Web Application). The PWA offers several advantages over a normal web page. Via Windows/macOS/Android the browser can directly send you push notifications natively. The handling of the page becomes much faster and much more.
+
+To "enable" PWA you need to run the page over HTTPS. In the config.json you can provide your own SSL key and certificate to run camera.ui over HTTPS.
 
 # Supported clients
 
 This plugin has been verified to work with the following apps/systems:
 
-- iOS > 11
+- iOS
 - Android
 - Windows 10
 - macOS Catalina 10.15
@@ -100,17 +163,14 @@ The following browsers are supported by this plugin:
 
 _MS Internet Explorer (any version) is not supported!_
 
-
 # Supported Cameras
 
-Every camera with an RTSP stream!
-
+Every camera with an active RTSP stream!
 
 # FAQ
 
 Please check our [FAQ](https://github.com/SeydX/camera.ui/wiki/FAQ) before you open an issue.
 
-
 # Contributing
 
 You can contribute to this in following ways:
@@ -123,19 +183,16 @@ You can contribute to this in following ways:
 
 See [CONTRIBUTING](https://github.com/SeydX/camera.ui/blob/master/CONTRIBUTING.md)
 
-
 # Troubleshooting
-If you have any issues with the plugin then you can run this plugin in debug mode, which will provide some additional information. This might be useful for debugging issues. Just open your config ui and set debug to true!
-
+If you have any issues then you can run camera.ui in debug mode, which will provide some additional information. This might be useful for debugging issues. Open the interface > settings > system > 
 
 https://github.com/SeydX/camera.ui/wiki/Debug
 
-
 # License
 
 ### MIT License
 
-Copyright (c) 2020-2021 SeydX
+Copyright (c) 2020-2022 SeydX
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

bin/camera.ui.js

@@ -20,14 +20,14 @@ let storagePath = path.resolve(os.homedir(), '.camera.ui');
 
 commander
   .allowUnknownOption()
-  .option('-D, --debug', 'turn on debug level logging', () => (debugEnabled = '1'))
-  .option('-C, --no-color', 'disable color in logging', () => (logColourful = '0'))
-  .option('-T, --no-timestamp', 'do not issue timestamps in logging', () => (logTimestamps = '0'))
-  .option('--no-sudo', 'disable sudo for updating through ui', () => (sudoEnabled = '0'))
-  .option('--no-global', 'disable global (-g) prefix for updating through ui', () => (globalInstalled = '0'))
+  .option('-D, --debug', 'Turn on debug level logging', () => (debugEnabled = '1'))
+  .option('-C, --no-color', 'Disable color in logging', () => (logColourful = '0'))
+  .option('-T, --no-timestamp', 'Do not issue timestamps in logging', () => (logTimestamps = '0'))
+  .option('--no-sudo', 'Disable sudo for updating through ui', () => (sudoEnabled = '0'))
+  .option('--no-global', 'Disable global (-g) prefix for updating through ui', () => (globalInstalled = '0'))
   .option(
     '-S, --storage-path [path]',
-    'look for camera.ui files at [path] instead of the default location (~/.camera.ui)',
+    'Look for camera.ui files at [path] instead of the default location (~/.camera.ui)',
     (p) => (storagePath = p)
   )
   .parse(process.argv);

ui/src/views/Settings/subpages/cameras.vue

@@ -703,8 +703,18 @@ export default {
   watch: {
     panel: {
       async handler() {
-        const isVideoAnalysisPanelOpen = this.panel[this.camera.name]?.some((index) => index === 7);
-        if (isVideoAnalysisPanelOpen && !this.options[this.camera.name].background) {
+        let panel = [];
+
+        if (this.panel[this.camera.name]) {
+          if (!Array.isArray(this.panel[this.camera.name])) {
+            panel.push(this.panel[this.camera.name]);
+          } else {
+            panel = this.panel[this.camera.name].map((i) => i);
+          }
+        }
+
+        const isVideoAnalysisPanelOpen = panel.some((index) => index === 7);
+        if (isVideoAnalysisPanelOpen && !this.options[this.camera.name]?.background) {
           this.adjustPlayground();
 
           try {