Auto-login into the IP Camera

Question

I have a IP Camera and I would like to show liveview at my webpage.

IP Camera don't allow for anonymous log in so I need to put username and password while connecting.

I have javascript:

<img src="http://user:password@camera_ip_address/cgi-bin/jpg/image.cgi?" width="640" height="480" name="refresh">

<script language="JavaScript" type="text/javascript">     
image = "http://camera_ip_address/cgi-bin/jpg/image.cgi?"
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh"].src = image+tmp
setTimeout("Start()", 100)
}
Start();       
</SCRIPT>

And it works ok in firefox but:

http://user:password@camera_ip_number

don't work in other browsers (it popup a form to enter username and password).

But in PHP you can use user:password I've check it by using:

<?php
header('Content-type: image/jpeg');
print( file_get_contents( 'http://user:password@camera_ip_address/cgi-bin/jpg/image.cgi?' ));
?>

of course it shows only one frame but you don't have to enter username and password.

How can I log in into IP Camera using PHP ? If I could log in one time while enetering webpage, my javascript will work ok because browser will remember username and password until I close the browser.

I don't know how to send username and password to log in.

Sorry for my English.

Answer 1

Ok, so I've made it work using PHP and JavaScript. Maybe it will be helpful for someone else:

Save the PHP file as, for example, snapshot.php:

<?php
$img="http://user:password@camera_ip/cgi-bin/jpg/image.cgi?"; 
header ('content-type: image/jpeg'); 
readfile($img); 
?> 

In the HTML file, add this script:

<img src="http://domain.com/snapshot.php" width="640" height="380" name="refresh">

<script language="JavaScript" type="text/javascript">     
image = "http://domain.com/snapshot.php"
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh"].src = image+tmp
setTimeout("Start()", 300)
}
Start();       
</script>

It works ok under every browser. If I set timeout to less then 300, there is some lag. I don't know why that would be caused by; maybe internet connection or website speed.

Answer 2

You may be able to use Apache mod_rewrite instead - Less overhead from the PHP stack, and probably generally faster. See this page for more information.

Choose one of these.

Apache .htaccess - Your page requests http://yoursite/livecam/image.jpg, which is run through Apache's proxy to your camera.

RewriteEngine on
RewriteBase /livecam/
RewriteRule ^image.jpg$ http://user:password@camera_ip_address/cgi-bin/jpg/image.cgi [P]
ProxyPassReverse /livecam/image.jpg http://user:password@camera_ip_address/cgi-bin/jpg/image.cgi

In PHP, create a file called image.php - Your page requests http://yoursite/image.php, which streams the image to whatever requests it.

<?php
$file = 'http://user:password@camera_ip_address/cgi-bin/jpg/image.cgi';

if (file_exists($file)) {
    header('Content-Type: image/jpeg');
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit;
}  
?>

Both will proxy the image through your server. It's generally bad practice to give the username and password on any public page, even if an attacker can't damage anything of concern.

See readfile() on PHP.net

Your code would look like (replace image.php with livecam/image.jpg if using the Apache version). I also shortened your code a bit.

<img src="http://yourserver/image.php" width="640" height="480" name="refresh">
<script language="JavaScript" type="text/javascript">setTimeout(function() {document.images["refresh"].src = "http://yourserver/image.php?"+math.random();}, 100);</SCRIPT>

Answer 3

    IP:port/cgi-bin/jpg/image.cgi?&user=XXX&pwd=XXX
    IP:port/cgi-bin/jpg/image.cgi?&usr=XXX&pwd=XXX
    IP:port/snapshot.cgi?&user=XXX&pwd=XXX';
    IP:port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXX&pwd=XXX';