Adding stream from ip camera to your site

Currently, the online broadcasting area is developing more actively, namely the transmission of video and audio stream in real time to a large number of users (devices) via the Internet. For example, a football match, a surgical operation, a product presentation, all of which can be a plot for online broadcasting.

The source of the broadcast signal can be webcams, IP cameras, smartphone video cameras, network tape drives and media servers. You can view translations both from a computer and from mobile devices: smartphones, tablets. Next, we will consider the IP camera as a broadcast source, as one of the most affordable and common solutions.

A user who wants to embed a stream from an IP video camera into his site must choose a way to organize online broadcasting. When writing this article, I used an Axis IP camera to demonstrate. Similarly, you can use cameras from other manufacturers.

Method 1. Broadcast video stream from IP camera directly

This is the easiest way to broadcast, since it requires only an IP camera and a network connection, preferably (but not necessarily), with a static IP address. The IP address can be either external or internal / local (in this case, port forwarding on network equipment will be required). To display the online stream on the site, add the html code of the IP camera player to the page code.
')
Using the Axis P1425-LE camera as an example, the sequence of steps will be as follows:

1) Go to the Live-View page of the camcorder:



2) Copy the html-code of the player to the video camera from the source code of the camera page (right-click on the image from the camera and select the Inspect element item):



3) In the html-code, we enter the information about the IP address of the camera as IP-address / then the html-code and remove the code fragment “? generated by the camera, pointing to a specific video frame at a specific point in time, that is, in fact it is a single screenshot of the frame). The main objective of this manipulation is to obtain the stream address from the camera.
4) The resulting string is inserted into the code of your site in the desired location of the player. An example of my site:



And the result:



The main advantages of this method are: ease of implementation, no additional costs. However, this method has the following disadvantages:

• getting online stream in jpeg format. This format is demanding on bandwidth and often gives a “slow down” image. To receive a stream, for example, in H.264 format, you may need to install an additional video player (browser plug-in) on the client device, which is not always convenient;
• Due to frequent restrictions on the camera connection channel, there may be significant restrictions on the number of simultaneous connections;
• the maximum number of connections is limited by the performance of the camera processor (usually 4-6 viewers);
• As a rule, to record the broadcast you need to use additional software;
• limited cross-platform: to view the stream from the camera you may need to install additional software, especially important for mobile devices;
• Low security: The IP address of the camera is available in the source code of the page.

Method 2. Organize your own media server

A media server is designed to receive media streams from various sources or media files and distribute them for viewing on various user platforms. A distinctive feature of media servers is the support of sources of various formats. Then the signal in the required format is transmitted to the client devices using the required protocol.

In addition to the main function of organizing broadcasting signals, the media server can provide additional functionality: restricting access to broadcasts, placing video and audio files on the server and providing access to them, recording broadcasts, and so on.

The most popular media servers include:

Flash Media Server . It is a commercial product of Adobe Systems. There are several versions of this product, which differ in cost, the number of simultaneous connections and the actual set of functionality. There is also a free version for developers with a limit on the maximum number of simultaneous connections equal to 10. Information on installing, configuring and administering the service is here .

Wowza Streaming Engine . The free version allows you to simultaneously connect 10 clients, the commercial version has no restrictions. Wowza supports the RTP / RTSP and other broadcast protocols, which gives it an additional advantage over other media servers. Also, using the API provided by developers, it is possible to independently create additional server functionality. Information on setting up IP cameras in Wowza is here .

Erlyvideo . There are also two versions of this software - paid and free. The main feature of this product is its modularity and scalability. The broad functionality of the server is implemented on the basis of modules that can be purchased separately. Documentation on setting up the server here .
Separately, we can mention two free media server projects: nginx-rtmp and red5.

The undoubted advantages of organizing your own media server include cross-platform, unlimited recording of broadcasts and a virtually unlimited number of online viewers compared to the first method. But in order to install and configure a media server, you need the appropriate competencies, powerful servers to serve a large number of visitors, and an initial budget. Therefore, for those who, when organizing an online broadcast, need minimal financial costs, resistance to the influx of visitors, the third method will do.

Method 3. Using the online broadcast service

Currently, online broadcast services are becoming increasingly popular. These services provide the functionality of a media server from the cloud.
Among the advantages of using online broadcast services:

• resistance to a large number of visitors,
• easy creation and moderation of online broadcast,
• Broadcast recording capabilities
• rich analytics and additional features.

As a rule, such services bring additional functionality to paid tariffs. At the same time, the ability to insert a broadcast on your website and customize the player is also often included in the paid package of services.

As an example, I will consider the free service Lideo .
Work with him begins with standard registration:



After registration, the user gets access to the full functionality of the service. It:
1) Organization of broadcasts from various sources: IP-cameras, webcams, video cameras, smartphones, desktop computer.



PS It should be noted that translations (streams) are created in special containers called Lideo. In one Lideo there can be a lot of broadcasts. This is convenient from the point of view of the distribution of broadcasts by topic.

2) Restriction of access to Lideo with broadcasts, for example, by password or by the list of friends.



3) No restrictions on the simultaneous number of views and the number of broadcast sources
4) Cross-platform: does not require installation of additional software on the user's device to view the broadcast.
5) No restrictions on the resolution of the stream received from the video camera. You can stream the stream with resolution up to FullHD.
6) Displaying online broadcasts on the world map - very clearly and conveniently.

7) Availability of social network functionality. Each registered user has a wall, the ability to create a list of friends and keep in touch with them in the chat.



But back to the task of adding a broadcast from your IP camera to your site using the Lideo service. It is solved in several steps:
1) You need to create a video stream from the IP camera:



2) Click "Share / HTML-code" to get the html-code to add to your site. The Lideo service forms the html-code itself; no additional manipulations with the code and knowledge of the specifics of its formation is required.



3) Add the generated html-code to your site, for example:



As a result, we obtain:



I want to note once again that this method of adding a stream from an IP camera to your own website makes it available to a large number of visitors, allows you to view the broadcast from various devices, and increases security by hiding the interface of the IP camera.