As an avid technologist I maintain my own home security cameras. These camera stream H.264 encoded 1080P video across my gigabit LAN to my home server, recording 24/7 footage for future reference. These clips are not only stored on my home server, they’re also processed via a custom Python script for motion, the results of which are logged to a file. I can easily see which video clips contain motion, and make it easier to locate something of interest.

Each log contains the frame motion was first detected in, the total number of frames in the clip (I keep my recording chunked into 1 hour clips) and finally the filename of the clip itself. For example, a log entry might look like:

Motion at frame 6571 of 33735 in /mnt/simple-storage/cameras/garage/video/20201020/20201020213546.m4v

This is a good first step, but I’d rather not inspect log files, divide 6,571 by 33,735 (in the above example) to know that I need to skip 19% of the way through a certain video file. I’d rather just be lazy, click on a link.

Thankfully, with HTML5’s native H.264 support, this was all pretty straightforward. Viewing this more as a learning exercise (and a fun distraction) I opted to write this in 100% pure JavaScript – no third party libraries here.

The above HTML file can be served directly via Nginx (or any other web server) and accepts just two query string parameters:

• src – the relative path to the video clip
• offset – a encoded string containing the target frame, a colon, and the total number of frames in the video clip (e.g. 66056:72026 would jump you nearly 92% of the way through a clip)

A sample URL, in full, would look like:

https://saturn.lan.whitehorn.us/~camera/player.html?src=garage/20201020/20201020211153.m4v&offset=66056:72026

The script itself is pretty simplistic. It inspects the query string, loads the referenced file, and if an offset parameter is specified it then uses that to compute how far into the video it should skip.

This has allowed me to update my logging to output HTML with links to the above player.html file (as opposed to the previous text based logs). Now I can be lazier when it comes to monitoring my home security cameras 🙂