IP camera integration into the websites

When we take a look at some database of freely available video cameras, we can make sure that the popularity of web cameras that are integral to the promotion is on the uptrend. For example the database webcams.cz which is oriented to the Chech republic keeps a record of more than 900 cameras (to this day – July 2016). You usually can meet with web cameras on the websites that advertise some interesting places for tourists, cities, ski and sport resorts or on the websites with information about vehicular traffic or about the weather.

Thanks to the technological progress the picture definition rose from VGA (0,4 MPx) to 2 MPx. It often turns to the live stream in Full HD quality instead of a new screen every one minute.

The choice of suitable IP camera

It is necessary to know that requirements of IP cameras for promotional purposes can be different from requirements for IP cameras used for safety purposes.

For example the camera ability to switch to the night mode (black-and-white) that, if we talk about web cameras, spoils the impression of the lit city or sights. The suitable camera doesn´t include this mode or can switch it off. The interesting solution is the technology Lightfinder, Axis company.

When we choose the resolution, we have to know what output we expect. In case we maintain the imaging we can appreciate a picture sensor with four and more megapixels. If we want to make a live stream, with the respect to data transmission, the camera with HD or Full HD resolution is enough.

The last of important requirements is the documentation and open formats . Because of it the camera integration is easier. You can also appreciate the command to getting the actual picture back in picture/jpg or the videostream that is available by RTSP protocol.

The integration by loading the picture from camera

To load the picture into websites, we have to find the command for getting updated JPEG picture out from the camera or SDK documentation. Below you will find the examples what does such command looks like:

The examples of the commands to get the pictures

Axis Communication
Hunt Electronic
Sanyo HD Camera

If we can get the picture from camera, we can go over to integration into websites. Another option is the function of some cameras to send the picture with the same names to FTP server (it will get to overwrite the older picture). In such case we can load the picture and online presentation in the same time without added camera load, see red box below.

Refreshing of frame with a picture

It is older technology that was popular before javascript expansion. The principle of the refresh of a framework was used in the older IP camera models too and some of you could remember the recurrent sound effect „click“, that was used in Internet Explorer in the course of loading the page.

When we use this method, the line with refresh parameter and the time for automatic refresh (seconds) is pasted to the head. The browsers speed the content loading up by saving some of the files to the cache. Therefore we must stop the saving or we will see the first loaded picture.

<meta http-equiv="refresh" content="60" />
<meta http-equiv="cache-control" content="must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="pragma" content="public" /> 
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />

All you need is to add this tag <img /> with the link to the loading picture.

<img src="http://IP_ADRESA/GetImage.cgi" />

Than we add the html file into the website by using the <iframe />

Refreshing of camera image only

By using javascript we can solve the dynamic refreshing of the picture without using the frame. This way is more professional because it eliminates the previous solving disadvantages and makes the web styling for responsive web easier. The guest always see the completely loaded picture.

To make the writing simplier is used the jQuery library. We place the javascript code to the head of websites. This code loads, in default interval (milliseconds), the actual picture of a element with the category camera.

setInterval(function() {
  $('img.kamera').attr('src', $('img.kamera').data('refresh')+'?'+new Date().getTime());
}, 60000);

Díky jQuery lze snadno obnovit i větší množství zdrojů na jedné stránce.

