Camera.ui
NVR like user Interface for RTSP capable cameras
Install / Use
/learn @seydx/Camera.uiREADME
<p align="center"> <img src="https://github.com/SeydX/camera.ui/blob/master/images/logo.png"> </p>[!IMPORTANT] 🚀 New Version in Development 🚀
A new version of camera.ui is currently under active development. An initial alpha/beta release and previews are coming soon. Stay tuned for exciting updates!
Details: https://github.com/seydx/camera.ui/issues/448
camera.ui
camera.ui is a NVR like PWA to control your RTSP capable cameras with:
- 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
- Snapshot/Video: Save recording of snapshots/videos locally when motion is detected
- Prebuffering: See the seconds before the movement event
- 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: | :fr: | :thailand: | :es:
Demo: https://streamable.com/3yce42
Installation
camera.ui can be installed as follows:
sudo npm install -g camera.ui@latest
Documentation
- camera.ui
Configuration
camera.ui installs itself in the user directory under ~/.camera.ui.
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.
After the installation you can start camera.ui with the following command in the terminal
camera.ui
-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)'
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
Dashboard
The Dashboard is the main page of the interface and offers a variety of widgets to customize it as you like. The widgets will expand over time. At the moment the following widgets are available for the dashboard: Time, Weather, Uptime, Camera, Notifications, RSS Feed, Status, Charts (CPU Load, CPU Temperature, Memory Load), Shortcuts and Log
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/dashboard.png" align="center" alt="camera.ui">Cameras
Here are all cameras listed by room and show the current snapshot as a cover sheet
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/cameras.png" align="center" alt="camera.ui">Camera
If you select a camera you can watch the livestream directly in the browser. With the camera.ui player you can pause the stream, turn audio on/off or reload the stream.
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/camera.png" align="center" alt="camera.ui">Recordings
All images or videos recorded by motion are listed here. If AWS Rekognition is used, the label for the recording is also displayed, as well as the date and time. Using the filter function, the recordings can be filtered as desired
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/recordings.png" align="center" alt="camera.ui">Notifications
All motion events as well as system messages can be viewed here. Each notification has one or more labels to better catagorize them. The filter function can also be used to filter the notifications as desired.
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/notifications.png" align="center" alt="camera.ui">Camview
Camview displays all camera streams in tiles, hiding everything unnecessary. Camview is great for giving a direct insight into the cameras. Also here the streams can be paused by the camera.ui video player, audio can be switched on/off, streams can be reloaded or viewed in full mode.
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/camview.png" align="center" alt="camera.ui">Log
All events that occur in the backend can be monitored via the built-in log. In addition, the log can be also be cleared or downloaded here.
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/console.png" align="center" alt="camera.ui">Config
Using the built-in editor you can easily edit your config.json. In addition, any errors are immediately displayed and thus avoided to save a faulty config.json
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/config.png" align="center" alt="camera.ui">Utilization
"Utilization" shows you a graphical overview of the system utilization. Here you can see in real time how high the CPU utilization is, how high the CPU temperature is and how much memory is still free.
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/utilization.png" align="center" alt="camera.ui">Settings
On the settings page you can make ALL settings regarding your config.json and database. All parameters defined in config.json are directly configurable from this page. If camera.ui runs via "Homebridge" you can also set Homebridge relevant parameters here.
<img src="https://github.com/SeydX/camera.ui/blob/master/images/browser/settings.png" align="center" alt="camera.ui">HomeKit
The cameras that are included in camera.ui can easily be exposed to Apple Home via Homebridge.
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/homebridge/homebridge_search.png" align="center" alt="camera.ui">If you run camera.ui via Homebridge, then the interface will also be started automatically on every startup. An additional Service Mode is no longer needed.
If you have used camera.ui before WITHOUT Homebridge and then use it with Homebridge, then the database must be recreated and also the config is taken over by Homebridge. You have to add the cameras again to Homebridge. After restarting Homebridge, the cameras will be also available on camera.ui
Homebridge-config-ui-x offers some more config parameter to eg. enable HSV, motion sensors, motion switches and more. Please take a look at the example-config.json
Note: homebridge-camera-ui >= v5.0.0 is compatible with 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
If the HTTP server is enabled for motion detection, calling the link can easily trigger motion.
Example:
http://localhost:8123/motion?My+Camera
MQTT
If you have set up the MQTT client (Settings > System > MQTT), you can set the required parameters such as "Motion Topic", "Message" etc. via the interface (Settings > Cameras > MQTT).
Motion Topic: The MQTT topic to watch for motion alerts. The topic (prefix/suffix) should be unique, it will be used to assign the motion detected message to the desired camera.
Motion Message: The message to watch for to trigger motion alerts.
The message can be a simple "string" (e.g. "ON"/"OFF) or a JSON object. If the MQTT message is a JSON
