Real-time communication with WebRTC

Tailor-made web-based Audio & video solutions Real-time communication with WebRTC

Latencies, Jittering, disconnections: if you have not had problems with the Audio and video transmission over the Internet? The WebRTC Standard is intended to provide a remedy, this contribution focuses on the possibilities and peculiarities of the Browser-based “Web Real-Time Communication”.

Company to the topic

In the JavaScript console in the Chrome browser of inserted Media-Stream-call.In the JavaScript console in the Chrome browser of inserted Media-Stream-call.

(Image: Boele / Google)

In the past 12 months, the network-based communication via Video and Audio as a result of the COVID pandemic in the field of digitization has also in the sense restraint in Germany, experienced a huge boost. According to a study by Twilio, the digitization initiatives in a number of sectors were accelerated compared to the usual development speed of up to 7.2 years.

The massive success of the provider of collaboration solutions, therefore, is not surprising. The disadvantage of most solutions on the market, the need to install any additional Software to Audio – and Video-Conferencing, and Desktop Sharing, and embedded Chat features. In addition, the Server must be kept in reserve capacities, in order to allow a use of these technologies.

For conferences with more than three participants, this is also quite useful, even alone, for safety considerations, such as authentication, authorization, and Accounting. In the case of interactions between two participants, i.e., Peer-to-Peer setup, requires no Setup on a virtual conference room, as long as no additional functions such as Logging, Debugging, or Recording will be needed.

Ideally, the media data between the two participants, with much less negative effects as a result of latency and Jitter. In the field of telemedicine, the direct Media Traffic between doctor and Patient is a core requirement for use in the sphere of CBD (kassenärztliche bundesvereinigung) is.

The Web Browser is now an essential part of any stationary and portable computer, Smartphones, and Tablets. It was already some time ago, to extend the Browser’s functionality for real-time communication. Here WebRTC – Web Real – Time Communications comes in.

Video or voice communication is easy with the Web Browser

WebRTC is an Open-Source project consisting of a series of Standards, which are controlled by the W3C (World Wide Web Consortium) and the IETF (Internet Engineering Task Force) and a Media Stack for the real-time communication for Web browsers and mobile devices on the Internet to define. The functionalities are available via different APIs, i.e., Application Programming Interfaces accessible.

Without additional Plug-ins, or applications, the Peer-to-Peer Video and communication, as well as the exchange of data within the web pages of the language allows. This improves the user experience tremendously and also allows for the communication to closed systems. The team project is supported among other things by Apple, Google, Microsoft, Mozilla, and Opera.

In terms of design WebRTC includes several APIs. The essential elements are:

  • getUserMedia allocates the Audio and Video media of the system (for example, access to your camera and microphone of the computer, or smartphone)
  • RTCPeerConnection sets the Audio – and Video-communication between Peers. The signal processing, dealing with Codecs, the Peer-to-Peer communication, security, and bandwidth management. WebRTC supports DCSP Marking, which can be taken into account by the downstream network elements in the Traffic-Handling.
  • RTCDataChannel allows the bi-directional exchange of data between Peers. It uses the same APIs like Websockets and is characterized by a very low latency.

You can, for example, the following Code in the JavaScript console in the Chrome browser, you receive a Media Stream with Audio and Video Track, if you give access to your camera and microphone free (and, these are also available):

const constraints = {
'video': true,
'audio': true
}
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
console.log('Got MediaStream:', stream);
})
.catch(error => {
console.error('Error accessing media devices.', error);
});

In the JavaScript console of Chrome browser pasted Code with a reply.In the JavaScript console of Chrome browser pasted Code with a reply.

(Image: Boele / Google)

The answer looks like, for example, as in the preceding image. A quick Test of the getUserMedia API Calls can also be used on Website https://simpl.info/getusermedia/ make. A data transfer can be https://simpl.info/rtcdatachannel/ try out. There is also a Link to the Code is stored on GitHub. An additional advantage of the use of WebRTC, the use of the Browser implemented security mechanisms, including secure communication via validated strong cryptographic protocols, including DTLS and SRTP is.

The support of various Audio and Video Codecs built-in Web-browsers, what is the Handling is greatly simplified. Among the supported Video Codecs VP8 and VP9, as well as AVC/H. 264 (with limitations). AV1 (for Chrome) and HEVC (for Safari) are currently in the experimental stage. In the area of Audio Opus support, G. 711 PCM (a-Law and u-Law). Different Web-browsers to the endpoints can agree on a set of Codecs that are supported by both sides.

Server components for different application areas

As already mentioned, extend the application areas for WebRTC Peer-to-Peer voice and video communication (including, for example, tele-medicine), Event and Collaboration platforms, to use in Call centers, where the Browser is the classic hand-apparatus completely replace it.

To enable these services, depending on the application – WevRTC Server components for the following tasks are required:

  • NAT Traversal Server for WebRTC

The application Server hosting the Website, through which the WebRTC API Calls are triggered. The Signaling Server for the connection set-up and removal, and use of protocols such as SIP, XMPP or MQTT. Also several proprietary implementations of Signaling servers NODE.JS base are available. Signaling is not part of the WebRTC Standards and must be implemented according to yourself, what Websockets are due to the low overhead and real-time data exchange Protocol.

In the majority of cases, the WebRTC endpoints to communicate with each other are behind NAT Firewalls. NAT-Traversal Server help, the communication partners can communicate with each other. There is a difference between STUN and TURN servers.

  • The STUN (Session Traversal Utilities for NAT) Server to determine the public IP address of a client, which is then used for the replacement of the Media Streams between the Peers.
  • The TURN (Traversal Using Relays around NAT) Server is used, the Media Streams forward. This is used when the Peers can communicate directly with each other.

The WebRTC Media Server to act as a Server-side Clients, and act, among other things, as an MCU (Multipoint Control Unit), to groups of rooms available. Furthermore, this can serve as a Protocol Converter and Gateway to other networks, recording and Broadcasting/Streaming functionalities and more.

WebRTC has concluded with its release several years ago, a critical gap in the Web platform. It offers cost-effective Audio-, Video – and data-communication via the Web Browser, without the use of proprietary and independent applications to be used from the rod to real – time communication via a Web page. “The Voice is just another JS application”, as it is the former CTO of the FCC, Henning Schulzrinne, to the point has brought.

Thomas Boele

Thomas Boele (Image: Twilio)

Those who Like the more of the above examples has found, too, can get deeper into the matter, and with very little effort, a Peer-to-Peer React-Web-App, a guide can be found here: https://github.com/twilio/twilio-video-app-react. Appropriate examples are also available for Android and iOS.

* Thomas Boele is the Director of Solutions Engineering at Twilio.

(ID:47117249)

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png