WebRTC (Web Real Time Communications) is a standard that describes the transmission of streaming audio, video and content from and to the browser in real time without installing plugins or other extensions. The standard allows you to switch the browser to the end terminal of the video conference and simply open the web page to print the download.

What is WebRTC?

This article will cover everything that an average consumer needs to know about WebRTC technology. Let's look at the advantages and disadvantages of the project, reveal some secrets, and understand where and why WebRTC is being developed.

What do you need to know about WebRTC?

Evolution of video communication standards and technologies

Sergiy Yutsaytis, Cisco, Video+Conference 2016

How WebRTC works

On the client side

• Koristuvach opens the page to add the HTML5 tag
• The browser requests access to the webcam and microphone of the user.
• The JavaScript code on the client's website controls connection parameters (IP addresses and ports of the WebRTC server or other WebRTC clients) to bypass NAT and Firewall.
• When you remove information about the browser or the stream from the conference that is hosted on the server, the browser begins to accept the selected audio and video codecs.
• The process of encoding and transferring streaming data between WebRTC clients begins (in our case, between the browser and the server).

On the WebRTC server side

To exchange data between two participants, a video server is not required, unless you need to combine several participants in one conference, a server is required.

The video server extracts media traffic from various devices, transforms it and strengthens it for users, like a terminal that uses WebRTC.

The WebRTC server also intercepts media traffic from WebRTC banquets and transmits it to conference participants, such as vikorist programs for desktop computers or else mobile devices, there are times when such things are obvious.

Advantages to the standard

• There is no need to install a PZ.
• The bitterness of the connection is very high:
  • Search for current videos (VP8, H.264) and audio codecs (Opus).
  • Automatic adjustment of the flow of minds.
  • A noise reduction system has been introduced.
  • Automatic adjustment of the level of sensitivity of microphones of participants (ARS).
• High level of security: all communications are protected and encrypted using TLS and SRTP protocols.
• There is a mechanism for storing content, for example, on a desktop.
• The possibility of implementing any kind of kernel interface based on HTML5 and JavaScript.
• The ability to integrate the interface with any back-end systems using WebSockets.
• Project iz vikriti output code- You can promote your product or service.
• Helpful cross-platform: one and the same WebRTC add-on will work well no matter what operating system, desktop and mobile, because the browser supports WebRTC. It is important to save resources for developing software.

Not enough to standard

• To organize group audio and video conferences, a video conferencing server is required that mixes video and sound from participants, because The browser is unable to synchronize a number of input streams with each other.
• All WebRTC solutions are absurd among themselves, because... The standard means not only the methods of transmitting video and sound, but also the implementation of methods for addressing subscribers, increasing their availability, exchanging associated files, planning, etc., up to the vendor.
• In other words, you will not be able to transfer from WebRTC the programs of one distributor to the WebRTC applications of another distributor.
• Mixing group conferences requires large financial resources, so this type of video communication requires purchases paid advance payment Or invest in your own infrastructure, where each conference requires 1 physical core of a daily processor.

Secrets of WebRTC: how vendors can remove cost from disruptive web technology

Tsachi Levent-Levi, Bloggeek.me, Video+Conference 2015

WebRTC for market video conferencing

Increased number of video conferencing terminals

WebRTC technology has contributed to the development of the video conferencing market. After the emergence of the first browsers with the support of WebRTC in 2013, the number of video conferencing terminals around the world increased dramatically by 1 billion devices. In essence, the skin browser has become a video conferencing terminal, which does not compromise its hardware counterparts in terms of connection quality.

Search for specialized solutions

A combination of various JavaScript libraries and APIs of dark services with support for WebRTC allows you to easily add video support to any web projects. Previously, to transmit data in real time, distributors had to learn the principles of robotic protocols and use the practices of other companies, which often required additional licensing, which increased costs. WebRTC is now being actively promoted in services like “Call the site”, “Online chat support” and so on.

Ex-Koristuvacham Skype for Linux

In 2014, Microsoft announced support for the Skype for Linux project, which caused great frustration among IT workers. WebRTC technology is not tied to the operating system, but is implemented solely on the browser level. Linux developers With products and services based on WebRTC, you can get a complete replacement for Skype.

Competition with Flash

WebRTC and HTML5 became a fatal blow to Flash technology, which had already survived its the most beautiful rocks. Since 2017, wired browsers officially stopped supporting Flash, and the technology remained on the market. But it is necessary to introduce Flash more efficiently, even by creating a market for web conferencing and establishing the technical capabilities for live streaming in browsers.

Video presentations WebRTC

Dmitro Odintsov, TrueConf, Video+Conference Zhovten 2017

WebRTC codecs

Audio codecs

To compress WebRTC audio traffic, Opus and G.711 codecs are used.

G.711- the oldest voice codec with a high bitrate (64 kbps), which is most often stuck in systems traditional telephone. The main advantage is minimal computational gain through the use of light compression algorithms. The codec is changing low level compression of voice signals and do not introduce additional noise to the sound during the time of mixing between speakers.

G.711 is supported by a large number of devices. Systems that use this codec are more easily installed than those that run on other audio codecs (G.723, G.726, G.728, etc.). For the G.711 box, taking away the score of 4.2 from the tested MOS (score between 4-5 is the highest and means garna yakist, similar to the transmission rate of voice traffic to ISDN and beyond).

Opus- This codec has low coding latency (from 2.5 ms to 60 ms), supporting a variable bitrate and high level compression, which is ideal for transmitting streaming audio at a time when the bandwidth is variable. Opus is a hybrid solution that combines best characteristics codecs SILK (voice compression, human speech suppression) and CELT (audio encoding). The codec is available to the public, and publishers who are victorious about it do not need to pay legal fees. Compared with other audio codecs, Opus certainly wins for its richness in performance. You can download popular codecs with low bitrate, such as MP3, Vorbis, AAC LC. Opus brings the sound image closer to the original than AMR-WB and Speex. This codec is coming soon, and the creators of the WebRTC technology included it in the comprehensive range of audio standards that they are following.

