We now have two bird boxes which can stream video across our dedicated bird box wifi network.
Prompted by NestBoxTech I have spent a couple of hours this morning looking at simple and tidy ways to monitor the video created by the motion application.
The easiest way has got to be to use a web browser.
Ken Larvsen's "motion" program has the capabilities to provide an mjpeg video stream. Using a web browser like Firefox you just have to enter the URL in the form:-
IPaddress:port
...for example:-
192.168.0.15:8081
...where the IP address is the address of the system running motion and the port is the one configured for the motion webcam server.
As the stream is mjpeg, this may not work for all web browsers, but it certainly works on Firefox.
Multiple streams
With more than one stream you could use browser tabs for each stream and just switch between them. But it would be nice to be able to view 2 or more video streams at the same time.
This is really easy. It just involves creating an HTML file and adding a few lines of code. Then you point your browser at this page rather than the streams and hopefully see something like this:-
 |
| ...just add birds |
The basic code to display a single stream looks something like this:-
<img src="http://192.168.0.15:8081?refresh=0.0" width="640" height="480">
...and I think it is clear from the parameter names what each of them do.
To create the image above, my HTML file looks like this:-
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Motion Video</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tr><td style="width: 50%;"><a href="file:///home/steve/TestVideo2014.html">BirdBox 2014</a></td>
<td style="width: 50%;"><a href="file:///home/steve/TestVideo2015.html">BirdBox 2015</td>
</tr></table>
</body>
<img src="http://192.168.0.15:8081?refresh=0.0" width="640" height="480">
<img src="http://192.168.0.17:8081?refresh=0.0" width="640" height="480">
</html>
I have also created two addition HTML files, so that I can see the selected box larger, with a smaller view of the other box.
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Motion Video Test</title></head>
<body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tr><td style="width: 5%;"><a href="file:///home/steve/TestVideo1.html">main</td>
<td style="width: 70%;">BirdBox 2014</a></td>
<td style="width: 25%;">BirdBox 2015</td></tr>
</table>
<img src="http://192.168.0.15:8081?refresh=0.0" width="960" height="720">
<img src="http://192.168.0.17:8081?refresh=0.0" width="320" height="240">
</html>
...which looks like this:-
It is just a matter of playing around with width & height settings to suit your computers screen. Viewing the browser at full-screen (by hitting F11) also helps.
Edit 28-mar-2015:-
Browser Refresh
Our battery operated boxes only run when there is activity. So the video stream from motion frequently stops, and then is restarted the next time the system starts when a bird enters the box.
When the stream is restarted, the remote browser does not show video because it must be refreshed. This can be achieved automatically by adding a refresh statement to the head section of the HTML pages like this.
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Motion Video</title>
<meta http-equiv=refresh content=60>
</head>
This will refresh the page every 60 seconds.
No comments:
Post a Comment