Home security system wouldn't be complete without some CCTV cameras...
...but just installing them is just a first step. Being able to access the feeds easily is completely different thing.
I also wanted to learn how to use Vue.js 🙃
Some technical wizardry™, a motionEye instance, a truckload of node_modules and a bucket of coffee - it was done.
![Live cameras view allows to see any camera feed as a large preview](/assets/images/kamery.png)
Live view focuses on a single camera. In this mode the selected camera feed is played live at full FPS available, while the previews update every two seconds to preserve the bandwidth.
![Grid view shows all cameras on a single screen in a wide selection of predefined layouts. User-defined layouts in planning!](/assets/images/kamery-grid.png)
The grid shows all of the camera feeds in a few predefined layouts. Each feed is actually a custom Vue component, so the new layout creation is super easy - all I need to do is to just create elements and pass a camera name.
The layouts are also using the CSS grid
<div class="grid">
<div class="col-3">
<CameraComponent :camera="Drzwi" />
</div>
<div class="col-3">
<CameraComponent :camera="Plac" />
</div>
</div>
![Archive view allows to see all of the recorded videos directly in the app](/assets/images/kamery-archive.png)
As of now there's nothing fancy about the archive view - it just takes the videos for the specified camera feed, sorts them by timestamp and displays as a list.
I do plan on improving the interface, replacing the simple list with a vertical timeline and expanding on the JS logic I wrote for the native HTML5 player. I'd like to make the timeline seamless in a way that the player would just load the video matching the selected time and start playing it at that specific time.
There is room for improvement, definitely, but I am happy with the results so far.