Get Started

The following guide describes how to get started with WebRTC.ai and to perform stream publishing and subscription.

Set up your development environment

All the interactions with WebRTC.ai are powered by the Javascript SDK. It is the first step in enabling the video communication powered by WebRTC.ai. To begin, add the required client libraries to your app.

<script src="https://cdn.webrtc.ai/sdk/latest.js"></script>

This would create a WebRTCai object and associate with the global window object.

The client SDK needs to be fully loaded before you can interact with WebRTC.ai. If you are using async/differ in the script tag, be sure that the WebRTCai object has been created in Global window namespace before interacting with it.

Initialising the SDK:

WebRTCai.init_session is an asynchronous method and returns a Promise. The Promise would resolve with a connector object or reject with an error. The SDK would maintain a robust websocket connection with WebRTC.ai. All further interactions (like publishing a new stream or subscribing to other users' stream) would make use of this connector object. API endpoints are deployed over Anycast to optimise the routing to Media Server thus minimising packet loss, jitter and latency.

Following are the required parameters for initiating a connection with WebRTC.ai:

1. API_KEY : Either a WEB_API_KEY (bounded for your domain) or a JWT_TOKEN (created at your backed servers)

2. SESSION_ID : A unique identifier for each session (think of it as a room).

3. USER_ID : A unique identifier for the user. (e.g. phone numbers)

4. logLevel : use "debug" to get maximum logging in console (default : warn)

let connector;
if(window.WebRTCai){
    window.WebRTCai.init_session({
       API_KEY : WEB_API_KEY, 
       SESSION_ID : SESSION_ID,
       USER_ID : USER_ID,
       logLevel : 'warn'
   }).then((connectorObj) =>{
      connector = connectorObj
   }).catch((err) =>{
      console.error("Error while initilizing WebRTC.ai ", err)
   })
}
               

It might take few seconds to initialise a connection to the nearest data-center, authorise the client and create a session.

Creating a publisher:

The connector object obtained in the previous step exposes a method publish to initiate a WebRTC connection with the cloud servers and start publishing a stream like webcam or screen sharing. The method would return a Promise that would either resolve with a publisherObj (required to further manipulate the video feed) or reject with en error.

Following are the parameters supported:

• args:

  • username : Human friendly name for this publisher (default : user_id of the session)

  • type : "video"/"screen" Either publish the webcam or share screen. (default : "video")

  • screenshareFrameRate : How many frames to capture per second. (default : 22 )

  • video_device_id : ID of video device to capture, obtain a list via WebRTCai.listDecives()

  • adaptive_bitrate : Dynamically adjust media quality as per available bandwidth (default : true)

  • resolution : A string representation for Webcam Stream. Possible values "sd/hd/fhd" (default : "sd")

  • datachannel: Boolean for native WebRTC datachannels, default false

• targetVideoEleID : HTML video element id, it would preview the stream that client is publishing.

let localPublishers = {}
document.getElementById("publish_button").addEventListener('click', ()=>{
    targetVideoEleID = "localWebCam"
    connector.publish(args = {
            username : "Demo User",
            type : "video",
            datachannel : true,
            resolution : "hd"
        },
        targetVideoEleID)
    .then((publisherObj) =>{
        localPublishers["video"] = publisherObj
    }).catch((err) => {
        console.error("WebRTC.ai publisher failed ", err)
    })
})
               

On successful publication, the targetVideoEleID would start playing the webcam feed with muted attribute set to true, to be compliant with browsers' autoplay policies (not letting any video play with sound enabled without a user click)

Subscribing to other publishers in this session:

The connector object emits certain events to inform the client app about various states of the session. One of the most useful of them is WebRTCai.events.publisher , that fires every time someone starts publishing in the session. Client apps can listen for this event and subscribe to the new publisher with method subscribe exposed by the connector object. Following are the parameters supported:

• data : The object received with the event.

• args:

  • audio : true/false should the SDK receive the audio stream (default : true)

  • video : true/false should the SDK receive the video stream (default : true)

  • adaptive_bitrate : Dynamically adjust media quality as per available bandwidth (default : true)

• targetVideoEleID : HTML video element id, it would preview the stream client is publishing.

let peerPublishers = {}
connector.on(WebRTCai.events.publisher, (data) =>{
    const subscriberVideoID = "subsciber_vid_1"
    connector.subscribe(
        data, 
        args = {
            audio : true,
            video : true,
        }, 
        targetVideoEleID=subscriberVideoID)
    .then((sObj) =>{
        peerPublishers[sObj.id] = sObj
    }).catch((err) => {
        console.log("SDK produed this error as subscriber ", err)
    })
})
               

On successful publication, the targetVideoEleID would start playing the webcam feed with muted attribute set to true, to be compliant with browsers' autoplay policies (not letting any video play with sound enabled without a user click)