Video codecs

The choice of video codec for WebRTC was taken from a number of retailers, with the result being H.264 and VP8. Almost everything current browsers support offending codecs. For video conference servers to work with WebRTC, it is enough to support only one.

VP8- a high-quality video codec with an open license, which offers high speed decoding of the video stream and increased stability before wasting frames. The codec is universal, it is easy to implement in hardware platforms, so vendors of video conferencing systems often use it in their products.

Paid video codec H.264 having become married to his brother-in-arms much earlier. This codec has a high degree of compression of the video stream while saving high vigor video. The high width of this codec among hardware videoconferencing systems transmits video calls via the WebRTC standard.

Google and Mozilla are actively promoting the VP8 codec, and Microsoft, Apple and Cisco are promoting H.264 (to ensure compatibility with traditional video conferencing systems). And this is where the big problem arises for developers of the gloomy WebRTC solution, even if in the conference all participants use one browser, then the conference must be mixed once with one codec, and if browsers are different among them, then the conference happen twice different codecs, which should be moved twice system benefits to the media server and as a result, the number of subscriptions to the WebRTC service.

WebRTC API

WebRTC technology is based on three main APIs:

• (indicates that a web browser receives audio and video signals from cameras or the operator’s desktop).
• RTCPeerConnection(indicates the connection between browsers to “exchange” images from the camera, microphone and desktop, media. Also, the “commitments” of this API include signal processing (cleaning up of third-party noise, adjusting microphone and audio control and video codecs, which are subject to vikory research).
• RTCData Channel(ensures two-way data transfer through the installed connection).

First, you deny access to the microphone and camera of the user, the browser will ask you to allow it. U Google Chrome You can later set up access in the “Settings” section; in Opera and Firefox, the choice of devices can be selected immediately at the moment you revoke access from the list. The request for permission will appear always when using the HTTP protocol and once, if you are using HTTPS:

RTCPeerConnection. The browser that takes part in the WebRTC conference is responsible for its access to that object. With RTCPeerConnection, media from one browser to another can be routed through NAT and border screens. For successful transmission of media streams, participants must exchange such data using additional transport, such as web sockets:

• the initiating participant sends to another participant an Offer-SDP (data structure, with characteristics of the media stream being transmitted);
• another participant forms a “confirmation” - Answer-SDP and passes it on to the initiator;
• Then an exchange of ICE candidates is organized between the participants, if they are detected (if the participants are behind NAT or border screens).

After the successful completion of the exchange between participants, the immediate transfer of media streams (audio and video) is organized.

RTCData Channel. Support for the Data Channel protocol has appeared in browsers recently, so this API can be viewed inclusively in the WebRTC wiki in browsers Mozilla Firefox 22+ and Google Chrome 26+. For additional assistance, participants can exchange text notifications in the browser.

Connections via WebRTC

Supported desktop browsers

• Google Chrome (17+) and all browsers based on the Chromium engine;
• Mozilla FireFox (18+);
• Opera (12+);
• Safari (11+);

Supported mobile browsers for Android

• Google Chrome (28+);
• Mozilla Firefox (24+);
• Opera Mobile (12+);
• Safari (11+).

WebRTC, Microsoft and Internet Explorer

For a long time now, Microsoft has been saving money on the WebRTC support drive. Internet Explorer and in your new Edge browser. The boys from Redmond no longer like to put technology into the hands of corporate owners, since they cannot control it, the axis of this policy. Ale stepwise on the right destroyed from dead center, because. It is no longer possible to ignore WebRTC, and the ORTC project, similar to the WebRTC standard, has been announced.

In the words of the ORTC distributors, this is an extension to the WebRTC standard with a reduced set of APIs for JavaScript basics And HTML5, which translated into English means that everything will be the same, only Microsoft, not Google, will control the standard and its developments. The set of codecs has been expanded to support H.264 and various audio codecs of the G.7XX series, which are used in telephony and hardware video conferencing systems. It is possible to provide RDP support (for content transfer) and message exchange. Before speaking, Internet Explorer has not been kind to the koristuvachs, the ORTC support will be deprived of Edge. Well, naturally, such a set of protocols and codecs has little connection with Skype for Business, which creates even more business stagnation for WebRTC.

WebRTC allows you to implement real-time audio/video communications through a browser

In this topic I will use how to implement the simplest WebRTC add-on.

1. getUserMedia - gaining access to media devices (microphone/webcam)

Nothing complicated, with the help of 10 rows of javascript code you can do it almost in your browser (demo).

Create index.html :

You can add a css3 filter to the video element.

Those who are confused here are that at this stage of WebRTC development I cannot tell the browser “Which site I trust, always give it access to my camera and microphone” and I need to press Allow after opening the skin/refreshing the page.

Well, we won’t tell you if you gave access to the camera in one browser, the other one, when you try to deny access, says PERMISSION_DENIED.

2. Signaling server

Here I’m ruining the consistency of most of the “webrtc getting started” instructions, because they demonstrate in another way the capabilities of webRTC on one client, which is especially less necessary to clarify.

The signaling server is the coordinating center of WebRTC, which ensures communication between clients, initialization and closure of connections, and notifications about beatings.

Our signaling server is Node.js+socket.io+node-static, and will listen to port 1234.
Plus, you can add index.html to everything node-static, which will make it as simple as possible to build up our supplement.

Dad's programs need to be installed:

Npm install socket.io npm install node-static

WebRTC(Web Real-Time Communications) is a technology that allows Web add-ons and sites to seamlessly transmit audio and/or video media streams, as well as exchange additional data between browsers, without the hassle of intermediaries. A set of standards, including WebRTC technology, allows you to exchange data and conduct peer-to-peer teleconferences without the need to install plugins or other third-party software.

WebRTC consists of many interdependent application program interfaces (APIs) and protocols that operate simultaneously. The documentation you'll find will help you understand the basics of WebRTC, how to set up and configure connections for data transfer, media streaming, and much more.

Crazyness

Since the implementation of WebRTC is in the process of development and your browser has WebRTC functionality, it is recommended that you use the Adapter.js polyfile library from Google before working on your code.

Adapter.js provides a variety of wedges and polyfills for the smooth integration of features in WebRTC implementations among contexts that support it. Adapter.js also adds generator prefixes and other naming authorities, simplifying the development process on WebRTC, with great results. The library is also available as an NPM package.

For further development of the Adapter.js library, we marvel.

I understand that WebRTC wiki

WebRTC has many purposes, providing advanced multimedia capabilities for the Web, including support for audio and video conferences, file sharing, screen sharing, authentication and interoperability. with legacy telephone systems, including DTMF tone support. Connections between nodes can be created without the need for special drivers or plugins, and often without intermediate services.

The connection between two nodes is represented as an object to the RTCPeerConnection interface. As long as the connection is installed openly, the RTCPeerConnection vikory object, MediaStream s and/or data channels (RTCDataChannel s) can be added to the connection.

Media streams can be composed of any number of media tracks. These tracks are represented by objects in the MediaStreamTrack interface and can contain one or more types of media, including audio, video, text (such as subtitles or chapter titles). Most streams are formed, at a minimum, from only one audio track (one audio track), or video tracks, and can be sent and removed, like streams (media data at a given time) or saving u file.

It is also possible to connect between two nodes to exchange data using the RTCDataChannel interface object, which can be used to transmit service information, exchange data, Game statuses, file transfer or closed data transfer channels.

more details and links to relevant guides and tutorials needed

WebRTC interfaces

Through those that WebRTC provides interfaces that work seamlessly for the execution of various tasks, we divided them into categories. Look at the alphabetical indicator of the navigation bar.

Adjustment of connection and keruvannya

These interfaces are selected for configuration, support and networking with WebRTC connections. They represent simultaneous media connections, data channels, and interfaces that are used when exchanging information about the capabilities of the skin node, to select the best configuration when installing two-way multimedia great connection.

RTCPeerConnection Represents WebRTC connection between local computer and at a distant node. Vikoryst is used to process a successful transfer between two nodes. RTCSessionDescription Specifies session parameters. The RTCSessionDescription code contains a description of the type that shows each part (proposition/conversation) of the negotiation process and describes the SDP descriptor of the session. RTCIceCandidate is the Internet connection installation (ICE) server candidate for installing the RTCPeerConnection connection. RTCIceTransport Provides information about your Internet connection (ICE). RTCPeerConnectionIceEvent Represents the events that are selected for ICE candidates called RTCPeerConnection . One type is passed to this pod object: icecandidate . RTCRtpSender handles the conversion and transmission of data through an object of type MediaStreamTrack for an object of type RTCPeerConnection. RTCRtpReceiver Receives and decodes data through an object of type MediaStreamTrack for an object of type RTCPeerConnection. RTCTrackEvent Indicates that a new input object of type MediaStreamTrack is created and an object of type RTCRtpReceiver is added to the RTCPeerConnection object. RTCCertificate Represents the certificate that represents the RTCPeerConnection object. RTCDataChannel Represents a bidirectional data channel between two communication nodes. RTCDataChannelEvent Represents events that occur when an object of type RTCDataChannel is attached to an object of type RTCPeerConnection datachannel . RTCDTMFSender Encodes and transmits dual-tone multi-frequency (DTMF) signaling for an object of type RTCPeerConnection. RTCDTMFToneChangeEvent Indicates the Dual Tone Multi Frequency (DTMF) tone change input. This product does not drain (as not otherwise designated) or touch (as not otherwise designated). RTCStatsReport Asynchronously reports the status of the transferred object to the MediaStreamTrack type. RTCIdentityProviderRegistrar Registers an identity provider (idP). RTCIdentityProvider Enables the browser's ability to request the creation or verification of an identified identity. RTCIdentityAssertion Specifies the identifier of the remote streaming node. If the university is not yet installed and confirmed, the message sent to the interface is turned to null . Once installed, it cannot be changed. RTCIdentityEvent Represents an identity provider (idP) identifier object. Similar to the object type RTCPeerConnection. One type is passed to this sub-identityresult. RTCIdentityErrorEvent Represents an error event associated with an identity provider (idP). Similar to the object type RTCPeerConnection. Two types of errors are transmitted by this method: idpassertionerror and idpvalidationerror.

Kerivnytstva

An overview of the WebRTC architecture The API that developers will use to create and develop WebRTC, develop a set of network protocols and connection standards. This look is a showcase of these standards. WebRTC allows you to organize a connection in the host-to-host mode for transmitting additional data, audio, video streams or any combination thereof in the browser. In this article, we will take a look at the life of a WebRTC session, starting with the establishment of a connection and go through the entire process until its completion, when it is no longer needed. Overview of the WebRTC API WebRTC consists of many interdependent application program interfaces (APIs) and protocols that run together to support the exchange of data and media streams between two or more nodes. This article presents short look cutaneous API and yaku meta vin reexamines. WebRTC Basics This article will walk you through the creation of cross-browser RTC programs. Until the end of this article, the working date is the media channel that operates in point-to-point mode. WebRTC protocols This article has established protocols, in addition to which the WebRTC API has been created. This handbook describes how you can vikorist the joint vuzol-vuzol and knitting

Most of the material on WebRTC The writing of code is limited to the applied level and does not correspond to modern technology. Let's try to dig deep and find out how to obtain confirmation, what is the descriptor of the session and the candidates for what you need STUNі TURN server.

WebRTC

Enter

WebRTC is a browser-oriented technology that allows you to connect two clients for video data transfer. The main features are internal support for browsers (no third-party technologies are required, which type adobe flash ) the ability to connect clients without the need for additional data servers – connection peer-to-peer(Dali, p2p).

Install connection p2p- To finish the important task, computer fragments will never end up in public IP addresses, or addresses on the Internet. After a short period of time IPv4 address (and for security purposes) bu division mechanism NAT, which allows you to create private borders, for example, for home wikis. There are plenty of home routers to support now NAT And therefore, all home devices can access the Internet, although Internet providers insist on providing one IP address. Public IP addresses are unique on the Internet, but not private. Let's get together p2p- It's hard.

In order to understand this more clearly, let’s look at three situations: the resentment of the nodes being in the same dimension (Malyunok 1), the offense nodes are located in different layers (one for the private one, the other for the public one) (Malyunok 2) that resentment vuzley is known in various private measures with however IP addresses (Malyunok 3).

Malyunok 1: Offending vuzly in one measure

Malyunok 2: Vuzli at different levels (one at the private one, the other at the public one)

Figure 3: Vuzley at different private borders, but with numerically equal addresses

In the figures, the first letter of the two-character designation indicates the type of node (p = peer, r = router). At first glance, the situation is favorable: the nodes at their edge are generally identified as edges IP addresses and thus can be connected one to another without any middle. On the other little one there are two different lines, which indicate similar numbering of the nodes. Here are routers that have two edge interfaces - one at the middle of its edge and one at the edge. That's why they have two IP address. Primary nodes only have one interface, through which they can accumulate at their edge. If they convey tributes to anyone in their own way, then ask for help NAT in the middle of the router (router) and therefore visible to other people IP router address – tse їх external IP address. In this manner, bіlya vuzla p1є internal IP = 192.168.0.200 і external IP = 10.50.200.5 , and the address will remain the same for all other nodes in your border. The situation is similar for the university p2. Therefore, their connections are difficult, since only their internal ones (their own) are to be victorious IP address. You can quickly find external addresses, either the addresses of routers, or because all nodes in the same private network have the same external address, but this is difficult to achieve. This problem lies behind an additional mechanism NAT

What will happen if we are still likely to connect to nodes through their internal addresses? Dani will not go beyond the boundaries. To enhance the effect, you can see the situation depicted in the remaining picture - both nodes have the same internal addresses. If the stinks will use them for communication, then the skin will splint from itself.

WebRTC successfully copes with such problems using the Vikorist protocol ICE Well, it’s true that the vikoristan of additional data servers is important ( STUN, TURN). About everything below.

Two phases of WebRTC

To connect two nodes via a protocol WebRTC(or just RTC how the two communicate iPhone a) it is necessary to carry out the previous steps to install the connection. The first phase is the established connection. The other phase is the transmission of video data.

It’s easy to say what technology wants WebRTC his robot has a vikorist’s personality in various ways communications ( TCPі UDP) and there is a lot of intercom between them, this technology There is no connection data transfer protocol. It’s not surprising if you connect two wuzleys p2p not so easy. That's why it's necessary for mothers to additional method of data transmission, in no way related to WebRTC. This can be a socket transfer protocol HTTP, where you can create a protocol SMTP or Russian Post. This transmission mechanism cob data is called signal. There is not a lot of information needed to be conveyed. All data is transmitted visually and is divided into two types - SDPі Ice Candidate. The first type is based on the establishment of a logical connection, and the other for a physical one. We will report on everything later, but in the meantime it is important to remember that WebRTC give us any information that will need to be passed on to another node. How can we tell you everything required information, the universities can unite and our help is no longer needed. Thus, the signaling mechanism that we can implement okremo, vikoristovvatimetsya only when connected, and when transmitting video data there will be no abuse.

Well, let’s look at the first phase - the phase of establishing the connection. The won is made up of many points. Let's look at this phase first for the node that initiates the connection, and then for the one that ends.

• Initiator (phone – caller):
  1. Proposition to print video data transmission (createOffer)
  2. Get yours SDP SDP)
  3. Take off your own Ice candidate Ice candidate)
