Real-Time Video Call App with WebRTC

zhu-ting commented 4 years ago

We are about to learn

Introduction to WebRTC
WebRTC APIs in JavaScript
Working with a SimpleWebRTC framework
Building a Video Call App

Introduction to WebRTC

History of WebRTC

Real-Time communication capabilities have become a common feature of many of the applications we use nowadays. However, having live video calls on a browser in the past was quiet a difficult task for users, because they have to install plugins into their system for different applications to use video calling on the web browser, and with plugins came vulnerabilities, hence regular updates.

Google released an open source project in May 2011 for browser-based real-time communication standards, call WebRTC.

WebRTC is being standardized by the World Wide Web Consortium (W3C) and the Internet Engineering Task Force (IETF). Visit http://iswebrtcreadyyet.com/ you can know whether your browser is ready to support WebRTC.

zhu-ting commented 4 years ago

JavaScript WebRTC API

Since browser support WebRTC natively, JavaScript WebAPIs have been created by browser vendors so that developers can easily build applications. Currently, WebRTC implements the following few APIs that are used by JavaScript.

[ ] MediaStream
[ ] RTCPeerConnection
[ ] RTCDataChannel

MediaStream API is used for getting access to the video and audio devices of the user. Generally, browsers will prompt the user as to whether he/she wants to allow the website to access the camera and microphone of his/her device. Although the underlying concept for MediaStream API is the same, different browser vendors have implemented the API differently.

For example, in Chrome, to use the MediaStream API, you need to use the navigator.getUserMedia() method. Also, Chrome allows MediaStream to work only in localhost or HTTPS URLs.

Create a simple HTML file and inside the file, add the following code

<!DOCTYPE html>
<html>
    <video></video>
    <script>
        const $video = document.querySelector('video');
        if (navigator.getUserMedia) {
            navigator.getUserMedia(
                {audio: true, video: true},
                stream => {
                    $video.srcObject = stream;
                    $video.muted = true;
                    $video.onloadedmetadata = () => {
                        $video.play();
                    };
                },
                error => console.log(error)
            );
        }
    </script>
</html>

This code does the following things 1 It will create a reference to the

The first parameter specifies what is needed by the website to the browser
The second parameter is the success callback function. The received video and audio stream from the user is available in the stream object that is passed as the parameter to this function. It adds the srcObject attribute to the
The third parameter is called when the user denies permission to the website to access the camera or microphone, or some other error occurs and the media stream cannot be retrieved. This function has an error object as its parameter, which contains the error details.

In Firefox, you need to use navigator.mediaDevices.getUserMedia() method that returns a Promise. The stream object can be used using a .then().catch() chain.

    <script>
        const $video = document.querySelector('video');
        navigator.mediaDevices.getUserMedia({audio: true, video: true})
        .then(
            stream => {
                $video.srcObject = stream;
                $video.muted = true;
                $video.onloadedmetadata = () => {
                    $video.play();
                };
            }
        ).catch(console.error);
    </script>

zhu-ting commented 4 years ago

Using Adapter.js library

Since the WebRTC implementation varies between browsers, it is recommended to use a shim, such as the adapter.js library (https://github.com/webrtc/adapter), which insulates the code from differences in browser implementations.

zhu-ting commented 4 years ago

RTCPeerConnection and RTCDataChannel

While the MediaStream API is used to retrieve the video and audio stream from the user's device, the RTCPeerConnection and RTCDataChannel APIs are used for establishing a peer-to-peer connection and transferring data between them.

Even though WebRTC was created to make devices connect with each other directly without any servers, it is currently impossible to achieve this, because to connect with a device, you need to know where the device is located on the internet, that is the device's IP address on the internet.

But generally, devices will only know their local IP address (192.168.1.x type). To overcome this issue and send the exact IP address to the other device, we need signalling servers, such as STUN or TURN.

In our Video Call app, we are going to use the SimpleWebRTC framework, which will abstract APIs and provide us with a simpler object to establish a connection with other devices.

zhu-ting / WebRTC