How To Wiki
Advertisement
ESC34 show24

Embedding IP Cameras Using HTML and Scripting[]

Note: many of the links below are no longer in service, and the accompanying information may be obsolete. It has not been updated in years.

Many different IP Camera live demos are used here to better help demonstrate the different methods and approaches shown here. By using live example IP Cameras.

Live Demos Using Many Different IP Camera Brands and Models .

Generic One Line Methods That Work With Any IP Camera[]

You can embed virtually any IP Camera in a web page using one line of HTML quickly and easily that will not be using any controls for the IP Camera. You can set the refresh rate of how often the image of the IP Camera will be refreshed from the IP Camera as well:

Embed IP Camera In Web Page Using One Line of HTML .

Generic And Secure Methods That Work With Any IP Camera Brands And Models[]

The downside of not using secure methods to embed and display your IP Cameras in Web Pages and Web Sites is that you expose the DDNS/ISP IP Address, Port and User Credentials for your IP Camera when doing so. Secure methods do not expose these things and allow you to still Embed your IP Camera in Web Pages and Web Sites but allow you to do so without exposing any of this information about your IP Camera.

Virtually any IP Camera and even any imaging device that can provide Snapshots via HTTP or HTTPS can use secure methods to display Single or Refreshed Snapshots on and in web pages, Blogs, Social Media Sites, Instant Messengers and in Emails.

Here are some examples of doing just that:

Live Demonstrations Of Secure Methods Of Embedding IP Cameras

The above secure methods are generic but were initially designed for Foscam IP Camera models and can be used for any IP Camera and many Imaging devices. Allowing the images produced to be viewed by any Internet Browser capable devices that are running on any Operating System and using any Browser. From Computers to Tablets and Phones to TVs.

One additional benefit among many others when using secure methods to embed and display your IP Cameras in Web Pages is the ability to include real-time images using IMG tags in many Blogs, Forums, Social Media sites and other Web Pages.

IP Camera Generic Non-Secure Methods With IP Camera Controls[]

There is no one size fits all example for non-secure methods, when it comes to embedding an IP camera or IP cameras in web pages and web sites where you will allow controls for the IP Camera to be used. This is due to the interfaces being different between brands, models and types of IP cameras.

Generally, because of this, it requires that you contact the manufacturer or supplier of an IP camera and ask them for documentation on how to interface to your IP cameras.

In order to be device and browser neutral most HTML interfaces use Javascript or jQuery methods. Using other Scripting methods could cause your web page or website visitors using some browsers and devices to not be able to view or access your IP cameras.

Embedding IP Cameras In Web Pages Have Personal Benefits[]

Many people think that the only purpose of embedding an IP camera in a web page is for public access for your IP cameras purposes only.

This is not true. You can also Email that web page, as an Email attachment, to yourself as well. You might ask "Why would I do that?".

The answer is. You most likely, will find yourself somewhere, in the future. Where you don't have access to the normal Internet browser capable devices you normally have access to. Using this method. When or if you encounter this situation and the devices, that you do have access to, don't support your normally used IP cameras interface.

You can simply access your own Email, from that same device and open the attachment and easily access your IP cameras, from any Internet browser capable device. Call this an "Emergency Backup Plan" for personal use.

So. As you can see. This kind of tool, should be another tool, in your IP cameras toolbox of tools. For your IP cameras. Especially more so, when you have no place to store a copy. Like a web site or social media site. When and if you encounter a situation, like this.

IP Camera Video Streams And Browser Incompatibilities[]

Most IP cameras come with some interface abilities to provide video streams that can and could be used in web pages and websites.

The issues with using these video streams is that their video stream formats, generally are not compatible with all browsers on all Internet capable devices. Because of this, it may not be a good idea to use video streams in web pages or websites, unless you are feeding a video server that has a video player interface that can work with all devices and browsers.

Generally, video servers that provide these types of services for live streaming video are not free, and charges can vary by the number of visitors to your web page or websites at any given moment that you wish to support.

User Levels For IP Camera Access From Web Pages and Websites[]

