News:

Registered a URL and setup a forum as the IPCam stuff really needed its own site vs my irregular blog posts about IPCam hacking at http://www.computersolutions.cn/blog

Author Topic: A How To Embed Any IP Camera In Webpage Using 1 Line  (Read 2718 times)

  • ***
March 24, 2014, 06:29:41 am
Any IP Camera owner can optionally easily get and use All my many different IP Camera examples bundled together with one hour of one-on-one support to implement them. Save Time and Money Click Here!

For the full list of live demo IP Cameras. Please click the link below:

http://107.170.59.150

Many people have asked for ways to embed their IP Cameras in webpages having the images from their cameras refresh automatically. Here is a way to do it using one line in a HTML file. Some things need to be explained and a working example is also provided.

You can add as many IP Cameras as needed on the same webpage each only requiring 1 line of HTML code.

Here is the one line needed in the webpage:

Code: [Select]
<img src="YourIPCamInfo&t=" width='' onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />

Example lines using the above for both MJPEG and H.264 Based IP Cameras:

MJPEG Based Foscam IP Camera:

Code: [Select]
<img src="http://DDNSorISPIPAddress:PortForCamera/snapshot.cgi?&user=admin&pwd=YourPassword&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />

H.264 Based Foscam IP Camera:

Code: [Select]
<img src="http://DDNSorISPIPAddress:PortForCamera/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=YourPassword&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />

Note: Replace the DDNS or IP Address and Port above as well as the admin and YourPassword with valid IP Camera User Ids and their passwords and leave the &t= at the end before the double quotes.

You can also add text in the alt='' tag like alt='MyIPCam' as an example. So that when people hover their mouse over the image of your camera they see a name.

Additionally. If you notice in the first example there is a width='' statement. You can add width='640' for example if your IP Cameras image by default is large to control the size displayed with any value you wish while keeping the aspect ratio height of your IP Cameras image if needed.

It's suggested to create a visitor User Id for your IP camera when doing this. So that nobody could use the User Id and Password used to move your camera. Such as an Operator User Level Id. For sure, please NEVER use an Admin User Level Id for your IP Camera for anything that will be public.

The value of 1000 represents the refresh rate which is 1000 Milliseconds which equals 1 second. If you want your IP Camera to refresh more or less often then please change 1000 to the value of your choice.

The value of 5000 represents how often an attempt should be made to refresh when there is an error which also is in Milliseconds which equals 5 seconds. If you want to retry refreshes that fail sooner or later then please change 5000 to the value of your choice.

Working Example ("Which has a 2 minute limit for demonstration purposes included") using a MJPEG based IP Camera:

http://107.170.59.150/V31/EmbedIPCameraInWebPageOneLine.htm

The above methods are NOT secure methods. Meaning that they expose the DDNS and/or IP Address location and Port of your IP Camera and a User Id and Password for your IP Camera. The same methods can be done securely as well. In fact the working example shown here is using the secure methods.

Please see this for those methods:

http://www.openipcam.com/forum/index.php/topic,748.msg3661.html#msg3661

Don
« Last Edit: March 27, 2016, 02:08:31 am by TheUberOverLord »