The ARC Console

What's this?

This page describes a new "skin" or user interface to the ZoneMinder Video Security system. If you do not know what ZoneMinder is and are curious, then click the logo at right to find out more. If you use, or plan to use ZoneMinder, this page should be of interest to you as I think this new skin is a very good complement to the great system the ZoneMinder authors provide.

Though the architecture of ZoneMinder is very good, and its feature set is both broad and reliable, the existing console interface was clunky and inefficient when used for my most common needs. Thus, I decided to organize the various screens and user interface functions into something that streamlined my day-to-day usage of ZoneMinder. I think my requirements for a user interface are quite common, so am providing this in hopes that others find it useful too. There's a download button on the top of this page if you want to try it out yourself, or continue reading for more descriptions.

Note that this is not about making the ZoneMinder interface prettier to look at. Rather, it is about improving the user interaction flow.

Key Features

Single Camera View

Camera Montage View

Warning Signalling

Auto Video Switching In the normal mode of operation, it displays live camera feeds and the list of the most recent events. When it detects a new camera event, it automatically begins to play the video of that event as well as automatically switching to the live view to the camera where the event originated. This gives a complete hands-off way to see events as they happen ensuring the most important video feeds are being shown at the right time.
New Event Notifications When a new camera event is detected, it will also flash the background color of the console and give an audible alert. This provides two ways to draw attention to the event. Event notifications and/or sound can be disabled when the user's attention is already on the console, or events are expected.
Two Notification LevelsFor lesser motion events, only a visual indication is given, while significant events give a different visual notification as well as an (option) audible signal. In each case, the live camera feeds are automatically changed to the relevant feeds.
User Awareness Besides providing an auto-updating interface, the user is also able to interact to view the latest events or specific live camera streams. The console is smart about staying out of the way when the user is interacting with it and resumes auto-updates when it detects the user is done with their task.
Camera Disabling/Enabling From the console screen you can enable or disable cameras. There are also buttons to turn on/off all the cameras, effectively giving you a single button to turn your security system on and off.
Dynamic Full Screen Sizing The console will scale to the full size of your browser window to provide the largest possible view of the cameras. It also scales all camera feeds to perfectly fit in the given area. If you change the window size, it will adjust its layout accordingly to keep it filling the window. This works on tablets as well: if you rotate them from portrait to landscape, the console layout will change.
Multiple ViewsThe live feed video area allows you to view a single camera, cycle through all cameras or view all the cameras. The auto-switching due to motion events will adjust based on the preferred view.

Motivating Use Cases

Use Case I

It is the middle of the night, you are sound asleep when your phone gets a text message from ZoneMinder that it detected motion on one of the cameras. You want to very quickly assess the situation and either deal with it, or get back to sleep if it was a false alarm.

The ideal case is that there is a touch-screen tablet on the wall by your bed. It automatically comes on and you can glance up to see the video from the event as well as simultaneously see the current live stream from that camera. If it is immediately obvious what caused the alarm, you touch the screen to blank it and go back to bed. If it is not a trivial false alarm, you would like to easily explore the recent events and any and all the live feeds with some simple touches of the screen.

This ideal case can almost be a reality if you have a tablet and a wall mount, but what is lacking is a way to have the tablet automatically wake up and automatically display the relevant information. I am still working on trying to solve the problem of auto-waking a tablet on a video event, but the ARC Console provides the "relevant information" part of the solution.

Now we consider what I used to have to do when a got a text message from ZoneMinder in the middle of the night. My phone is just too cumbersome to use to interact with ZoneMinder, so I need to grab a better device. I can go to my email on the device to get the direct link to the event, or I can go to the ZoneMinder console and open up the window with recent events. There may or may not have been multiple events, so I have to sift through them and open a few new windows to see each one individually. All the while, what is currently happening outside is opaque to me unless I decided to go to the live feed first. By this time, I probably have 3 or 4 windows open and am having problems mentally relating them all to one another. I began the process tired, and by now I am tired and annoyed. This is a cumbersome enough process that I stopped doing it and began to ignore alerts, which completely defeats the purpose of a security system.