• An eye-catching jingle ( callee):
  1. Retrieval of local (own) media stream and installation of its transmission (getUserMediaStream)
  2. Removing the proposition of printing video data transmission and creation of video (createAnswer)
  3. Get yours SDP object and transmission through the signaling mechanism ( SDP)
  4. Take off your own Ice candidate objects and their transmission through a signaling mechanism ( Ice candidate)
  5. Retrieving remote (foreign) media stream and displaying it on the screen (onAddStream)

The other item has less authority.

Regardless of the complexity of the steps, there are actually three of them: sending your own media stream (item 1), setting connection parameters (items 2-4), removing someone else’s media stream (item 5). The most foldable is a different structure, because it consists of two parts: inserted physicalі logical connection. Persha orders way, which is responsible for the packets to go from one node of the border to another. Orders a friend video/audio parameters- How to vikorize the content, how to vikorist the codecs.

Thoughts stage createOffer or else createAnswer follow the transfer stages SDPі Ice candidate objects.

Basic aspects

Media streams (MediaStream)

The main essence is a media stream, such as a stream of video and audio data, a picture and a sound. There are two types of media streams – local and remote. The local one retrieves data from input devices (camera, microphone), and from remote devices through a boundary. Thus, the skin node has both local and distant flow. U WebRTC for streams there is a basic interface MediaStream and also the main interface LocalMediaStream especially for local stream. U JavaScript You can only stick to the first one, but you can also vikorist libjingle, you can connect with others.

