To access multiple cameras on a local area network from a single web page, you need to proxy the requests from your web server. Since many netcams require BasicAuth to access images,
A PHP script to handle the proxy request can be found here: http://www.troywolf.com/articles/php/class_http/
To process a set of cameras, store the camera access data in an array such as this
$cams = array( "c30a" => array( "name" => "c30a", "type" => "http", "http" => "http://192.168.3.71/SnapshotJPEG?Resolution=640x480&Quality=Standard&Count=1", "http_user" => "<user>", "http_pass" => "<password>", "title" => "Backyard", "live" => "//192.168.3.71/CgiStart?page=Single&Language=0" ), "c20a" => array ( "name" => "c20a", "type" => "http", "http" => "http://192.168.3.73/SnapshotJPEG?Resolution=640x480&Quality=Standard&Count=1", "http_user" => "<user>", "http_pass" => "<password>", "title" => "Garage", "live" => "//192.168.3.73/CgiStart?page=Single&Language=0" ), } ?>
Include the above config.php in the php script that will handle the proxy request. It will look up the local area network destination from the ‘http’ element of the array, and pass the request along the camera, then copy the image returned from the camera to the caller.
url = $cam['http']; $h->postvars = $_POST; if (!$h->fetch($h->url, 0, "", $http_user, $http_pass)) { header("HTTP/1.0 501 Script Error"); echo "proxy.php had an error attempting to query the url"; exit(); } $http_user = ""; $http_pass = ""; if (isset($cam['http_user'])) $http_user = $cam['http_user']; if (isset($cam['http_pass'])) $http_pass = $cam['http_pass']; $h->url = $cam['http']; $h->postvars = $_POST; if (!$h->fetch($h->url, 0, "", $http_user, $http_pass)) { header("HTTP/1.0 501 Script Error"); echo "proxy.php had an error attempting to query the url"; exit(); } // Forward the headers to the client. $ary_headers = explode("\n", $h->header); foreach($ary_headers as $hdr) { header($hdr); } // Send the response body to the client. echo $h->body; ?>
To use this proxy from a web page, the javascript with jQuery would request an image from the same page as the main web site.
$('#c30a img').attr('src', 'proxy.php?cam=c30a');