Client End Points are the devices which will be involved in RTC communications. A Client End Point can be a browser running on laptop/PC; mobile device or tablets running on Android or iOS. Depending on the device your application needs to support, you will select the respective EnableX Client SDK.

Table of Contents

This Lesson tries to cover concepts of getting into a Video Session, starting from connecting to the VIrtual Room till you see others Video and later disconnect from the Room. All example shown are shown using Web SDK only. Similarly, you will be using related functions of your preferred SDK.

Use preferred SDK

End-Points can connect to a specified Room hosted on EnableX platform using a Token to establish a RTC session. Depending on End Point Device, you need to opt for the right Video SDK for Application Development.

Connect to Room

The Client End Point needs to get a Token and connect to the Video Room. EnableX validates the Token before granting access. Once successfully connected to the Room, you may start your audio/video stream and publish the Media Stream (With Audio & Video Track in it) to the Room.

Example: Web SDK – Connecting to Video Room

EnxRtc.joinRoom() method connects End-Point to the Video Room. Optionally initiates and publishes Media Stream into the Room. After successful publishing, it returns Local Stream handle to manage the published stream. It also returns information of the connected room with all remote stream information that you can subscribe to receive and play.

/* Configure your Media Stream to publish */
var PublishStreamInfo = {
     audio: true, 
     video: true,
     videoSize: [640, 480, 640, 480],
     attributes : {   
         name: "John",
         age: 21,
         emp_id: "EMP039"
     } 
 };

/* Create Empty Object, if not to publish Media Stream */
var PublishStreamInfo = {);

/* Connect to Video Room */
localStream = EnxRtc.joinRoom(TOKEN, PublishStreamInfo, function(success, error) {
	if (error && error != null) {
		/* Handle Connection Error */
	}
	if (success && success != null) {  
		/* Connected Room Information */ 
		room = success.room;   
	}
 });

Read more in: Web SDKAndroid SDKiOS SDKReact Native SDKFlutter SDKCordova SDK

Subscribe Remote Streams

After successful connection to the Room, the Client End-Point will be able to obtain a list of streams available in the room. The Client-End Point needs to subscribe to all remote streams available in the Room. Unless the Client End Point subscribes to the available streams, it cannot receive and play remote participants’ videos.

Note that you must subscribe to Screen Share Stream (Stream No. 101) and Canvas Stream (Stream No. 102) too to receive Screen Share and Canvas Stream respectively.

Example: Web SDK – Stream Subscription

EnxRoom.subscribe() method may be used to subscribe to individual streams available in the room. You need to listen to stream-subscribed event to know when you are subscribed.

// Room Connection call back success information
// has all Remote Stream Information
for (var i=0; i < success.streams.length; i++) {
     // Subscribe Stream
     room.subscribe(success.streams[i]);  
} 

// You are notified when subscription is successful
room.addEventListener("stream-subscribed", function(event) {
     console.log("Stream subscribed");
});

Read more in: Web SDKAndroid SDKiOS SDKReact Native SDKFlutter SDK

Play Stream

You can play a local stream and all subscribed remote streams including screen-share, canvas streams in a Video Player directly or using SDK method.

Example: Web SDK – Play Stream

Use EnxStream.play() method to play a Stream in an HTML5 Video Player within HTML DOM. Note that the method will create related AUDIO / VIDEO HTML Tag within the given HTML DOM ID to play the Video or Audio. For a complete list of Player Options, see Appendix.

// Play Stream
stream.play(DOM-ElementID, playerOptions); 

// The Stream Object here may be a local, remote, screen share or canvas stream

Read more in: Web SDKAndroid SDKiOS SDKReact Native SDK

Handle Active Talkers

To avoid excessive consumption of the server and client resources, EnableX sends a maximum of 12 actively talking users in the Room to the client endpoint. Additionally, it sends Screen Sharing (StreamID# 101) and Canvas Stream (StreamID# 102) if the client application supports these features. The decision on which of the participant’s streams would be played depends upon the Active Talker List. 

Example: Web SDK – Updated Active Talkers List

After you connect to the room and subscribe to the available Streams, the active-talkers-updated event is triggered, which creates a new entry in the Active Talker List. This list keeps getting updated depending upon the latest talker in the Room. Hence, the Active Talker List contains a list of talkers in ascending order at any point in time which means that the latest talker would be moved up in the list. Therefore, you may expect to receive the event too frequently in a noisy room. The list of Active Talkers is available in JSON format and sent through the active-talkers-updated event to each connected endpoint whenever there is a change in the Active Talker List.

// USON Format: Updated Active Talker List received
{
  "active": true,
  "activeList": [
    {
      "clientId": "String",
      "mediatype": "audiovideo",
      "name": "String",
      "reason": "user",
      "streamId": "Number",
      "videoaspectratio": "16:9",
      "videomuted": false,
      "pinned": false
    }
  ]
}
// Handle updated AT List and Play Stream
room.addEventListener('active-talkers-updated', function (event) {
       TalkerList = event.message.activeList;
       for (var i = 0; i < TalkerList.length; i++) {
           if (ATUserList[i] && ATUserList[i].streamId) {
               var stream  = room.remoteStreams.get(ATUserList[i].streamId);
               var stream_id   = ATUserList[i].streamId;
               var username    = ATUserList[i].name;
               stream.play("DOM_ELEMENT_ID", PlayerOptions);
           }
       }                       
 }

Read more in: Web SDKAndroid SDKiOS SDKReact Native SDKFlutter SDKCordova SDK

Disconnect from Room

When conversation gets over in a Video Session, one may need to disconnect from the Video Room. A simple way to disconnect it to disconnect the Socket or by using EnableX SDK Method.

Example: Web SDK – Disconnect

The EnxRoom.disconnect() method is used to disconnect the client endpoint from the Room. The media and signaling sockets are also released in this process.  

room.disconnect();

room.addEventListener("room-disconnected", function(event) {
     // You are disconnected
});

room.addEventListener("user-disconnected", function(event) {
     // One user is disconnected
     // event - User Information of disconnected user
 });