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.