Most IP cameras have different user levels. This allows you to control what user Id can perform what actions. If you only wish to allow people to view your web page or websites that show your IP cameras, then you would use a low level user Id, that the person could not use to control or configure your IP camera.

If you do wish the ability for your visitors to use some controls of your IP Cameras, then you may need to use a higher user level in your Web Page and Websites in order to allow the controlling or configuration of your IP cameras to take place. If you were to try and do these things, using the wrong user level for your IP camera, these things will fail.

Many IP cameras allow you to pass the user Id and password for each control or configuration command sent to the IP camera. The methods used to do this, may not work in all browers. Because of this, it becomes important to do browser testing with your web page and websites, to validate, that the methods you are using, do work with all browsers. If you don't do this, then it is possible that all visitors using those browsers that fail, will not be able to view or access your IP cameras, from those browsers.

When choosing what user level to use in your web page or websites. It's important not to use the highest user level that could be used to re-configure or disable your IP Cameras. Anyone could simply view the HTML source code of the web page or websites, to locate the user level Id and Password you are using and attempt to access the IP cameras standard Interface to do this.

There is no requirement to include this user level and password information in your web page or web sites. However if you choose not to do this, your web page or website visitor maybe prompted to login to your IP camera, each time they wish to view or control your IP camera, from your web page or website.

IP Camera Connections test[]

IP camera connections include video streams connected directly to the IP Camera. Each video stream created counts as a connection and remains a connection until that video stream is stopped. Formal logons to the IP camera such as using the standard interface provided by the IP camera, which remains a connection until the browser window is closed for that interface. Third party applications that access your IP cameras can create more than one connection per IP camera. These connections will remain as connections until the third party software releases those connections or the third party application is stopped.

IP Camera Finite Connection Limits[]

Most IP cameras have some finite limit of how many connections can be in use to a specific IP camera at any given moment. Which may also impact your ability to have many people viewing your IP cameras, from a web page or website at the same moment in time.

While you maybe able to embed your IP camera into a web page or website where you personally can see your IP camera there, while testing your web page or website. After three other people are doing the same thing, as one example, at the same time. Others visiting your web page or website, may not be able to see your IP camera there, at that same time. This is because your IP camera has reached any connection limit it may have.

Locking Yourself Out Of Your IP Camera[]

If your IP camera reaches any maximum connection limit, it may have. You the owner of the IP camera, could be denied access to the IP camera due to the IP camera having already reached the maximum connections in progress at the same moment in time limit. If this were to happen, you would not be able to gain access to your IP camera unless or until one of those connections free up or you reboot or unplug the IP camera to force the other connections to drop.

IP Camera Bandwidth Usage[]

You may have bandwidth limits in place from your ISP ("If your IP camera will be providing video from a ISP connection") or Web Hosting company. Generally there are monthly limits of bytes for both, that can lead to having your account suspended if you exceed them.

You may want to include methods that limit FPS ("Frame Per Second") rates when your IP cameras are displaying video in web pages or on websites. Since normally, you have no real control on when and how many people may visit or how long they will stay on the web page or website that is displaying your IP camera video.

Unless your IP camera is being hosted by a Web Hosting company, or you are re-feeding your IP cameras video feed to your Web Hosting company, which is being displayed on a web page or website, generally, you only need to worry about any bandwidth limits your ISP has in place, that is hosting the IP cameras.

Making Sure Any Internet Browser Capable Device Can See Your IP Cameras[]

Whatever methods you decide to use to embed and display your IP camera or IP cameras in a web page or on websites. It's very important that any and all Internet browser capable devices, Computers, Phones, Tablets and even TVs can be able to see your IP cameras that are running on any Operating System and using any browser. Using those methods.

IP Camera Examples Of Proper Methods With Live Demos[]

Here are three examples, that work with many different IP camera brands, models and clones ("IP cameras with no brand name"). One is for MJPEG based IP cameras, another is for older H.264 based IP cameras, the other is for newer H.264 based IP cameras.

