European Internet users are divided into two parts: according to a survey by the Institute for Public Opinion Analysis in Allenbach (Germany), Skype, chat and instant messaging systems have become an integral part of everyday life for 16.5 million adults and children, 9 million use these services from case by case, and 28 million do not touch them.

The situation may change, since now Firefox is integrated real time communication technology (WebRTC), as well as the client himself. Starting an audio and video chat is now no more difficult than opening a website. Services such as Facebook and Skype, on the other hand, rely on solutions using a separate client and creating an account.

WebRTC is not only easy to use. This method even allows you to set direct connection between two browsers. In this way, audio and video data does not pass through a server where congestion can occur or where the administrator is not particularly sensitive to privacy or data protection. With a direct connection, WebRTC does not require registration or an account with any service.

To start a conversation, you only need to follow the link. Communication remains private because the data stream is encrypted. Real-time communication through the browser, Google began to actively engage in back in 2011, when it published the source code of its WebRTC implementation.

Shortly thereafter, Chrome and Firefox received their own WebRTC engines. Currently, their mobile versions are equipped with both this technology and the WebView 3.6 engine installed with Android 5.0, which is used by applications.

For real-time communication, the appropriate JavaScript interfaces must be implemented in the web viewer. With GetUserMedia, the software enables capture from audio and video sources, i.e. webcam and microphone. RTCPeerConnection is responsible for establishing the connection, as well as for the communication itself.

In parallel with browser integration, the World Wide Web Consortium (W3C) working group has been pushing the WebRTC standardization process. It should be completed in 2015.

WebRTC is content with little

Using the WebRTC service does not require many resources, since the server only connects the buddies. Establishing a connection is also not particularly difficult. First, the browser signals the WebRTC server that it plans to initiate a call. It receives an HTTPS link from the server - the connection is encrypted. The user sends this link to his interlocutor. The browser then asks the user for permission to access the webcam and microphone.

To establish a direct streaming connection with the other party, the browser receives its IP address and configuration data from the WebRTC service. The buddy's web browser does the same.

In order for the streaming connection to function smoothly and in good quality, three engines work in the browser. Two of them optimize and compress audio and video data, the third is responsible for their transportation. It sends data via SRTP protocol(Secure Real-time Transport Protocol), which allows real-time encrypted streaming.

If a direct connection fails, WebRTC looks for another path. For example, this happens when the network settings prevent the STUN server from being able to report the IP address. The WebRTC standard stipulates that in this case the conversation will take place, but with the intermediate inclusion of the TURN server (Traversal Using Relays around NAT). So, on the netscan.co website, you can check if WebRTC is implemented on your computer and with your access to the Web.

How the connection is made

First you need to register a conversation (1). The WebRTC service provides a link that needs to be sent to the interlocutor. The browser, using the STUNserver, finds out its own IP address (2), sends it to the service and receives the IP of the partner to establish a direct connection (3). If STUN fails, the conversation is redirected using the TURNserver (4).

Communication using WebRTC technology in the browser is launched using JavaScript code. After that, three engines are responsible for communication: the voice and video engines collect multimedia data from the webcam and microphone, and the transport engine combines the information and sends the stream in encrypted form using the Secure Real-time Protocol (SRTP).

Which browsers work with WebRTC

Chrome and Firefox are equipped with a WebRTC engine that uses services such as talky.io. The Mozilla browser can work directly with its own client.

Google and Mozilla continue to develop the idea of ​​real-time communication: Chrome can host a WebRTC conference with multiple participants, and the new Hello client in Firefox is developed with the help of a subsidiary of telecommunications giant Telefonica. Apple remains on the sidelines for now, you should not expect WebRTC in Safari yet. However, there are plenty of alternative iOS apps and plugins for Safari.

Microsoft is taking a slightly different course. As the owner of the competitive Skype service, this company is not going to capitulate to WebRTC so easily. Instead, Microsoft is developing a technology called ORTC (Object Real-Time Communications) for Internet Explorer.

Differences from WebRTC, such as different codecs and protocols for establishing contact with the server, are minor and over time, most likely, will become in addition to the WebRTC standard, which will include these differences. Thus, only Apple remains behind - as usual.

A photo: manufacturing companies; goodluz/Photolia.com

WebRTC(Web Real-Time Communications) is a technology that allows Web applications and websites to capture and selectively transmit audio and/or video media streams, as well as exchange arbitrary data between browsers, without the need for intermediaries. The set of standards that WebRTC technology includes allows data exchange and peer-to-peer teleconferencing without the need for the user to install plug-ins or any other third-party software.

WebRTC consists of several interrelated programming interfaces (APIs) and protocols that work together. The documentation you'll find here will help you understand the basics of WebRTC, how to set up and use a data and media connection, and more.

