Last updated:

WebRTC - Web Real-Time Communication

WebRTC (Web Real-Time Communication) enables real-time communication capabilities in web browsers and mobile applications, allowing audio, video, and data sharing between peers without requiring plugins or downloads. WebRTC is an open-source project and is designed to work across multiple platforms and devices, making it a powerful tool for building interactive applications.

Key Features

How

Uses a peer-to-peer architecture to allow direct communication between clients. Here’s a simplified overview of how a WebRTC connection is established:

  1. Signaling: Clients exchange information to set up the call, such as session descriptions and network details. This is done through a signaling server, which can use various protocols like WebSocket, SIP, or XMPP.

  2. ICE (Interactive Connectivity Establishment): Clients determine the best path for communication, traversing NATs and firewalls. This process involves gathering ICE candidates (potential network paths) and exchanging them between peers.

  3. STUN (Session Traversal Utilities for NAT): A STUN server helps clients discover their public IP address and port, assisting in NAT traversal.

  4. TURN (Traversal Using Relays around NAT): If a direct peer-to-peer connection fails, a TURN server acts as a relay, forwarding data between the clients.

  5. Secure Connection: WebRTC uses DTLS (Datagram Transport Layer Security) for encryption and SRTP (Secure Real-time Transport Protocol) for media transmission, ensuring a secure and private connection.

Example

Vonage (my employer) is a leading Communication API provider that offers a wide range of services for voice, messaging, authentication, and more. Let’s take a closer look at how to make a voice call using the Vonage Voice API.

The Vonage Video API (formerly TokBox OpenTok) is a WebRTC-based platform that simplifies the process of building video applications. Here’s an example of how to create a basic video chat application in JavaScript:

index.html

<html>
<head>
    <title> Vonage Getting Started </title>
    <link href="css/app.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/@vonage/client-sdk-video@2/dist/js/opentok.js"></script>
</head>
<body>

    <div id="videos">
        <div id="subscriber"></div>
        <div id="publisher"></div>
    </div>

    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

app.js

// replace these values with those generated in your Video API account
var apiKey = "YOUR_APP_ID";
var sessionId = "YOUR_SESSION_ID";
var token = "YOUR_TOKEN";

// Handling all of our errors here by alerting them
function handleError(error) {
if (error) {
    alert(error.message);
}
}

// (optional) add server code here
initializeSession();

function initializeSession() {
var session = OT.initSession(apiKey, sessionId);

// Subscribe to a newly created stream
session.on('streamCreated', function(event) {
    session.subscribe(event.stream, 'subscriber', {
    insertMode: 'append',
    width: '100%',
    height: '100%'
    }, handleError);
});

// Create a publisher
var publisher = OT.initPublisher('publisher', {
    insertMode: 'append',
    width: '100%',
    height: '100%'
}, handleError);

// Connect to the session
session.connect(token, function(error) {
    // If the connection is successful, initialize a publisher and publish to the session
    if (error) {
    handleError(error);
    } else {
    session.publish(publisher, handleError);
    }
});
}

The Vonage Video API handles the WebRTC signaling, ICE candidate exchange, and media stream management, making it easier to build video applications without dealing with the low-level WebRTC details.

Where to next

As browser support continues to improve and new features are added to the WebRTC standard, we can expect to see even more innovative use cases and applications in the future.