Seite 2 von 3

 

Second, you need the 'ipcam.php':

 

<?php
error_reporting(-1);
$bilder=array("http://192.168.10.100/cam.jpg",
"http://192.168.10.101/cam.jpg",
"http://192.168.10.102/cam.jpg");

$stream=array("http://user:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein./mjpg/video.mjpg",
"http://user:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein./mjpg/video.mjpg",
"http://user:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein./mjpg/video.mjpg");

if (isset($_GET["pic"]) AND is_numeric($_GET["pic"])) {
$bildpfad=$bilder[intval($_GET["pic"])];
header("Content-Type: image/jpeg");
if ($bildpfad!=="") {
readfile($bildpfad);
// print(file_get_contents($bildpfad);
}
}

if (isset($_GET["video"]) AND is_numeric($_GET["video"])) {
$videopfad=$stream[intval($_GET["video"])];
header('Content-type: multipart/x-mixed-replace; boundary=myboundary');
if ($videopfad!=="") {
readfile($videopfad);
}
}
exit();
?>

 

You need to modify the first array with ip adresses of your webcams. In this case three ipcams are defined. These cams offer the possibility to directly access a picture without authorization. When your webcam needs authorization use something like 'http://user:password@[IP of webcam]/cam.jpg'. Ask google how to access images from your ipcam, when it's not working.

When you want to use video streams of your ipcam, also define second array 'stream'. Again three ipcams are defined. This time with authorization 'user' and 'password'. You maybe need to modify these adresses for your specific webcam model. Example above works for most edimax or tplink models.

 

 

Next, we need another html site for displaying a simple video by reloading pictures of your webcam. Name it 'cam1m.htm':

 

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>my ip cam video</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#804080" vlink="603060" alink="#804080">

<p><img src="/portal/ipcam.php?bild=0" style="width: 1024px; height: 768px" name="webcam" alt="ipcam 1 (offline)"></p>

<form>
<select name="webcam" size="1" onChange="top.location.href=this.form.webcam.options[this.form.webcam.selectedIndex].value">
<option selected value="cam1.htm">ipcam 1</option>
<option value="cam1m.htm">ipcam 1 video</option>
<option value="cam1mm.htm">ipcam 1 video hq</option>
</select>
</form>

<form><input type=button value="Refresh" onClick="window.location.reload()"></form>

<script language="JavaScript">

var imageUrl=document.webcam.src;
var random=new Date().getTime();
var delay=2;
var counter=300;
var buffer=new Image;

function DisplayImage() {
document.webcam.src=buffer.src;
LoadNextImage();
}

function LoadBuffer () {
var trickname=imageUrl;
++counter;
trickname+="&counter="+(random+counter);
buffer.src=trickname;
buffer.onload=DisplayImage;
}

function LoadNextImage () {
setTimeout("LoadBuffer()",1000*delay);
}

LoadNextImage();
</script>

</body>
</html>

 

Javascript will reload a picture of your ipcam every n seconds. Modify 'var delay=x' to your prefered refresh rate. It's set to 2 seconds here.