Use Case II

It is dinner time, so there is a lot of activity in the kitchen when the doorbell rings. Is this an important visitor, someone coming to sell you something or maybe just a UPS ring-and-run event? You want to know near immediately without having to take the time to find a device and/or wash your hands to deal with it.

Again, the ideal case is having a wall-mounted touch-screen that automatically switches to displaying the camera feed from the front door as well as the video of the person as they walked up to the door (the camera motion event). You will immediately know how how important the visitor is.

In this case, waiting for ZoneMinder to tell you there was motion on the front door camera does not work. Delays in email and texts, make it not timely enough. Plus, having to check your email in the middle of food preparation is not exactly a happy time. Having a console that will give you the visual information you need almost immediately is what is needed and what the ARC Console provides.

Use Case III

You are about to go out to do some yardwork, so you would rather not come back to dozens of ZoneMinder emails (or text messages) alerting you to the fact that your were busy working. You want to easily disable the motion detection of the cameras before you go out, and re-enable them when you are done.

ZoneMinder provides this enable and disable ability, but as far as I have ever found, it is on a camera-by-camera basis. Thus, to disable all alerts, you have to open up one window for each camera, and click the disable link for each, then reverse this to enable them. I wanted a single button to click for this.

User Interface Descriptions

Sections of ARC Console

Here are descriptions of the major sections of the ARC Console. On the left is the live video section, while the right is the event video section.

This is a live feed from one or more of the cameras. It is the largest area on the console. If the full camera montage is displayed, clicking on any one of the images will switch to the single camera view for that camera.
These buttons control which live feeds to display and allow enabling/disabling of camera. See below for details.
These are the buttons to control the event list and notifications. See below for details.
This is a listing of the latest camera events with the most recent ones at the top. It has basic information about the event and you can click on these to see the video from the event. The event that is in the event video window is highlighted in orange. It also highlights (in pink) all events that ZoneMinder has sent an email or text to help distinguish between important and unimportant events.
This is where the video from an event will play. It plays automatically when a new event arrives, or from a user selection from the recent event listings. It plays the event video once, but you can click on the video to replay it.

Video Event Controls

Event Controls

This button will refresh the event list. This list usually automatically refreshes, but the auto-updating is suspended if the user is exploring events. If an event arrives while the user is viewing an event, the user's action is not interrupted, though they will get a visual and/or audible warning. In this case, the user might want to refresh the list rather than waiting for the console to resume its normal auto-updating schedule (which can take up to 30 seconds).
This will toggle between showing more or less events in the event list. By default, the list shows the last 10 events, but it can be changed to show the last 50 events with this button.
This button toggles the signalling mechanisms. When "off", this will suppress the visual and audible signals when a new event is detected. This is useful if there are a series of events that are being actively explored, or if there is expected, known activity that will be occurring.
This toggles the signalling sounds so you can get a visual signal, but not an audible alert. It is useful when you need to operate in a more quiet environment.

Live Camera Controls

This changes the live view area into a montage of the live feeds from all the cameras. The videos of all the cameras is scaled to fit into a grid so as not to require any page scrolling. Because this shows all live feeds, if a new event arrives while viewing this montage, the screen will not change to show the live feed from a single camera, though the video itself will display an indicator to help easily identify the location of the motion.
This button will toggle to start cycling the live video among all the cameras. It displays each feed for about 20 seconds before switching to the next one. If a new event arrives while cycling through the camera, it will switch to the relevant camera for about 60 seconds before resuming the cycling.
These buttons will change the live video feed to one of the defined ZoneMinder cameras (a.k.a., monitors). When a new event arrives, the console will automatically switch to the feed for that camera (unless the user is viewing the camera montage). The buttons are also highlighted in red when a motion event that is relevant to it is detected.
These buttons allow disabling and enabling all the cameras at once. Their appearance is context-sensitive, e.g., you will not see the "Enable All" button if all the cameras are already enabled.
These buttons allow disabling and enabling the individual cameras. These are paired with the cameras' view selection buttons directly above them.