Compatibility

Because WebRTC implementations are in the making and every browser has WebRTC functionality, it's highly recommended that you use the Adapter.js polyfill library from Google before you start working on your code.

Adapter.js uses wedges and polyfills to seamlessly bridge differences in WebRTC implementations among contexts that support it. Adapter.js also handles vendor prefixes and other property naming differences, facilitating the WebRTC development process with the most consistent result. The library is also available as an NPM package.

For further exploration of the Adapter.js library, see .

Concepts and usage of WebRTC

WebRTC is versatile and, together with , provides powerful multimedia capabilities for the Web, including support for audio and video conferencing, file sharing, screen capture, identity management, and interoperability with legacy phone systems, including support for DTMF tone dialing. Connections between nodes can be created without the use of special drivers or plug-ins, and often without intermediate services.

The connection between two nodes is represented as an object of the RTCPeerConnection interface. Once a connection is established and opened using an RTCPeerConnection object, media streams ( MediaStream s) and/or data channels ( RTCDataChannel s) can be added to the connection.

Media streams can consist of any number of tracks (tracks) of media information. These tracks, represented by objects of the MediaStreamTrack interface, can contain one or more media types, including audio, video, text (such as subtitles or chapter titles). Most streams consist of at least one audio track (one audio track), or video track, and can be sent and received as streams (real-time media) or saved to a file.

Also, you can use the connection between two nodes to exchange arbitrary data using the RTCDataChannel interface object, which can be used to transfer service information, stock data, game status packages, transfer files or private data transfer channels.

more details and links to relevant guides and tutorials needed

WebRTC interfaces

Due to the fact that WebRTC provides interfaces that work together to perform various tasks, we have divided them into categories. See the sidebar alphabetical index for quick navigation.

Connection setup and management

These interfaces are used to set up, open and manage WebRTC connections. They represent peer-to-peer media connections, data channels, and interfaces used to exchange information about the capabilities of each node to select the best configuration when establishing a two-way multimedia connection.

RTCPeerConnection Represents a WebRTC connection between the local computer and a remote host. Used to handle successful data transfer between two nodes. RTCSessionDescription Represents session parameters. Each RTCSessionDescription contains type descriptions indicating which part (offer/response) of the negotiation process it describes, and an SDP session descriptor. RTCIceCandidate Represents the Internet connection establishment (ICE) server candidate for establishing an RTCPeerConnection connection. RTCIceTransport Represents information about the Internet Connectivity Facility (ICE). RTCPeerConnectionIceEvent Represents events that occur on ICE candidates, typically RTCPeerConnection . One type is passed to this event object: icecandidate . RTCRtpSender Controls the encoding and transmission of data through an object of type MediaStreamTrack for an object of type RTCPeerConnection . RTCRtpReceiver Controls the receipt and decoding of data through an object of type MediaStreamTrack for an object of type RTCPeerConnection . RTCTrackEvent Indicates that a new incoming object of type MediaStreamTrack has been created and an object of type RTCRtpReceiver has been added to the RTCPeerConnection object. RTCCertificate Represents the certificate that the RTCPeerConnection object uses. RTCDataChannel Represents a bidirectional data channel between two connection nodes. RTCDataChannelEvent Represents events that are raised when an object of type RTCDataChannel is attached to an object of type RTCPeerConnection datachannel . RTCDTMFSender Controls the encoding and transmission of Dual Tone Multi-Frequency (DTMF) signaling for an object of type RTCPeerConnection . RTCDTMFToneChangeEvent Indicates an incoming DTMF tone change event. This event does not bubble (unless otherwise specified) and is not cancelable (unless otherwise specified). RTCStatsReport Reports the status asynchronously for the passed object of type MediaStreamTrack . RTCIdentityProviderRegistrar Registers an identity provider (idP). RTCIdentityProvider Enables the browser to request the creation or validation of an identity declaration. RTCIdentityAssertion Represents the remote host ID of the current connection. If the node has not yet been installed and confirmed, the interface reference will return null . It does not change after installation. RTCIdentityEvent Represents an identity provider (idP) declaration of an identifier event object. Event of an object of type RTCPeerConnection . One type is passed to this identityresult event. RTCIdentityErrorEvent Represents an identity provider (idP) associated error event object. Event of an object of type RTCPeerConnection . Two types of error are passed to this event: idpassertionerror and idpvalidationerror .

Guides