U WebRTC It seems that the hierarchy in the middle of the stream is completely confused. Skin flow can be formed from several media tracks ( MediaTrack), which can be combined with many media channels ( MediaChannel). The same media streams themselves may be similar.

Let's look at everything in order. For whom let's remember the active butt. It is acceptable that we want to transfer not only the video to ourselves, but also the video to our table, on which the paper is lying, on which we are going to write. We need two video (mi + stil) and one audio (mi). It is clear that we and the table should be divided into different streams, so that these data may lie on the same side. So there will be two in us MediaStream'a – one for us and one for the table. The first contains both video and audio data, and the other contains video (Malyunok 4).

Malyunok 4: Two different media flows. One for us, one for our table

It is clear that the media flow is, at a minimum, liable to include the possibility of data misrepresentation different types- video and audio. This is guaranteed in technology and the type of data is implemented through the media track MediaTrack. Media tracks hold special power kind, which means that what we have in front of us is video or audio (Malyunok 5)

Malyunok 5: Media streams are composed of media tracks

How does the program handle everything? We can create two media streams. Then we create two video tracks and one audio track. We deny access to cameras and microphones. It is possible that every skin device should be victorious. Add the video and audio track from the first media stream and the video track from the other camera to the other media stream.

How can we mark media flows at the other end of the connection? For whom does the flow of media have power? label- Mark the flow, its name (Malyunok 6). The same power and media paths loom. I would like to think that video and sound can be played in other ways.