Because Of The Methods The Three Examples Below Use[]

  • They show both JavaScript and jQuery methods.
  • There is no finite limit on how many people can be viewing your IP camera from a web page or website. This is because these three examples never formally logon to the IP Camera, which means they never create and use a connection.
  • Prompt the visitors using your web pages and websites to provide user and password information or automatically use specific user level Ids and passwords.
  • Provide a different display to the visitors using your web pages and websites based on user levels.
  • You can configure the FPS ("Frame Per Second:) rates you wish to use to display your IP camera video on web pages and websites. You can also allow the viewer to change the FPS rate as well, if you choose.
  • Optionally limit how long people can view your IP cameras on web pages and websites before they are sent to another web page or website.
  • Use and configure, many configuration options that include allowing IP camera controls to be used or not used by your web page or website visitors.
  • Works with all and any Internet browser capable devices, that are using any Operating System and any browser

Example with live demos using MJPEG based IP cameras in web page and websites

Example with live demos using older H.264 based IP cameras in web page and websites

Example with live demos using newer H.264 based IP cameras in web page and websites

IP Camera Manufacturer Or Supplier Interface Documentation[]

The three examples above, were created by using the manufacturers interface documentation listed in the links below, for the three types of IP camera examples above:

The above examples are known to work with many different IP camera brands and models, including but not limited to Agasio, Astak mole, Cybernova, DBPower, Dericam, DSN, EasyN, EasySe, Foscam, Heden, NCH, NEO, NVH, Suneyes, Wansview and others, as well as many IP camera clones ("IP Cameras with no brand name") sold on eBay, Amazon and other web sites.

Designing Methods For Your IP Cameras[]

If the above examples do not work with your IP cameras, you will need to create different methods using the interface specifications documentation provided by your IP camera manufacturer or supplier.

Using Live Demos To Get Ideas For Your IP Cameras In Web Pages And Web Sites[]

Since the above examples include many live demos. Including the display of single IP cameras as well as multiple IP cameras, of the same brand and model or different brands and models at the same time, in web pages and websites. You should be able to at least see, how to embed your IP cameras in web pages and websites correctly, using proper methods, that avoid the issues listed here. When doing the same for your IP cameras.

How To Get The Highest FPS ("Frames Per Second") Rates For Your IP Cameras[]

Example: Example of getting the highest FPS rates for your IP Cameras

Embedding Web Pages In IP Camera Firmware[]

Many IP Cameras can be used as a web host or web server. This allows you to create custom interfaces that can be used for the camera or to simply host other content you may wish to host without the need to have a formal website.

This can be done in many cases, by adding your custom changes to the actual firmware of the IP Camera. Here is a detailed example of doing that.

Example of changing/modifying IP Camera firmware

IP Camera Vulnerabilities To Be Aware Of For Remotely Accessible IP Cameras[]

There are many exploits in the wild, at any given moment in time, for IP Cameras. Some of them can access IP Camera configuration information. This can expose your IP Camera, Email, FTP and DDNS User and Password information. Which could cause major privacy issues by abusing that information.

Here is some information on those exploits and this information is updated often.

New IP Camera Exploits You Need To Be Aware Of

Cloud based streaming solution for IP cameras[]

As discussed above, It’s not easy to display live video stream from an IP camera on a web page because you need wide internet bandwidth is you want to serve several viewers at the same time and you need a great video player that is compatible with the major browsers.

But fortunately there are some cloud based services providing really simple solution for this. One of the best is http://ipcamlive.com. This service can receive RTSP/HTTP video stream from an IP Camera and can broadcast it to the viewers. IPCamLive has Flash/HTML5 video player component that will display the video on PC, MAC, tablet or mobile. The greatest thing is that this site generates the needed HTML snippet for embedding the live video. This snippet is really simple like this:

<iframe src="http://ipcamlive.com/player/player.php?alias=mycam" width="800px" height="600px"/>

So the only thing we have to do is to copy past the generated snippet without modification into our web site.

YouTube Live[]

You can stream a live video on YouTube as well. See https://support.google.com/youtube/answer/2474026?hl=en You have to push RTMP video to YT servers. You have transcode RTSP to RTMP with FMLE http://www.adobe.com/products/flash-media-encoder.html Axis IP cameras have a direct YouTube integration. See http://camstreamer.com/

Advertisement