{"id":3020,"date":"2016-05-26T23:26:32","date_gmt":"2016-05-26T22:26:32","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=3020"},"modified":"2025-06-03T01:57:55","modified_gmt":"2025-06-03T00:57:55","slug":"multi-picam-webserver","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/multi-picam-webserver\/","title":{"rendered":"Multi Picam Webserver"},"content":{"rendered":"<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_3020\" class=\"pvc_stats all  \" data-element-id=\"3020\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p>If you are thinking of buying\u00a0a Picam then I found the case that has the right lid to fit the camera is this one:<\/p>\n<p><a href=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/picase.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5188 size-large\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/picase-1024x576.png\" alt=\"picase.png\" width=\"590\" height=\"332\" \/><\/a><\/p>\n<p>bought from NewIT or a whole starter kit that has that case lid from PiHut:<\/p>\n<p><a href=\"https:\/\/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\">https:\/\/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<\/a><\/p>\n<p><a href=\"https:\/\/www.ebay.co.uk\/itm\/RASPBERRY-PI-3-8GB-Starter-Media-Centre-Kit-2016-Model-\/261984753417?hash=item3cff821709:g:XwgAAOSwq19XBncF\">https:\/\/www.ebay.co.uk\/itm\/RASPBERRY-PI-3-8GB-Starter-Media-Centre-Kit-2016-Model-\/261984753417?hash=item3cff821709:g:XwgAAOSwq19XBncF<\/a><\/p>\n<p>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:<\/p>\n<p><a href=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/mount.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-5191 aligncenter\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/mount.jpg\" alt=\"mount.png\" width=\"786\" height=\"786\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.ebay.co.uk\/itm\/High-Quality-Universal-CCTV-Security-Camera-Wall-Mount-Installation-Bracket-New-\/182047550805?var=&amp;hash=item2a62e12d55:m:mTQXD-s6SCQdxIZtFhkKKNw\">https:\/\/www.ebay.co.uk\/itm\/High-Quality-Universal-CCTV-Security-Camera-Wall-Mount-Installation-Bracket-New-\/182047550805?var=&amp;hash=item2a62e12d55:m:mTQXD-s6SCQdxIZtFhkKKNw<\/a><\/p>\n<p>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\u00a0your browser by having a copy on\u00a0all\/any PC\/smartfone connected to your LAN. Easy...<\/p>\n<p>Isn't the quality just fantastic?!<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/hUORBntR2OY?autoplay=1&amp;version=3&amp;loop=1&amp;playlist=hUORBntR2OY\" width=\"560\" height=\"315\" frameborder=\"0\" align=\"left\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>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!:<\/p>\n<p><strong><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/maps.meteoradar.co.uk\/GratisRadar\/505\/1082\/zonwolken?zoom=8\" scrolling=no width=500 height=500 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/strong><\/p>\n<p>Amending the web address for the IP addresses and ports of your home cameras, you get something like:<\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.3:8081\" scrolling=no width=480 height=360 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.4:8081\" scrolling=no width=480 height=360 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.7:8081\" scrolling=no width=480 height=360 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p>I happen to have this page in\u00a0\/var\/www\/index.html so this folder is listed as doc root in\u00a0\/etc\/apache2\/sites-available\/000-default.conf as:<\/p>\n<p><span style=\"color: #ff0000;\">&lt;VirtualHost *:80&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\">ServerAdmin webmaster@localhost<\/span><\/p>\n<p><strong><span style=\"color: #ff0000;\">DocumentRoot \/var\/www<\/span><\/strong><br \/>\n<span style=\"color: #ff0000;\">&lt;Directory \/&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\">Options FollowSymLinks MultiViews<\/span><br \/>\n<span style=\"color: #ff0000;\">AllowOverride All<\/span><br \/>\n<span style=\"color: #ff0000;\">&lt;\/Directory&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\">&lt;<strong>Directory \/var\/www\/<\/strong>&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\">Options Indexes FollowSymLinks MultiViews<\/span><br \/>\n<span style=\"color: #ff0000;\">AllowOverride All<\/span><br \/>\n<span style=\"color: #ff0000;\">Order allow,deny<\/span><br \/>\n<span style=\"color: #ff0000;\">allow from all<\/span><br \/>\n<span style=\"color: #ff0000;\">&lt;\/Directory&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">ScriptAlias \/cgi-bin\/ \/usr\/lib\/cgi-bin\/<\/span><br \/>\n<span style=\"color: #ff0000;\">&lt;Directory \"\/usr\/lib\/cgi-bin\"&gt;<\/span><br \/>\n<span style=\"color: #ff0000;\">AllowOverride All<\/span><br \/>\n<span style=\"color: #ff0000;\">Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch<\/span><br \/>\n<span style=\"color: #ff0000;\">Order allow,deny<\/span><br \/>\n<span style=\"color: #ff0000;\">Allow from all<\/span><br \/>\n<span style=\"color: #ff0000;\">&lt;\/Directory&gt;<\/span><\/p>\n<p>Once apache is restarted:<\/p>\n<p><span style=\"color: #0000ff;\">sudo service apache2 restart<\/span><\/p>\n<p>and the server connected to remotely, I get all 3 cameras in one webpage (night here):<\/p>\n<p><a href=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/3Picams.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-3027\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/3Picams-1024x576.png\" alt=\"3Picams.png\" width=\"590\" height=\"332\" \/><\/a><\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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!).<\/p>\n<p>If you want to place larger iframes at the same res the picams are sending you can try:<\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe align=left src=\"https:\/\/192.168.1.3:8081\" scrolling=no width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe align=right src=\"https:\/\/192.168.1.12:8081\" scrolling=no width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;center&gt;&lt;iframe src=\"https:\/\/192.168.1.10:8082\" scrolling=no width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;&lt;\/center&gt;<\/span><\/p>\n<p>I also doubled the clock text size in one in motion.conf - it's better.<\/p>\n<p><span style=\"color: #ff0000;\"># Draw characters at twice normal size on images. (default: off)<\/span><br \/>\n<span style=\"color: #ff0000;\">text_double on<\/span><\/p>\n<p><span style=\"color: #ff0000;\"> text_left GARAGE<\/span><\/p>\n<p>On a 24\" LCD screen:<\/p>\n<p><a href=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/3camstext.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-3041\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/3camstext-1024x576.png\" alt=\"3camstext.png\" width=\"590\" height=\"332\" \/><\/a><\/p>\n<p>4 cams with no aligns:<\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.3:8081\" \u00a0width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.4:8081\" \u00a0width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.7:8081\" \u00a0width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><span style=\"color: #ff0000;\">&lt;iframe src=\"https:\/\/192.168.1.8:8081\" \u00a0width=960 height=720 frameborder=no&gt;&lt;\/iframe&gt;<\/span><\/p>\n<p><a href=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/4picams.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-3046\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/uploads\/2016\/05\/4picams-1024x576.png\" alt=\"4picams.png\" width=\"590\" height=\"332\" \/><\/a><\/p>\n<p>You can now browser zoom (Shift +) to a larger res.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_3020\" class=\"pvc_stats all  \" data-element-id=\"3020\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/stevepedwards.today\/DebianAdmin\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p>If you are thinking of buying\u00a0a Picam then I found the case that has the right lid to fit the camera is this one: bought from NewIT or a whole starter kit that has that case lid from PiHut: https:\/\/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 https:\/\/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 <a href=\"https:\/\/stevepedwards.today\/DebianAdmin\/multi-picam-webserver\/\" class=\"more-link\">...<span class=\"screen-reader-text\">\u00a0 Multi Picam Webserver<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-3020","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"a3_pvc":{"activated":true,"total_views":2,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/3020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=3020"}],"version-history":[{"count":2,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/3020\/revisions"}],"predecessor-version":[{"id":10305,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/3020\/revisions\/10305"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=3020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=3020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=3020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}