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 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.

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>
        

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.