Create a Video Calling Page

Create a Video Call Page

You’ve learned all essential concepts to implement a video call, such as RTCPeerConnection API, SDP message exchanges, ICE candidates to establish a peer connection. Now let’s create a HTML page that renders video streams between a local peer and a remote peer.

First, create an index.html HTML file that contains two video tags to render a local peer and a remote peer and button tags to control video actions like the example below:

Next, you should import an additional script, adapter-latest.js. The adapter.js is a shim to insulate apps from spec changes and prefix differences. In fact, the standards and protocols used for WebRTC implementations are highly stable now, so there are only a few prefix differences and you can resolve it by using this script:

Finally, the index.html HTML file should now look like this:

Complete a Peer Connection

Now let’s put together the creating a peer connection, exchanging SDP messages and ICE candidates, and finally establishing a peer connection like the example below:

Let’s break down the functions above one by one:

• start(): This function will be called when you click the Start button on the web page. It gets a MediaStream and initializes the local video and stream.
• call(): This function will be called when you click the Call button on the web page. It establishes a peer connection between a local and a remote peer and processes everything you need to create a peer connection, such as exchanging SDP messages and ICE candidates.
• onCreateOfferSuccess(): This is called to create an offer and set a local description to the local peer. The remote peer sets the offer as a remote description and create an answer. This function is called in the call() function.
• onCreateAnswerSuccess() : This is called to set an answer as a local description to the remote peer and set the answer as a remote description to the local peer.
• hangup(): Close peer connections and clear all connect resources.

If you want to apply styles for the demo application, you can download the main.css and save it into the css folder.

Note: You can download the full source code of Lesson 2 on GitHub.

Running The WebRTC Demo Application

If you run the index.html file, you will see the demo below:

Next, click the CALL PC1 button to display a video stream from the local camera. If you click the button, you will see the popup below that asks you to get access permission for your local camera and microphone.

If you click the Allow button on the popup, you will see the real-time video stream screen on your screen like the below:

You are connected to only the local video stream, so another screen that represents a remote peer is black. If you want to create a peer connection for exchanging media data with a remote peer, click the CALL PC2 button, and now you’ll see the video call result below:

If you want to disconnect the peer connections between 2 pcs, you can achieve it by clicking the DISCONNECT button on the page.

This tutorial connects and renders a local peer and a remote peer on the same computer and the browser, so it’s not much practical use, but now you have a better grasp of how WebRTC works.

Note: You can demonstrate and test the sample application about Create a Peer Connection on your web browser without building the project.

Debugging WebRTC in Chrome Browser

If you want to debug your WebRTC application, you can easily debug your WebRTC application on the chrome://webrtc-internals/ page, a WebRTC inspection tool by Chrome.

Firstly, run the Create a Peer Connection example application, and go into the chrome://webrtc-internals/ page, and you will see the inspection page below:

In this tutorial, you’ve learned how to establish a peer connection. Now, let’s learn how to exchange plain messages or media data via a media channel using WebRTC.