Overview of the WebRTC Architecture Beneath the API that developers use to create and use WebRTC is a set of network protocols and connection standards. This review is a showcase of these standards. WebRTC allows you to set up a node-to-node connection to transfer arbitrary data, audio, video streams, or any combination of them in the browser. In this article, we'll take a look at the life of a WebRTC session, from establishing a connection and going all the way to ending it when it's no longer needed. WebRTC Overview The WebRTC API consists of several interrelated programming interfaces (APIs) and protocols that work together to provide support for the exchange of data and media streams between two or more nodes. This article provides a brief overview of each of these APIs and their purpose. WebRTC Basics This article will walk you through building a cross-browser RTC application. By the end of this article, you should have a working data and media channel running point-to-point. WebRTC Protocols This article introduces the protocols to which the WebRTC API has been created. This guide describes how you can use a node-to-node connection and a linked

Today, WebRTC is the "hot" technology for streaming audio and video in browsers. Conservative technologies, such as HTTP Streaming and Flash, are more suitable for distributing recorded content (video on demand) and are significantly inferior to WebRTC in terms of real-time and online broadcasts, i.e. where minimal video latency is required, allowing viewers to see what is happening "live".

The possibility of high-quality real-time communication comes from the WebRTC architecture itself, where the UDP protocol is used to transport video streams, which is the standard basis for transmitting video with minimal delays and is widely used in real-time communication systems.

Communication latency is important in live streaming systems, webinars, and other applications where interactive communication with the video source, end users, and solution is required.

Another good reason to try WebRTC is definitely a trend. Today, every Android Chrome browser supports this technology, which guarantees millions of devices are ready to watch the broadcast without installing any additional software and configurations.

In order to test the WebRTC technology in action and launch a simple online broadcast on it, we used the Flashphoner WebRTC Media & Broadcasting Server server software. The features declare the ability to broadcast WebRTC streams in the one-to-many mode, as well as support for IP cameras and video surveillance systems via the RTSP protocol; in this review, we will focus on web-web broadcasts and their features.

Installing WebRTC Media & Broadcasting Server

Since there was no server version for the Windows system, and I didn’t want to install a virtual machine like VMWare + Linux, I couldn’t test online broadcasts on my home Windows computer. To save time, we decided to take an instance on cloud hosting like this:

It was a Centos x86_64 version 6.5 without any pre-installed software in an Amsterdam data center. Thus, all we have at our disposal is a server and ssh access to it. For those who are familiar with Linux console commands, installing a WebRTC server promises to be easy and painless. So what we did:

1. Download archive:

$wget https://website/download-wcs5-server.tar.gz

2. Unpack:

$tar -xzf download-wcs5-server.tar.gz

3. Install:

$cd FlashphonerWebCallServer

During installation, enter the IP address of the server: XXX.XXX.XXX.XXX

4. Activate license:

$cd /usr/local/FlashphonerWebCallServer/bin

$./activation.sh

5. Start WCS server:

$service webcallserver start

6. Check log:

$tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log

7. Check that two processes are in place:

$ps aux | grep Flashphoner

The installation process is complete.

Testing WebRTC live streams

Testing broadcasts turned out to be a simple matter. In addition to the server, there is a web client, which consists of a dozen Javascript, HTML and CSS files and was deployed by us to the /var/www/html folder during the installation phase. The only thing that had to be done was to enter the server's IP address into the flashphoner.xml config so that the web client could establish a connection to the server via HTML5 Websockets. Let's describe the testing process.

1. Open the index.html page of the test client in the Chrome browser:

2. In order to start broadcasting, you need to click the "Start" button in the middle of the screen.
Before doing this, you need to make sure that the webcam is connected and ready to go. There are no special requirements for a webcam, for example, we used a standard built-in laptop camera with a resolution of 1280 × 800.

Chrome browser will definitely ask for access to the camera and microphone so that the user understands that his video will be sent to the Internet server and allows him to do so.

3. The interface represents a successful broadcast of the video stream from the camera to the WebRTC server. In the upper right corner, the indicator indicates that the stream is going to the server, in the lower corner there is a "Stop" button to stop sending the video.

Take a look at the link below. It contains a unique identifier for this stream, so anyone can join the view. Just open this link in a browser. To copy it to the clipboard, you need to click on the "Copy" button.

In real applications like webinars, lectures, online video broadcasts or interactive TV, developers will have to implement the distribution of this identifier to certain groups of viewers so that they can connect to the desired streams, but this is the logic of the application. WebRTC Media & Broadcasting Server it does not affect, but only deals with the distribution of video.

5. The connection is established and the viewer sees the stream on the screen. Now he can send the link to someone else, stop stream playback or enable full screen mode using the controls in the lower right corner.

WebRTC server testing results for online broadcasts