Malyunok 6: Media streams and tracks are identified by tags

So, since media tracks can be identified through a tag, then for our application we should use two media streams instead of one? Aja can transmit one stream of media, and the tracks can be combined in different ways. We have reached the important power of media flows - the stench synchronize media tracks. Different media streams are not synchronized with each other, but in the middle of each media stream all tracks appear overnight.

In such a manner, as we want, so that our words, our emotions in the face and our arkushik paper are published at the same time, then we can vikorist one media flow. Since this is not so important, it is better to distinguish different flows - the picture will be smoother.

If any track must be switched off at the time of transmission, you can quickly contact the authorities enabled media tracks.

It’s best to think about stereo sound. As you can see, stereo sound is two different sounds. It is also necessary to convey them strictly. For whom are the channels being vicorized? MediaChannel. Media recording of sound can be done on many channels (for example, 6, if 5+1 sound is required). In the middle of the media track there are channels, especially synchronized. For videos, you only need one channel, but you can also use it for advertising, for example.

To summarize: We use a media stream for transmitting video and audio data. In the middle of the skin media data flow is synchronized. We can select only a few media streams because we do not need synchronization. In the middle of the skin media stream there are two types of media tracks – for video and audio. Make sure there are no more than two tracks, and there may be more if you need to transfer a number of different videos (spreader to your table). The skin track can be composed of multiple channels, which is ideal only for stereo sound.

In the simplest video chat situation, there is essentially one local media stream, which consists of two tracks - a video track and an audio track, which consists of one main channel. The video track represents the camera, the audio track represents the microphone, and the media stream represents the same container.

Session Descriptor (SDP)

U various computers In the future there will be different cameras, microphones, video cards and other equipment. There are no parameters to determine the smell. Everything must be coordinated for media transmission between two network nodes. WebRTC This will automatically create a special object – a session descriptor SDP. Pass this object to another node, and the media data can be transferred. There is still no connection with the other node.

For which purpose is there some kind of signaling mechanism? SDP can be transmitted either via sockets, or by person (notify your other node by phone), or by Russian Post. Everything is very simple - they will give you the preparation SDP That needs to be sent. And if it is torn off from the other side, hand it over to the guardianship WebRTC. The session descriptor is saved in the text and can be changed in your applications, otherwise it is not necessary. As a rule, when you connect a desktop/phone or computer, you need to select the required audio codec.

When the connection is installed, it is necessary to indicate any address, for example URL. Here there is no need for you to send data for confessions through the signal mechanism. Please indicate WebRTC, what we want to install p2p Connection requires calling the createOffer function. After clicking this function and inserting a special callback'a will be created SDP object and transferred to the same callback. All you have to do is transfer the object through the network to another node (spreader). After which, at the other end, data is found through the signal mechanism, and then SDP object This session descriptor for this foreign node is not useful information. Taking away the object is a signal to the cob to join. So you have to look at this and click on the createAnswer function. Vona is a new analogue of createOffer. I'm calling yours callback pass the local session descriptor and this will need to be passed back via the signaling mechanism.

Warto note that you can call the createAnswer function only after taking someone else’s SDP object Why? Because it's local SDP the object that will be generated when you click createAnswer is guilty of hiding in the distance SDP object Only in this case can you coordinate the video adjustments with the adjustments of the spyware. It’s also not possible to click createAnswer and createOffer before releasing the local media stream - they won’t have anything to write in SDP object

Bo in WebRTCє possibility of editing SDP object, after removing the local descriptor you need to insert it. Here you can find a few wonderful things that need to be conveyed WebRTC those that she herself gave us, aka such a protocol. When you remove a remote descriptor, you need to insert it. You must install two descriptors on one node – your own and someone else’s (either local or remote).

After this hand-crafted Woozley knows about the obsession of one. For example, yakscho vuzol 1 supports codecs Aі B, and vuzol 2 supports codecs Bі C, then, the skin of the university knows its own and other people’s descriptors, the host is offended to choose a codec B(Malyunok 7). The connection logic is now installed, and media streams can be transmitted, but there is another problem - the nodes, as before, are only connected by a signaling mechanism.

