Note: This is NOT reliant on ZoneMinder, but I use these together. Zoneminder for recording, this for viewing. I use Axis IP cameras (they are excellent) but if you can get a mjpeg stream from ANY source, this should work. (With card-based cams you may need to stream from the server - zms? I'm unsure. Maybe someone with more knowledge about the normal cams can add on below this)
I spent a lot of time trying to get multiple camera images onto one webpage to display and refresh automatically. I looked at various webcam scripts - javascript, Java, ActiveX and dhtml options and none of them worked very well. The Java stuff was very slow and resource-hungry, ActiveX tied me to commercial software and dhtml/js just plain didn't work very well. After several hours of stress and dead-ending I tried something out of the blue and it worked.
The humble <img> tag...
Here's how it looks with six cameras:
(PC running almost at idle displaying this, all pictures are 5fps/video (capped by camera))
This does NOT work in Internet Explorer. IE6 (don't know about the forthcoming 7) does not support mjpeg feeds.
Firefox, however, DOES. Possibly Opera too, but that's also commercial and I like using Firefox anyway.
What you need:
- Camera capable of providing mjpeg streams. Note that if you're using a basic camera that can only supply one client, you won't be able to view it whilst ZM is also feeding, unless you use zms and get it from the server.
Firefox (v.1.5 now - available for free from www.mozilla.org )
A computer. Hardware demands are minimal. If Linux/windows, pc/mac. Possibly notebook/PDA if you can get Firefox to run.
Some form of tcp/ip connection to the camera or streamer you're using. (Obviously)
You DO NOT need a webserver or any other computer running.
So basically, create a html file using notepad or whatever. Save it on your own PC.
Code per image is something like this:
Code: Select all
<a href="http://10.0.0.1:80">
<img src="http://10.0.0.1:80/axis-cgi/mjpg/video.cgi?resolution=320x240" width="320" height="240" border="0"> <br>
Camera 1</a> :: <a href="http://10.0.0.100/zm/index.php?view=watch&mid=2">Events</a> <br>
Front Gate
Replace "/axis-cgi/mjpg/video.cgi?resolution=320x240" with the path to your camera's mjpeg feed.
Replace "http://10.0.0.100/zm/index.php?view=watch&mid=2" with the ip/path to that camera's ZoneMinder event list. Optional.
Open the html file in Firefox (File, Open).
That should display one camera. Adding more is simply a case of copying the html and changing to reflect each camera's details, arranging in frames or whatever.
Benefits:
Free software.
Resource light.
Upscaleable - as many cams/thumbnails as you can fit on one screen.
Flexible. (It's html)
Versatile. I have had up to 8 PC's all viewing the same cameras (Axis cams allow up to 20 simultaneous feeds, but fps might drop a bit). Zoneminder recording the cameras. Security guard has a laptop with him connected over wifi.
It's simple and reliable.
Drawbacks:
I don't know if it would work for MPEG streams, I suspect not but frankly haven't tried it.
You still need to go via the zoneminder server for cameras that cannot provide their own mjpeg streams. (I understand zms can stream in mjpeg format, but I've never used or learnt that - could be wrong!)
I don't take credit for this - the complicated bit is all done by Firefox. However, I wasted a lot of time trying to get this working using more complicated methods when they weren't needed simply because I didn't know Firefox could display motion video the same as a static image. I write this to make others aware of this - and that using Zoneminder (which is quite hungry when dealing with jpeg compression on ip-cameras) to view the images isn't always the best use of the equipment. There is no need to go through Zoneminder to monitor the images unless you want to and removing yourself from that link reduces the load on the ZM server (which with 6+ IP cams can be quite busy)
