Guide to building video call app using Easyrtc framework

Tram Ho

Written by Ha Trieu Kim

This App has a video call function for 2 people (actually possible for many people but to simplify it we only do 2).

Materials needed are : IDE, Easyrtc framework , Chrome.

You follow the instructions in the above link to set up the necessary things.

This is what happens when you go to the website: the app uses a webcam to get your video and drop it into the <video> tag; The app will constantly listen to see if anyone is entering / exiting the app and performing the corresponding action; If there is a person in the app (other than you), the name of that person (id) will appear in a button, you click it to connect and the 2 people start talking.

In total, write 2 things: 1 html file, 1 javascript file. For this demo, put the above 2 files into the corresponding location in the demos folder.

Let’s start doing it

In the html page where to connect to the other user and display the video

You need 1 div tag for video, 1 tag div for connection: <div id="connectControls">, <div id="videos"> .

In the video div , drop 2 <video> tags, one for you, one for the other (this is where the video stream is displayed)

The div connection is where your name is displayed and the button to connect to the other

In the <body> tag you add the onload <body onload="connect()">

So your html page will look like this:

Note that the first two <script> tags are needed to connect to the server and use the framework.

In javascript page is a place to execute logic

In order for things to be said at first to happen, you need the functions that meet the needs:

1. Process video and connect to the server

“Video_call_app” is the app name; “SelfVideo” is your <video> tag id, the framework will take videos from your webcam and drop them here; [“CallerVideo”] is an array of <video> tag ids of others (in this case, only 1 app, but more if you want to call multiple people at the same time); loginSuccess, loginFailure is the callback function called in the corresponding case.

2. Track people in / out

Anyone who enters the app is recognized by the server, and when that event occurs, the callback function convertListToButtons is called.

If someone enters the app, that person’s name will appear in a button, press that button to call.

3. Make a call

When this function is called, you and the person are connected directly to each other P2P, the two-party video is exchanged.

The complete js file will look like this:

Now that the application is complete, go to localhost: 8080 and access the html page you just wrote (open 2 tabs). To connect to the other user, click on the person’s name and the person’s video will be displayed

So you have successfully built a video call app with the support of Easyrtc framework.

Share the news now

Source : Viblo