setInterval(function() {
  $('img.kamera').each(function() {
    $(this).attr('src', $(this).data('refresh')+'?'+new Date().getTime());
}, 60000);

There is a feature <img /> with the class camera and the tag data-fresh in the body of websites. This tag links to the original url for loading the picture.

<img class="kamera" src="http://IP_ADRESA/GetImage.cgi" data-refresh="http://IP_ADRESA/GetImage.cgi" />

The IP cameras have limited number of connections that can be use at the same time. Although the requirement is finished after picture loading and it is possible to attend from tens to hundreds users every minute, the better solution is when we send the picture from camera to FTP web hosting or when we use the batch tasks for downloading to the web hosting. Another way is the PHP script for picture-on-demand.

The PHP script for the picture-on-demand

The PHP´s task is to solve the load that is result from excessive demands on the refreshing of the actual picture. The camera isn´t loaded with demands for new picture when the web traffic is high. This new image is downloaded just after the date of expiry and loaded from the web hosting for web visitors. The camera IP address is hidden and doesn´t require the anonymous access permission.

// soubor image.php

$address  = ''; // IP adresa kamery
$port     = '80';            // webový port kamery
$user     = 'admin';         // uživatelský účet
$pass     = 'admin';         // uživatelské heslo
$snapshot = 'GetImage.cgi';  // cesta k snímku za lomítkem (snapshot)
$ttl      = '60';            // čas uchování snímku na serveru v sekundách
$temp     = './temp/';       // název složky na serveru s právem zápisu

$remote   = 'http://'.$user.':'.$pass.'@'.$address.':'.$port.'/'.$snapshot;
$local    = $temp.pathinfo($remote, PATHINFO_FILENAME).'.jpg';

if((filemtime($local) + $ttl) < time()) {
  @file_put_contents($local, file_get_contents($remote));

header('Content-Type: image/jpeg');
header('Content-Length: '.filesize($local));
fpassthru(fopen($local, 'rb'));

The login with the user name and the password work if the camera use the verification via basic access authentication.

The script work correctly if the web hosting have allowed directive allow_url_fopen.

We call the script image.php instead of URL address in the websites body.

<img class="kamera" src="./image.php" data-refresh="./image.php" />

The integration in live stream form

The common streaming servers

The video streaming in real time is more popular thanks to the fact that the internet connection speed is rises. The IP cameras don´t allow to broadcast live streaming to the website without installation producer´s accessories. For this purpose we have a media streaming-server that downloads streamed video from camera and secures its compression to the format for PC and mobile phone browsers.

On the plus side, the streaming-server can push data load down because it downloads only one stream and secures the distribution of picture to website visitors. In case of good configuration it doesn´t connect to the camera if anybody doesn´t watch the picture.

This solution has one disadvantage, high cost. The prices of our services ranges from €30 to €750 a month and it depends on how many viewers is connected at the same time. (November 2014).

Some services, e.g. IPCamLive.com, offer the accounts free for less demanding users. Free users accounts include 100 viewers, lower quality and the absence of official way of uploading the player into the websites.

Live stream YouTube Live

One absolute innovation in the end of the year 2015 is opening live stream on YouTube servers. You need some IP camera, small Raspberry Pi and any linux edition, alternatively with existing Linux/Windows server.

To send the data is used multiplatform application ffmpeg. Before we set the script we must have created the user account YouTube and set live stream where we get the key that identifies your stream.

#! /bin/bash
#  nastavení živého vysílání na https://www.youtube.com/live_dashboard

rtsp_stream='rtsp://'  # Adresa URL RTSP streamu z kamery
youtube_url='rtmp://a.rtmp.youtube.com/live2' # Adresa URL serveru YouTube
youtube_key='*******************'             # Název streamu / klíč YouTube

ffmpeg -f lavfi -i anullsrc -rtsp_transport tcp -i $rtsp_stream -tune zerolatency -vcodec libx264 -c:v copy -c:a aac -strict experimental -f flv $youtube_url/$youtube_key

After finishing you can decide if anybody can find the live stream in YouTube or it will be private and the player will be on your own website.

Online TV with Axis and CamStreamer

NetRex with CamStreamer – an application running on any Axis IP camera, is sophisticated and technically undemanding way of live stream from IP cameras.

For the one-time license fee of €199 (July 2016) you will get the facility of live streaming from the IP camera to the major part of best known services. We can find YouTube, Facebook, Dailymotion, DaCast, uStream.tv, Twitch.tv, Wowza, Adobe Media Server and the opportunity for your own configuration of RTMP client on the list. No programming, no scripting.

Compared to the hosting services for online broadcast you will get your money back quickly. You will get the solution that is ready to use and it is not necessary to have another PC. If you have the IP camera from different producer or some old model, you have to rely on the previous solutions.

Note: The online TV playtvak.cz uses this platform too.

The end

I have informed you about ways of integration the IP camera into the websites or YouTube and Facebook profile. It is your choice which method is the best for your project. If you work with live stream or with archiving of pictures, you can appreciate CCTV Calculator.

You can see some examples on the website kamery.martinkaspar.net. Download the source codes here.