Geekly Articles each Day
📜 ⬆️ ⬇️

We embed WebRTC player for live broadcasts from webcams and IP cameras


Everyone knows how a regular video player (VOD - video on demand) is implemented. Typically, this is a player that downloads content fragments over HTTP and plays these fragments in the <video /> element of the browser.

In this article we will talk about the implementation of WebRTC-player to play live (Live) streams from webcams and IP cameras.

There may be several questions:
')
- What is WebRTC player?

This is a web player for playing Live-streams and low latency broadcasts with WebRTC technology under the hood.

- How is WebRTC player better than a regular player?

Can play videos with low latency, up to 500 milliseconds.

- What streams can WebRTC player play?

The player can play streams from webcams, RTSP streams from IP cameras, RTMP streams.

- What if WebRTC is not supported in the browser?

In this case, the player will switch to another technology available in this browser.

Implementation


We decided that the introduction of the player should be as simple as possible and comply with two basic principles:


And this is what came out of it: the introduction page interface looks like in the screenshot below, and the demo page with the player introduction is available here .



Thus, simply press the Copy To Clipboard button and the player code is ready to be pasted onto the site in the form of an iframe:

<iframe id='fp_embed_player' src='https://wcs5-eu.flashphoner.com:8888/embed_player?urlServer=wss://wcs5-eu.flashphoner.com:8443&streamName=streamName&mediaProviders=WebRTC,Flash,MSE,WSPlayer&skin=dark' marginwidth='0' marginheight='0' frameborder='0' width='100%' height='100%' scrolling='no' allowfullscreen='allowfullscreen'></iframe>

In order for a stream to start, you must specify its name or RTSP address in the streamName field.

For example:

After that, you can test the stream using the Test Now button or immediately insert the player code into the page.


We made sure that the player works. It remains to copy its code to the web page. As a result, the site page with the player will look like this:

 <html> <head></head> <body> <iframe id='fp_embed_player' src='https://wcs5-eu.flashphoner.com:8888/embed_player?urlServer=wss://wcs5-eu.flashphoner.com:8443&streamName=streamName&mediaProviders=WebRTC,Flash,MSE,WSPlayer&skin=dark' marginwidth='0' marginheight='0' frameborder='0' width='800px' height='400px' scrolling='no' allowfullscreen='allowfullscreen'></iframe> </body> </html> = 'https: //wcs5-eu.flashphoner.com: <html> <head></head> <body> <iframe id='fp_embed_player' src='https://wcs5-eu.flashphoner.com:8888/embed_player?urlServer=wss://wcs5-eu.flashphoner.com:8443&streamName=streamName&mediaProviders=WebRTC,Flash,MSE,WSPlayer&skin=dark' marginwidth='0' marginheight='0' frameborder='0' width='800px' height='400px' scrolling='no' allowfullscreen='allowfullscreen'></iframe> </body> </html> : <html> <head></head> <body> <iframe id='fp_embed_player' src='https://wcs5-eu.flashphoner.com:8888/embed_player?urlServer=wss://wcs5-eu.flashphoner.com:8443&streamName=streamName&mediaProviders=WebRTC,Flash,MSE,WSPlayer&skin=dark' marginwidth='0' marginheight='0' frameborder='0' width='800px' height='400px' scrolling='no' allowfullscreen='allowfullscreen'></iframe> </body> </html> , Flash, MSE, <html> <head></head> <body> <iframe id='fp_embed_player' src='https://wcs5-eu.flashphoner.com:8888/embed_player?urlServer=wss://wcs5-eu.flashphoner.com:8443&streamName=streamName&mediaProviders=WebRTC,Flash,MSE,WSPlayer&skin=dark' marginwidth='0' marginheight='0' frameborder='0' width='800px' height='400px' scrolling='no' allowfullscreen='allowfullscreen'></iframe> </body> </html>

Thus, the player can be placed anywhere and with any desired size. The implementation task is complete.

Extra options


In the iframe src attribute, the url of the page that contains the player is transmitted. This urla can be passed parameters that will be used by the player.

1. urlServer

This is the address of the streaming server that adapts the streams for the player.

 urlServer=wss://wcs5-eu.flashphoner.com:443

2. streamName

This is the stream name or its RTSP address.

 streamName=12345

Or rtsp

 streamName=rtsp://192.168.1.55/live.sdp

3. mediaProviders

This is a list of playback technologies that are listed in order of priority.

For example, if you want to use only WebRTC, you can pass it like this:

 mediaProviders=WebRTC

If automatic switching to other technologies is required, add them to the request in order of priority from left to right:

 mediaProviders=WebRTC,MSE,Flash

4. autoplay

You need to pass this parameter so that the player starts playing the stream automatically after downloading.

 autoplay=true

Server


The server side is responsible for stream adaptation. The task of the server is to receive the stream and correctly give it to the player in one of the following technologies: WebRTC, Flash, Media Source Extensions, WSPlayer.



Custom player


For customization there is a JavaScript API that allows you to take control of the player under complete control and wrap it in almost any design.

The API is part of the Web SDK for WCS and works with div elements. Any div element on the page can be made to play video using this API.

Example:

Create a myPlayer element on the page and give it dimensions to see it on the page visually:

 <div id="myPlayer" style="width:320;height:240;border: solid 1px"></div>

Next, to play the video, call the following API code:

 session.createStream({name:"stream44",display:document.getElementById("myPlayer")}).play();

Here we pass the stream name of stream44 and the element myPlayer. As a result, the video will play in the specified div element.

As you can see, the API usage code is also quite simple. However, in order for it to work, you need to import the necessary API scripts and establish a connection to the server.

 var session =Flashphoner.createSession({urlServer:"wss://wcs5-eu.flashphoner.com:443"});

After that, you will need to add playback control (stop / play) and sound.

Conclusion


The article showed how the WebRTC player implementation page looks like and what technologies are available in case WebRTC is not supported in the browser. They described how the formation of the implementation code looks like, what parameters can be changed for the embedded player and how it can be customized using the JavaScript API.

Links


Embed Player is an example of a WebRTC player implementation page.
Source - the source code of the deployment page.

Player - the player being introduced.
Source - the source code of the player being implemented.

Web Call Server - server that adapts streams for WebRTC player.

Source: https://habr.com/ru/post/337114/

More articles:


All Articles