clydebarrow/moonglass

A front end for the Moonfire NVR

Moonglass

A front end for the Moonfire NVR

This is a work in progress, but is basically functional.

To run the web app as a development server:

• clone this repository - git clone https://github.com/clydebarrow/moonglass.git
• cd into moonglass/webapp
• Create the file "local.properties" and add a line like this:

nvrHost=http://192.168.1.50:8080

where the url points to your installation of Moonfire NVR.

• Run the command:

gradlew browserDevelopmentRun --continuous

A browser window should open, presenting the UI.

To install onto the NVR server

There are two ways of doing this.

Replace the docker image

Edit the nvr script created during installation of Moonfire-nvr. Locate the line like:

image_name="scottlamb/moonfire-nvr:v0.6.6"

Replace this with:

image_name="clydeps/moonglass:0.1.0"

Stop the nvr, remove the container and restart:

nvr stop
docker rm moonfire-nvr
nvr run

Reload the UI from localhost:8080 (or wherever it is served from.) Enjoy.

Using a proxy server

You will need to set up a proxy server - nginx is recommended. The Moonglass production files need to be copied to the NVR server - you can automate this by defining an scp destination in local.properties, e.g.:

[email protected]:moonglass

With this defined, you can simply run gradlew deploy and the production files will be copied to the given destination. To manually build run this command:

gradlew browserProductionWebpack

Then recursively copy all files in build/distributions to the server.

There is a sample nginx config file provided - you will need to change the hostname as required, and the file location as chosen above.

Place the config file in /etc/nginx/conf.d/ on the server, then restart nginx. Now browse to the server and the ui should load. The proxy server will deliver the Moonglass files while proxying the API requests to the Moonfire NVR running on the same host.

moonglass's Issues

Player should continue on size change

After a size change (e.g. rotation) the video player will stop.

Either the source object needs to be preserved on size change or recreated.

Enable touch actions for dragging

The livestatus element can be dragged with the mouse, but this currently does not work with touch.
A fling to dismiss would also be nice

Allow saving custom layouts in live view

Should allow a given setup (layout and streams) to be saved as a named layout. These would appear in the drop-down list in the navbar.

Need some way of managing these - deleting, and sorting.

Live view doesn't work on Android

Video never starts playing

Recording list not populated

When switching to the recordings page expanded camera lists are not populated

Enable full-screen player

Video player should be able to be zoomed to fit the window/and or the full screen.

Currently the full screen button in the standard player controls is present, but does not work properly.

Keystroke bindings

Implement keyboard actions.

Suggestions:

• Esc dismisses a modal element
• Space toggles play/pause
• Left/right arrows jump the playback back or forward
• • and - increment and decrement playback speed
• Enter resets playback speed to 1.0
• Pageup/Pagedown move between video segments

These should be mapped by a global listener to broadcast events describing the action.

A second stage would allow user customisation of the bindings.

Implement scrub bar

Create a new content page allowing multiple recordings to be played back at the same time, in sync.

A scrub bar should display time stamps and tick marks and be draggable across a central cursor. The playback will be synced to the bar

The navbar selector widget should allow selection of a day and a time range (limited to 24 hours.)

Dismiss date selector on actions

Date selector should be dismissable with swipe on touch enabled devices.

Also dismiss when a date is selected?

Allow snapshot of current playing video

Can be achieved by creating a canvas and drawing the video into it.

Reported bitrates are wrong

The values are being reported in bytes/second, not bits/per second.

Pause playback when in background

User the document.visibilityState and visibilitychange event to pause playback when the browser tab becomes invisible, and resume when it returns.

Dark mode date selector background is wrong

Seems ok on desktop, wrong on Android Chrome and Firefox