During tests, latency seemed to be perfect. The ping to the data center was about 100 milliseconds and the delay was not visible to the eye. From here, we can assume that the real delay is the same 100 plus or minus a few tens of milliseconds for the buffering time. Compared to Flash video, Flash does not perform as well as WebRTC in these tests. So, if you move your hand on a similar network, then the movement on the screen can be seen only after one / two seconds.

Regarding the quality, we note that sometimes you can distinguish cubes on movements. This is in line with the nature of the VP8 codec and its main goal is to provide real-time video communication with acceptable quality and without communication delays.

The server is quite easy to install and configure, it does not require any serious skills to run it, except for knowledge of Linux at the level of an advanced user who can execute commands from the console via ssh and use a text editor. As a result, we managed to set up a one-to-many online broadcast between browsers. Connecting additional viewers to the stream also did not cause problems.

The broadcast quality turned out to be quite acceptable for webinars and online broadcasts. The only thing that caused some questions was the resolution of the video. The camera supports 1280x800, but the resolution on the test picture is very similar to 640x480. Apparently, this issue needs to be clarified with the developers.

Video on testing broadcast from a webcam
via WebRTC server

The purpose of this article is to get acquainted with its structure and principle of operation on a demo sample of a peer-to-peer video chat (p2p video chat). For this purpose, we will use the multi-user peer-to-peer video chat demo webrtc.io-demo. It can be downloaded from the link: https://github.com/webRTC/webrtc.io-demo/tree/master/site .

It should be noted that GitHub is a site or web service for collaborative development of Web projects. On it, developers can post codes of their developments, discuss them and communicate with each other. In addition, some large IT companies host their official repositories on this site. The service is free for open source projects. GitHub is a repository of open source libraries.

So, downloaded from GitHub a demo sample of a peer-to-peer video chat, we will place it on the C drive of a personal computer in the directory created for our application "webrtc_demo".

Rice. one

As follows from the structure (Fig. 1), a peer-to-peer video chat consists of client script.js and server server.js scripts implemented in the JavaScript programming language. Script (library) webrtc.io.js (CLIENT) - provides the organization of real-time communications between browsers according to a peer-to-peer scheme: "client-client", and webrtc.io.js (CLIENT) and webrtc.io.js (SERVER), using the WebSocket protocol, they provide duplex communication between the browser and the web server using the "client-server" architecture.

The webrtc.io.js (SERVER) script is included in the webrtc.io library and is located in the node_modules\webrtc.io\lib directory. The index.html video chat interface is implemented in HTML5 and CSS3. The contents of the webrtc_demo application files can be viewed with one of the html editors, for example "Notepad++".

We will check the principle of the video chat in the PC file system. To run the server (server.js) on a PC, you need to install the node.js runtime. Node.js allows you to run JavaScript code outside of the browser. You can download node.js from the link: http://nodejs.org/ (version v0.10.13 on 07/15/13). On the main page of the node.org site, click on the download button and go to http://nodejs.org/download/. For windows users, first download win.installer (.msi), then run win.installer (.msi) on PC, and install nodejs and "npm package manager" in Program Files directory.

Rice. 2

Thus, node.js consists of a JavaScript development and execution environment, as well as a set of internal modules that can be installed using the npm package manager or package manager.

To install modules, run the following command in the command line from the application directory (for example, "webrtc_demo"): npm install module_name. During the installation of modules, the npm manager creates a node_modules folder in the directory from which the installation was performed. As it runs, nodejs automatically includes modules from the node_modules directory.

So, after installing node.js, open the command line and update the express module in the node_modules folder of the webrtc_demo directory using the npm package manager:

C:\webrtc_demo>npm install express

The express module is a web framework for node.js or web application development platform. To have global access to express, you can install it like this: npm install -g express.

Then we update the webrtc.io module:

C:\webrtc_demo>npm install webrtc.io

Then, on the command line, we start the server: server.js:

C:\webrtc_demo>nodeserver.js

Rice. 3

Everything, the server is working successfully (Figure 3). Now, using a web browser, you can contact the server by ip-address and download the index.html web page, from which the web browser will extract the client script code - script.js and the webrtc.io.js script code, and execute them. For a peer-to-peer video chat to work (to establish a connection between two browsers), it is necessary from two browsers that support webrtc to contact the signal server running on node.js by ip-address.

As a result, the interface of the client part of the communication application (video chat) will open with a request for permission to access the camera and microphone (Fig. 4).

Rice. four

After clicking on the "Allow" button, the camera and microphone are connected for multimedia communication. In addition, through the video chat interface, you can communicate with text data (Fig. 5).

Rice. 5

It should be noted that . The server is signaling, and is mainly designed to establish a connection between users' browsers. The server.js script that provides WebRTC signaling uses Node.js to run.