Roasted
August 26th, 2012, 07:11 PM
I have been using "Motion" for a while now for my video surveillance needs. To say it's bombproof and headache free is an absolute understatement. One thing I've been striving for is a way to view multiple mjpg streams on a single web page so I can monitor many cameras at once. Using some light HTML/CSS I accomplished that. My buddy planted the idea, what if you could rig up a GUI to input the IP/ports/scaling for you?
This got me wondering, how on earth do I get started? Am I in over my head?
Basically the code I'm looking at is this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { text-align:center }
.container {
background: #000000;
width:100%;
}
.motion {
border: 0;
text-align:center;
width: 25%;
height: auto;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<br />
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<br />
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
</body>
</html>
Really all that would be needed is a way to adjust the IP address, the port used, and the "width" parameter higher up. I can't see a need for anything else, as the goal would be for super easy and simple changes. This layout here currently works great for me, but I also added in the IP addresses and whatnot manually. Sure, easy enough to do it manually, but if it can be altered a bit to be a bit easier for some users out there, we'd have a winner.
Any/all insight would be greatly appreciated!
This got me wondering, how on earth do I get started? Am I in over my head?
Basically the code I'm looking at is this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { text-align:center }
.container {
background: #000000;
width:100%;
}
.motion {
border: 0;
text-align:center;
width: 25%;
height: auto;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<br />
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<br />
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
<a href="http://192.168.1.15:8081"><img class="motion" src="http://192.168.1.15:8081" /></a>
</body>
</html>
Really all that would be needed is a way to adjust the IP address, the port used, and the "width" parameter higher up. I can't see a need for anything else, as the goal would be for super easy and simple changes. This layout here currently works great for me, but I also added in the IP addresses and whatnot manually. Sure, easy enough to do it manually, but if it can be altered a bit to be a bit easier for some users out there, we'd have a winner.
Any/all insight would be greatly appreciated!