Zoneminder Live steaming on smart phones (iphone, andoid)

If you've made a patch to quick fix a bug or to add a new feature not yet in the main tree then post it here so others can try it out.
Post Reply
Tired2
Posts: 3
Joined: Fri Aug 06, 2010 6:30 pm

Zoneminder Live steaming on smart phones (iphone, andoid)

Post by Tired2 »

Everyone,

Background Info

I am new here, but have pulled a lot of info in the past, so I thought I'd contribute.

I am trying to replicate the work of mycal for the iphone listed in this link:
http://www.zoneminder.com/forums/viewto ... f4cf2cfc3b

I would like to have an interface for live cameras on smart phones (I just switched from iphone to android, so I'd like it to work on both).

I know you can use the xhtml mobile method to gain access to events, but was not able to see live video... Until this is somehow integrated better into the core of ZM, I need to make a workaround.

The general idea is to see live shots of various cameras on my ZM setup, and I do not really need event view or playback on this. Mycal's script goes through the event directory and pulls everything out, but I was unable to really get it working how I wanted.

In the process I finally found how to stream an authenticated camera via this link:

http://<zmcomputer>/cgi-bin/nph-zms?mode=single&monitor=1&user=admin&pass=pass

Changing the mode to jpeg instead of single will not load on iphone or android, so I decided to just auto-refresh the page every few seconds. The example i found made it possible to refresh automatically without refreshing the page (I tried with just an iframe and it sucked)...

Code

So, here is my code I ended up with. Put it in a file called index.php, and then put that in a folder in (for instance) /usr/share/zoneminder/mobile/index.php

Code: Select all

<img src="http://<zmcomputer>/cgi-bin/nph-zms?mode=single&monitor=1&user=admin&pass=pass" id="myimage"> 
  
<script type="text/javascript"> 
function reloadimage() { 
 var myDate = new Date(); 
 img.src = 'http://<zmcomputer>/cgi-bin/nph-zms?mode=single&monitor=1&user=admin&pass=pass' + '&?t=' + myDate.getTime(); 
} 
if (document.getElementById) { 
 var img = document.getElementById('myimage'); 
 window.setInterval('reloadimage()', 3000); // milliseconds 
} 
</script> 

Load the page in the browser: http://<zmcomputer>/zm/mobile/

Notes

Near the bottom you can set the refresh interval, which is set to every 3 seconds for my setup. I've found that if you set it to 1 second, if the image does not have time to load, it will fail to load the next image, and the stream will freeze. If it freezes on slow connections, increase the interval.

Also, all the junk about the date in there is so it will add a time/date stamp to the end of the jpg file when it refreshes... this is to keep it from having problems with browsers caching the image. If you remove the date stamp it will no longer refresh.

For the Future

The next step for me is to write the web pages needed to select more than one camera, and maybe then have it pull the camera names from the events directory via php so this will work "out of the box" on any system. I'd also like to put in a catch for the 1fps problem, though I dont have a problem with 1/3fps, it is fine for mobile viewing.

If anyone way better in javascript than me knows a better way to do all this, please chime in.


Keep in mind if this is searched by google or anyone else for that matter, they will be able to get your password from the image location link, and probably in other ways.... keep your own security in mind when doing this.

One main reason I want this working well is so that I can have a motion event between a certain time of night trigger an email to my phone via SMS (which most carriers support), and I can click the link and be on the camera within a few seconds with streaming video.

I'll post any major work I get done in this thread in the future.
Post Reply