How To Install

You will need to install Git Bash

Then, let's clone the GitHub repository

git clone https://github.com/CodingReef/EaseRTC.git

Or you can just add the following code snippet in the head tag of your html file

<script src="https://codingreef.github.io/EaseRTC/EaseRTC.js" ></script>

NOTE: If you clone the git repository you will have a pre-built example that you can run.

Supported APIs

First, let's make an instance of the library's class to use the APIs inside it.

var easeRTC = new EaseRTC(configuration);

Here, replace configuration with your ICE-Servers. More on ICE-Servers HERE

then you can use the following supported APIs

• easeRTC.createOffer(video, audio);

• easeRTC.createAnswer(offerSDP, video, audio);

• easeRTC.connectToAnswer(answerSDP);

• easeRTC.getTracks();

• easeRTC.changeTrack();

• easeRTC.getMedia(video, audio);

easeRTC.createOffer(video, audio);

The createOffer API accepts 2 values, video and audio - these parameters describe the media types requested. Either or both must be specified. This is used in the offerer's side

This API returns the user's media stream and the offer SDP.

Here are some examples

easeRTC.createOffer(true, true).then(data=>{

//data is in the json format.

//you have to write your server code to pass the following offer to the answerer

console.log(data.offer);

//this holds this user's video and audio

console.log(data.stream);

document.getElementById('local').srcObject = data.stream;

});

easeRTC.createOffer({width: 1280, height: 720}, true).then(data=>{

console.log(data.offer);

console.log(data.stream);

document.getElementById('local').srcObject = data.stream;

});

easeRTC.createOffer({

width: { min: 1024, ideal: 1280, max: 1920 },

height: { min: 576, ideal: 720, max: 1080 }}, true).then(data=>{

console.log(data.offer);

console.log(data.stream);

document.getElementById('local').srcObject = data.stream;

});

easeRTC.createOffer({ facingMode: "user" }, true).then(data=>{

console.log(data.offer);

console.log(data.stream);

document.getElementById('local').srcObject = data.stream;

});

easeRTC.createAnswer(offerSDP, video, audio);

The createAnswer API accepts 3 values - offerSDP this is the configuration given by the createOffer API, video and audio (same as createOffer). This API used in the answerer's side

This API returns the users media stream and the answer SDP.

Here is an example

easeRTC.createAnswer(/*pass the var which holds the offerSDP*/,true, true).then(data=>{

//data is in the json format.

//you have to write your server code to pass the following offer to the answerer

console.log(data.offer);

//this holds this user's video and audio

console.log(data.stream);

document.getElementById('local').srcObject = data.stream;

});

The same kind of media configurations from createOffer API can be used for this API too.

easeRTC.connectToAnswer(answerSDP);

The connectToSDP API accepts 1 value - the answer SDP created by the answerer. This API used in the offer-er's side

This API returns an status, weather the connection is successful or not

Here is an example

easeRTC.createAnswer(/*pass the var which holds the offerSDP*/).then(status=>{

console.log(status)

});

easeRTC.getTracks();

Okay, so now both the users are sharing their video and audio but they don't display them. To do so we use the getTracks API. This API gets the other user's audio and video.

This API returns an media stream object

Here's an example

easeRTC.getTrack().then(stream=>{

console.log(stream);

document.getElementById('remote').srcObject=stream;

});

easeRTC.changeTrack();

What if the user wants to turn off the video or audio. For this, we use the change Tracks API.

NOTE: THIS JUST CHANGES THE TRACKS, BUT TO TAKE EFFECT YOU HAVE TO REINITIATE THE FULL OFFERING AND ANSWERING PART

This API returns a media stream object

Here's an example

easeRTC.changeTrack(true, false).then(stream=>{

console.log(stream);

document.getElementById('local').srcObject=stream;

});

You can change the true and false value with different configurations as you wish.

easeRTC.getMedia(video, audio);

This is not required for creating the video call but can be used somewhere else if required.

Here's an example

easeRTC.getMedia(true, false).then(stream=>{

console.log(stream);

//you can use this as you wish

});

You can change the true and false value with different configurations as you wish.

What next?

Now that you know what to do, you can develop your own WebRTC Calling App/Website. If you come across any issue or problems you can start a new issue on GitHub, we will respond to you with the solution. And don't forget to check out our example files (run index.html).

Want to contribute?

As this is an open-source project you can add your advancement to this and contribute it, we'll see if it works and publish it. Make sure to add your name in the Contributors List.md file before you contribute it. thanks!!!

For any quires contact us using:

Email: support@codingreef.com

Thank you for using EaseRTC

CodingReef Developers and Condtributors