Malyunok 7: Usable codecs

Ice candidate

Technology WebRTC intends to confuse us with his new methodology. Before the connection is established, the address of the node you need to connect with is not indicated. The kidney is being restored more logical connection, not more physically, although I was timid in the first place. But it won’t be surprising, just don’t forget that we have a third-party signaling mechanism.

However, the connection is already installed (logical connection), but there is still no way through which nodes can transmit data. It’s not all that simple, but let’s make it simple. Let the assholes be in the same private space. As we already know, stinks can easily connect one with another due to their internal IP address (or it may be, for some reason, because you are not victorious TCP/IP).

Through deyaki callback'і WebRTC informs us Ice candidate objects. They can also come from a text form and, like session descriptors, they just need to be sent through a signaling mechanism. If the session descriptor contains information about our installations on the same camera and microphone, then candidates will contain information about our development at the same time. Pass them on to another node, and that one can physically connect with us, and since that one already has a session descriptor, then it is logical that they can connect and the data will flow. If you don’t forget to send us your candidate candidate information about those who are in the pipeline, then we can get in touch with him. Of course, here is another difference from the classic client-server interaction. The connection with the HTTP server is carried out using a power supply circuit, the client sends the data to the server, which processes it and goes on I will ask for the address indicated in the package. U WebRTC need to know two addresses And connect them from both sides.

The significance of the session descriptors lies in the fact that it is necessary to install more distant candidates. The area here is fenced in and we cannot bring in any water bark. In current implementations WebRTC candidates must be installed after the session descriptors have been installed.

Why is there only one descriptor for the session, but there could be a lot of candidates? Because the process of reshaping in the margins can be seen not only because of its internal nature. IP address, as well as the external address of the router, and not just one, but also the addresses TURN servers. The rest of the paragraph will be devoted to the report review of candidates and how to connect universities from various private networks.

Well, two vuzli are located in one boundary (Malyunok 8). How to identify them? For further help IP address. No more. It’s true, it’s still possible to vikorize different types of transport ( TCPі UDP) and slaughter. This is the information that is included in the candidate’s project – IP, PORT, TRANSPORT And as insha. For example, don’t hesitate to become a vikorist UDP transport and 531 port.

Malyunok 8: Two knots are located in one boundary

Todi, as we are visiting the university p1, That WebRTC give us such a candidate object - . It's not the exact format that's needed here, just a diagram. How are we at vuzli p2, then the candidate is – . Through a signaling mechanism p1 rejects the candidate p2(to then roztashuvannya vuzla p2, and yogo itself IPі PORT). After what p1 you can get together with p2 without any middle. More correctly, p1 you will add details to the address 10.50.150.3:531 in the hope that the stink will go to p2. It doesn’t matter if you put the address on the vuzlu p2 I speak to the mediator. It is important for those who through this address are given strength and can reach p2.

While the knots are in one line - everything is simple and easy - the skin knot has only one object of the candidate (always on the basis of its own, so that its development is at the same time). There will be more candidates if universities are in various boundaries.

Let's move on to the tricky part. One unit is located behind the router (more precisely, behind NAT), and the other unit is located at the same time as this router (for example, on the Internet) (Malyunok 9).

Malyunok 9: One school for NAT, another one for no

This phenomenon poses a more serious problem, as we will now look at. Home router call to take revenge on the table NAT. This is a special mechanism designed so that nodes in the middle of the router’s private network can be expanded, for example, to websites.

It is acceptable that the web server connects to the Internet directly, then it is public IP*address. Let it be vuzol p2. Vuzol p1(Web client) sent to the address 10.50.200.10 . Most of the data is spent on the router r1, Or rather on yogo internal interface 192.168.0.1 . After this, the router memorizes the device address (address p1) and enter it in a special table NAT, then changes the email address to your own ( p1 → r1). Far away, for your own external The router interface forwards the data directly to the web server p2. The web server processes the data, generates a response and sends it back. Sends to router r1 In addition, you yourself have to stand at the return address (the router has replaced the address with your own). The router collects data, look at the table NAT she overpowers the tribute to the vuzlu p1. The router acts as an intermediary here.

Why do a few nodes from the internal boundaries suddenly explode to the outer boundary? How does the router understand who can get the confirmation back? This problem needs help ports. If the router changes the host address to its own, it also changes the port. If two nodes connect to the Internet, the router replaces their ports carnage. Then, if the packet from the web server arrives back to the router, then the router recognizes the port to whom the packet was sent. Butt lower.

Let's turn to technology WebRTC, or more precisely until this part, which is vikorist ICE protocol (zvіdsi i Ice candidates). Vuzol p2 there may be one candidate (its own expansion within the limits – 10.50.200.10 ), and vuzol p1, which is located behind a router with NAT, there are two candidates - local ( 192.168.0.200 ) that router candidate ( 10.50.200.5 ). The first one will not be in the future, but it will be no less, generated, fragments WebRTC still doesn’t know anything about distant nodes - they may be located in the same area, or maybe not. Another candidate will be in the future, and, as we already know, the important role of the port (to go through NAT).

Table entry NAT is generated as soon as data comes out of the internal network. Tom vuzol p1 guilty to the first transfer of data and the latter data to the university p2 can get to the node p1.

In practice offensive woozy will be over-shoeed NAT. To create a record in the table NAT skin router, the guilty node must be sent to a remote node, but this time the first one cannot reach the other, no matter how. This is due to the fact that universities do not know their outsiders IP address, and it’s safe to add data to internal addresses.