How to Install and Start

Download

Warning! I have only tried this skin installed on ZoneMinder v1.25.0 and v1.27 on a GNU/Linux Ubuntu 12.04 server. It depends on a lot on the ZoneMinder internals, so might break if the ZoneMinder developers change something this skin depends upon. I have one report that it works in ZoneMInder v1.26.

After downloading, to install should be as simple as:

move to the top level install directory for ZoneMinder on your server,
move into the "skins" subdirectory,
un-zip the file arc-console-version-1.2.zip,
rename the directory extracted to "arc".

This assumes you already have a working version of ZoneMinder installed, know where it is installed and have permissions to write files in the ZoneMinder directories.

Here's an example for an Ubuntu machine:

          cd /usr/share/zoneminder
          wget -q 'https://github.com/cassandra/arc-console/archive/version-1.2.zip'
          unzip version-1.2.zip
          mv arc-console-version-1.2 arc

This does not require restarting ZoneMinder.

Once the files are in place, you can select using this new skin and display the ARC Console with:

		http://localhost/zm?skin=arc

You should replace localhost with your machine name or IP address of your ZoneMinder server if needed.

GitHub

You can alternatively use GitHub to download releases or the source.

ARC Console GitHub Page

Audible Alerts

The audible alerts leverage the ZoneMinder sound configuration. By default, the ZoneMinder settings will not have sounds enabled. If you want audible alerts and have not already set up ZoneMinder for sound alerts, you will need to do these things:

Find a suitable audio file that will be the sounds used for the alerts. This is a personal preference, but I choose: This WAV File.
Copy this sound file into the "sounds" directory off the root ZoneMinder installation directory (This is /usr/share/zoneminder/sounds on a vanilla Ubuntu system).
Go to the ZoneMinder Options window, which can be found on the top right of the main ZoneMinder console page.
Under the "Web" tab of the options, put the file-name you just installed in the "WEB_ALARM_SOUND" text box, also check the "WEB_SOUND_ON_ALARM" box above it and then click the "Save" button.

User Notes

I had limited browsers and devices to test this skin on, but can confirm it works well in Firefox on Ubuntu, OS X and an Android Nexus 10 tablet, including orientation changes. Also works in Google Chrome on those platforms. Safari on a first generation iPad mostly works, but has some font sizing issues I have not yet fixed yet.
I only tried this with a 4 camera setup, but it probably would not be good to use with more than a handful of cameras. I plan to adapt it to properly handle camera groups instead of using all defined, active cameras.
The alert system in here is separate from the normal ZoneMinder filter rules. It is meant for only visual and audible alerts on the console. Use ZoneMinder's native rules and system for all other types of notification you would want.
The alert sounds depend on the <audio> HTML tag, which is mostly an HTML5 thing. Most modern browsers support this, but it probably will not work on older browser versions. There's also some weirdness around what browsers natively support what types of sounds files.
I've only provided language locales for English (US and GB).

Developer Notes

Please see the Developer Notes Page for more information.

Troubleshooting

Most everything in the ARC Console is a derivative of the main ZoneMinder views. Ensure the equivalent native ZoneMinder view is working first. This is especially true if your browser/device combo cannot play the videos.
I had a number of issues with Google Chrome and video playback, especially on Android devices. ZoneMinder is (as of this writing) coded to assume Chrome cannot handle jpeg streaming, so it reverts to a Java applet that Android devices cannot play. I think that this is a remnant of older versions of Chrome. In the ARC Console code, I override it so it can do the native jpeg streaming for Chrome and it seemed to work fine.