You want to integrate your ip camera in your website with live picture or video? But without exposing your ip camera to the internet?
For this setup you will need a raspberry pi, banana pi or another webserver in the same network as your ipcam.
We will program a small html and php solution now, which is easy to modify and integrate in your website.
Many older but also newer ip cams offer webinterfaces and webcam access with unsecure http instead of https. When your ip cam is connected directly or via portforwarding to the internet it's potentially a target for hacking. To avoid direct ip cam access we will use a small html page for displaying webcam image and menu and a simple php script which will grab pictures and videos from your internal ip cam.
First, setup your webserver. I use a raspberry pi with raspbian, apache, php and https support. There are good tutorials how to setup your webserver.
In order to access pictures and videos of your ip cam you need specific knowledge of your device. Ask google or manufacturer how to access pictures and videos on your device. For example: On edimax or tp link devices you can configure access to live pictures via http://[IP]/cam.jpg. And video stream is accessible under http://username:password@[IP]/mjpg/video.mjpg
![http://[IP]/cam.jpg](http://[IP]/cam.jpg){kind=link}
In the following setup, your ipcam stays behind your routers firewall. Html-page is interacting with an php-script which will grab pictures or videos from your internal ipcam. Access to your html-page can be restricted by using .httaccess.
Now, we need a html site for displaying webcam picture, menu and a refresh button. Name it 'cam1.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</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#804080" vlink="603060" alink="#804080"><p><img src="/portal/ipcam.php?pic=0" width="1024" height="768" alt="ipcam 1"></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>
</form></body>
</html>
Most of the code is for defining colors and displaying navigation. Only one line of html code is needed for displaying the image of webcam '0':
<p><img src="/portal/ipcam.php?pic=0" width="1024" height="768" alt="ipcam 1 (offline)"></p>
This will execute 'ipcam.php' with parameter 'pic=0' which will grab a picture from your ipcam.
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.
Finally, we want to grab a real video stream out of your ipcam. Name it 'cam1mm.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 hq</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#804080" vlink="603060" alink="#804080"><p><img src="/portal/ipcam.php?video=0" width="1024" height="768" 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>
</form></body>
</html>
Again, it's only one line of html-code to display the video stream.
<p><img src="/portal/ipcam.php?video=0" width="1024" height="768" alt="ipcam 1 (offline)"></p>
When you set correct path, username and password in 'ipcam.php' you will see a live stream of your ipcam now.
To protect your webcam from unauthorized access, use .htaccess and a https-connection.
This script is meant as base for your own ideas. There is for sure room for improvements.