Multi Picam Webserver

If you are thinking of buying a Picam then I found the case that has the right lid to fit the camera is this one:

picase.png

bought from NewIT or a whole starter kit that has that case lid from PiHut:

http://www.ebay.co.uk/itm/Deluxe-Black-Case-for-the-Raspberry-Pi-3-2-and-Model-B-B-Plus-v-1-2-/181565226592?hash=item2a46217e60:g:xpkAAOSwHnFVi9dm

http://www.ebay.co.uk/itm/RASPBERRY-PI-3-8GB-Starter-Media-Centre-Kit-2016-Model-/261984753417?hash=item3cff821709:g:XwgAAOSwq19XBncF

and can have a cheap indoor mount carefully screwed into the rear of the case by carefully self tapping it into the case rear, is this type:

mount.png

 

http://www.ebay.co.uk/itm/High-Quality-Universal-CCTV-Security-Camera-Wall-Mount-Installation-Bracket-New-/182047550805?var=&hash=item2a62e12d55:m:mTQXD-s6SCQdxIZtFhkKKNw

If you have apache2 installed on a linux PC you can use it as a central server for viewing your multiple Picameras by using iframes in html. Apache is only required if you want to NAT access your picams from the Internet with the apache server as the central ip address for your router setup, else just create an index.html page of the code below, and open it in your browser by having a copy on all/any PC/smartfone connected to your LAN. Easy...

Isn't the quality just fantastic?!

This original code - from a weather forecast page - was a single html iframe block - no other html code is required in the index.html page!:

<iframe src="http://maps.meteoradar.co.uk/GratisRadar/505/1082/zonwolken?zoom=8" scrolling=no width=500 height=500 frameborder=no></iframe>

Amending the web address for the IP addresses and ports of your home cameras, you get something like:

<iframe src="http://192.168.1.3:8081" scrolling=no width=480 height=360 frameborder=no></iframe>

<iframe src="http://192.168.1.4:8081" scrolling=no width=480 height=360 frameborder=no></iframe>

<iframe src="http://192.168.1.7:8081" scrolling=no width=480 height=360 frameborder=no></iframe>

I happen to have this page in /var/www/index.html so this folder is listed as doc root in /etc/apache2/sites-available/000-default.conf as:

<VirtualHost *:80>
ServerAdmin webmaster@localhost

DocumentRoot /var/www
<Directory />
Options FollowSymLinks MultiViews
AllowOverride All
</Directory>
<Directory /var/www/>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
</Directory>

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
<Directory "/usr/lib/cgi-bin">
AllowOverride All
Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
Order allow,deny
Allow from all
</Directory>

Once apache is restarted:

sudo service apache2 restart

and the server connected to remotely, I get all 3 cameras in one webpage (night here):

3Picams.png

I started with minimum resolution sizes as one page is handling the video data for 3 cameras, but now you can tweak the image sizes to suit your system or screen size - maybe in multiples of 160/120 pixels from the default resolutions of 320 x 240 but remember you have to change the res in Motion.conf too else you will crop the image if it's set larger in Motion.

Now you can also add this servers internal network IP address to your router's NAT translation list so you can access this page from your DDNS account from the web.

I've just noticed that the clocks are missing on the live feed so have to look at adding that in the Motion conf file (it was iframe res size - they were cropped!).

If you want to place larger iframes at the same res the picams are sending you can try:

<iframe align=left src="http://192.168.1.3:8081" scrolling=no width=960 height=720 frameborder=no></iframe>

<iframe align=right src="http://192.168.1.12:8081" scrolling=no width=960 height=720 frameborder=no></iframe>

<center><iframe src="http://192.168.1.10:8082" scrolling=no width=960 height=720 frameborder=no></iframe></center>

I also doubled the clock text size in one in motion.conf - it's better.

# Draw characters at twice normal size on images. (default: off)
text_double on

text_left GARAGE

On a 24" LCD screen:

3camstext.png

4 cams with no aligns:

<iframe src="http://192.168.1.3:8081"  width=960 height=720 frameborder=no></iframe>

<iframe src="http://192.168.1.4:8081"  width=960 height=720 frameborder=no></iframe>

<iframe src="http://192.168.1.7:8081"  width=960 height=720 frameborder=no></iframe>

<iframe src="http://192.168.1.8:8081"  width=960 height=720 frameborder=no></iframe>

4picams.png

You can now browser zoom (Shift +) to a larger res.

Comments are closed.

Post Navigation