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.
Works with any IP Camera
Accessible From ANY Computer, Laptop, Tablet, Phone and TV
These same methods can be used with many imaging devices as well as refreshing weather picture information automatically at scheduled intervals while setting the size as well. As some examples.
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:
Example lines using the above for both MJPEG and H.264 Based IP Cameras:
MJPEG Based Foscam IP Camera:
H.264 Based Foscam IP Camera:
Note: Replace the DDNS or IP Address and Port above as well as the admin and YourPassword with valid IP Camera User Id and their password 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. Of course you can also use height='' as well 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/EmbedIPCam...ageOneLine.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 list for those methods:
Note: Some images are small in some of the live IP Camera demonstrations. They can be any sizes.
Complete List With Links To All Live IP Camera Example Demos:
http://107.170.59.150/
Don
Works with any IP Camera
Accessible From ANY Computer, Laptop, Tablet, Phone and TV
These same methods can be used with many imaging devices as well as refreshing weather picture information automatically at scheduled intervals while setting the size as well. As some examples.
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:
HTML Code:
<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='' />
MJPEG Based Foscam IP Camera:
HTML Code:
<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='' />
HTML Code:
<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='' />
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. Of course you can also use height='' as well 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/EmbedIPCam...ageOneLine.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 list for those methods:
Note: Some images are small in some of the live IP Camera demonstrations. They can be any sizes.
Complete List With Links To All Live IP Camera Example Demos:
http://107.170.59.150/
Don
Comment