However, if external addresses are visible, the connection will be easily installed. If the first node finds data on the router of another node, then the router ignores them, the fragments of its table NAT still empty. However, the router of the first node has a table NAT Vinyl requires registration. If another node sends data to the router of the first node, then their router will successfully transfer the data to the first node. Now the table NAT data from another router.

The problem is to know about your external appearance IP address, a university is needed at the sleeping area. To solve this problem, additional servers are used that directly connect to the Internet. They also help to create additional records in the table NAT.

STUN and TURN servers

Upon initialization WebRTC it is necessary to indicate available STUNі TURN servers that we have given are called ICE servers. If the server is not specified, then only nodes in the same network can be connected (connections to it without NAT). It’s immediately clear what for 3g-Merezh obov'yazkove vikoristannya TURN servers.

STUN server– it’s just a server on the Internet that returns the return address to the sender’s host address. Vuzol, who is behind the router, explodes to STUN server to go through NAT. Package, what's coming to you STUN server, so that the address of the jerel is located - the address of the router, then the external address of our node. Qia addresses STUN the server sends back. In this manner, the university takes away its external IP address and port through whichever network is accessible. Dali, WebRTC For this additional address, we create an additional candidate (external router address and port). Now at the table NAT The router is a record that passes packets sent to the router via the required port to our node.

Let's look at this process from the butt.

Butt (STUN server robot)

STUN the server will be designated via s1. Router, as before, through r1, and vuzol – through p1. It will also be necessary to follow the table NAT– її is significant as r1_nat. Moreover, this table must contain a lot of records from different nodes of the submersion - no stink will be created.

Ok, now I have an empty table r1_nat.

Table 2: Packet Header

Vuzol p1 sends this packet to the router r1(it doesn’t matter what rank, various subdivisions may have vikorstans different technologies). The router needs to change the device address Src IP, Since the addresses included in the package are obviously not suitable for external subdivisions, moreover, addresses from such a range are reserved, and no other address on the Internet contains such addresses. The router requires a replacement in the package and creates new entry at your table r1_nat. For this you need to guess the port number. It is clear that fragments of a few nodes in the middle of the boundary can expand to the outer boundary, then in the table NAT It is necessary to save additional information so that the router can determine which of the many nodes the return packet from the server is assigned to. Let the router come up with a port 888 .

Changed packet header:

Table 4: The NAT table has been updated with a new entry

Here IP The addresses and ports for the submersion are exactly the same as those for the output packet. In fact, when returning to the guilty mother, there is a way to renew them. IP external network addresses are the same as the router's address, and the port has changed to the one created by the router.

Spravzhny port, on yakiy vuzol p1 accepts connections - this, understandably, 35777 , but the server forces the data onto fictitious port 888 , which will be changed by the router to the reference one 35777 .

Then, the router substituted the address and port in the packet header and added an entry to the table. NAT. Now the packet is sent through the network to the server, then the node s1. At the entrance, s1 I have the following package:

Src IP	Src PORT	Dest IP	Dest PORT
10.50.200.5	888	12.62.100.200	6000

Table 5: STUN server receiving packet

Together, STUN the server knows that the best packet is the address 10.50.200.5:888 . Now the server sends this address back. Here you can stop and marvel once again at what we were so fondly looking at. Tables, put in place - a whole lot of things header package, not at all instead. They didn’t talk about instead of us, since it’s not so important - it’s supposed to be described in the protocol STUN. Now we can look at the title instead. You will be forgiven and respectful to the router address - 10.50.200.5:888 , want to take mi yogo z header plastic bag. This is not something to be afraid of often, since the protocols do not care about information about the addresses of the universities, it is important that the packages are delivered for the purpose. Here we can see the protocol that establishes a path between two nodes.

Well, now we have another package that goes straight to the gateway:

Table 7: STUN server enhances the packet with this instead

Then the package will become more expensive until it reaches the new router interface. r1. The router understands that the package is assigned to you. How do you understand this? You can only find out by port. Port 888 It is not vikoryst for its own special purposes, but vikorist for the mechanism NAT. Also, I have a router table and wonder. Marvel at Stovpets External PORT And he looks for the row that goes with Dest PORT with the package, scho priyshov, tobto 888 .

Internal IP	Internal PORT	External IP	External PORT
192.168.0.200	35777	10.50.200.5	888

Table 8: NAT Table

We were lucky, such a row exists. Yakbi was not spared, then the package would simply have been thrown out. Now you need to understand which of the subordinate nodes needs to strengthen this package. There’s no need to rush, let’s re-understand the importance of ports in this mechanism. At the same time, two nodes in the middle could drink up to the current level. Todi, for the first node, the router has chosen the port 888 , then for another wine, having come up with a port 889 . Let’s assume that this is what happened, so the table r1_nat looks like this:

Table 10: The router replaces the receiver address

Src IP	Src PORT	Dest IP	Dest PORT
12.62.100.200	6000	192.168.0.200	35777

Table 11: Router spoofing the receiver address

The package arrives successfully at the node p1 And, marveling at the package, the university learns about its current appearance IP address, this is the address of the router at the external border. It also knows the port which router passes through NAT.

What's next? What kind of measles? Cost – this is an entry in the table r1_nat. Now what will be sent to the router? r1 packet from port 888 , then the router will redirect this packet to the node. p1. In this manner, having completed the small narrow passage to the locked school p1.

In the butt you can more easily reject the statements about work NAT and the essence STUN server. The mechanism started up ICEі STUN/TURN servers are directly directed to the hemline NAT.

Between a node and a server there may be not one router, but a bunch of them. In this situation, the university selects the address of the router that is the first to be located in the same area as the server. In other words, we take away the address of the router connected to STUN server. For p2p communications are the very things we need, so as not to forget the fact that the skin router will have the necessary rows in the table NAT. So the gateway road will be so smooth.

TURN server - no reduction STUN server. Immediately follow the trail, whatever TURN the server can work like this STUN server. Prote є th advantages. Yakshcho p2p communication is impossible (as, for example, 3g merezh), then the server switches to repeater mode ( relay), then he acts as an intermediary. I understand, no matter what p2p then there is no way, but outside the framework of the mechanism ICE Woozley think about what to do in the middle.

In some cases it is necessary TURN server? Why doesn’t it show STUN servers? On the right is that there are a number of different species NAT. The stench, however, changes IP the address is that port, prote in the deeds from them additional zakhist as "falsification". For example, in symmetrical tables NAT 2 more parameters are saved - IP and the port of the remote node. The package from the external border passes through NAT In the internal measure, only in that case, the addresses and ports of the device are avoided from the entries in the table. That's the focus STUN the server does not go into detail - table NAT saves the address and port STUN servers, if the router accepts the packet from WebRTC spіvrozmovnik, which throws out fragments of “falsifications”. It's not coming yet STUN server.

In this manner TURN the server is needed in case the spivrozmovniks are offended by symmetrical NAT(Kozhen for his own).

Short call

Here are some assertions about the essences WebRTC, as it is necessary to remember first. The stench of the thing is described in detail. If you are not completely sane about any of the affirmations, re-read the following paragraphs.

• Media stream
  • Video and audio data are packaged into media streams
  • Media streams synchronize media tracks from which they are formed
  • Different media streams are not synchronized with each other
  • Media streams can be local or remote, depending on whether a camera or microphone is connected locally, data can be retrieved from the data in a coded view
  • There are two types of media tracks - for video and audio
  • Media tracks may have the ability to become darker/worse
  • Media tracks are made up of media channels
  • Media tracks synchronize media channels from which they are formed
  • Media streams and media tracks contain labels that can be used to separate them
• Session descriptor
  • The session descriptor is modified to logically connect two network nodes
  • The session descriptor stores information about accessible ways coding of video and audio data
  • WebRTC Vikorist's external signaling mechanism – pre-selected session descriptors ( sdp) falls on the supplement
  • The mechanism of logical reasoning consists of two stages - proposition ( offer) and types ( answer)
  • The generation of a session descriptor is impossible without the use of local media streams at different times ( offer) and is not possible without changing the remote session descriptor for each type ( answer)
  • Removal descriptor requires implementation WebRTC, and it doesn’t matter whether this descriptor is removed or locally from the same implementation WebRTC
  • It is possible to slightly modify the session descriptor
• Candidates
  • Candidate ( Ice candidate) – this is the address of the node in the border
  • The node addresses can be your own, or they can be the address of the router or TURN servers
  • There are always plenty of candidates
  • The candidate is formed by IP address, port and transport type ( TCP or else UDP)
  • Candidates are victorious to establish a physical connection of two nodes at the edge
  • Candidates also need to be sent through a signaling mechanism
  • Candidates are also transferred to the implementation WebRTC, about only those in the distance
  • In current implementations WebRTC candidates can only be transmitted after a session descriptor has been set
• STUN/TURN/ICE/NAT
  • NAT– a mechanism for ensuring access to the external boundary
  • Home routers support a special table NAT
  • The router replaces the addresses in the packets - the host address to its own, if the packet is coming from the external border, and the receiving address to the node address at the internal border, as the packet arrived from the external border
  • To ensure multiple channel access to external boundaries NAT vikorist spoil
  • ICE– bypass mechanism NAT
  • STUNі TURN servers – helper servers for bypassing NAT
  • STUN the server allows you to create unnecessary records in the table NAT, and also rotates the external node address
  • TURN the server is being registered STUN mechanism and make it work again
  • In the worst episodes TURN the vikory server is considered to be an intermediary ( relay), then p2p transforms into a client-server-client connection.

Hello friends, as you already know, we regularly inform you of new technologies, today I will introduce WebRTC, a technology developed by Google that allows users to speak directly in the browser, video and audio, without what is the wiki plugin - Website or program. Video and audio communication directly between users takes place directly in the browser.
WebRTC technology is supported in Mozilla Firefox Google browsers Chrome and on any operating system, Opera is also included.
What is WebRTC?
WebRTC is short for Web Real Time Communication, this technology allows you to hide audio and video chats directly in the browser without the need for other plugins, programs or services on the Internet. Connections are made directly from your browser.
Some services (Skype, Yahoo Messenger, Apple FaceTime, Google Hago, etc.) use servers that connect clients to initiate and manage traffic. For Vikorist services, we need to register and set up a list of clients and contacts.
With WebRTC, we do not need servers, programs or servers that are connected before intercession.
WebRTC advantages:
1. Ні more add-ons, which benefits from the use of resources and batteries.
2. Chats are more private (good).
3. How to contact you can work on the local market, not Flos USA servers for local connections.
4. Simplicity, handiness and simplicity.
5. The possibility of further development and in other directions.
6. The binding is stable and does not lie in contact with external compounds, which are sometimes extremely unstable.
I have a demo that people at Google have developed, it’s easy to finish the demo, with more capabilities and more connections you can use one of the add-ons that support WebRTC, it’s easier to use i. Soon we will be working on a guide about WebRTC programs.
How do you vikorista WebRTC demo?
Just click the message below and it will automatically generate a chat. Contact this room, you must send a friend/friend you want to get in touch.
Friend/girlfriend and yours, but you are guilty of vikoryism only yourself remaining versions Mozilla Firefox or Google Chrome.

Demo WebRTC(Introductory chat audio-video)

Uvaga:
The demo is not very stable, only demo parts are vibrating. You may be victorious for a long period of time, and for a short period of time the connection may be broken.
If you are having connection problems, try creating a different chat.