Develop a Client Endpoint Application

Client endpoints are devices involved in RTC communication. A client endpoint can be:

• a browser running on a laptop or a PC.
• a mobile or a tablet running on Android or iOS platforms.

Depending on the device your application needs to support, select the appropriate EnableX Video SDK.

This topic provides steps for joining a video session from connecting to a virtual room, to receiving others video streams, to disconnecting from the virtual room.

Note: All examples provided in this topic are in the context of Web SDK only.

You can follow these steps for your preferred SDK and use the corresponding functions provided with the SDK.

Use the Preferred SDK

Endpoints can connect to a specified room hosted on the EnableX platform using a token to establish an RTC session. You can opt for the preferred Video SDK depending on the endpoint device.

Connect to a Room and Publish a Stream

The client endpoint needs a token to connect to a video room. EnableX validates this token before granting access to the room. Once connected, you can start your audio or video stream and publish the media stream to the room.

Example (Web SDK): Connecting to a video room

The EnxRtc.joinRoom() method connects client endpoints to a video room. It also initiates and publishes media streams into the room. After successful publishing, it returns

• the local stream handle on managing the published stream.
• information on the connected room with all the information about the remote stream.

You can subscribe to remote streams to receive and play them.

Sample Code

/* 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;   
	}
 });

Subscribe the Remote Streams

After a successful connection to the room, the client endpoints obtain a list of available streams. The client endpoints must subscribe to all available remote streams in order to receive and play the videos of remote participants.

Note: The client endpoints must also subscribe to the screen sharing stream (Stream No. 101) and the canvas stream (Stream No. 102) to receive Screen Sharing and Canvas Streaming.

Example (Web SDK): Stream subscription

If you want to subscribe to individual streams available in a room, use the EnxRoom.subscribe() method. You must listen to the stream-subscribed event to know when you are subscribed.

Sample Code

// 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");
});

Play a Stream

You can play a local stream and all subscribed remote streams, including screen sharing and canvas streams in a video player or use the EnxStream.play() method.

Example (Web SDK): Play a stream

Use the EnxStream.play() method to play a stream in an HTML5 video player within HTML DOM.

Note: The method creates a related AUDIO/VIDEO HTML tag to play the audio or video within the given HTML DOM ID. For a complete list of player options, see the Appendix.

Sample Code

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

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

Handle Active Talkers

The decision of which of the participants streams play depends upon the Active Talker list. EnableX sends a maximum of 12 actively talking users in a room to client endpoints to prevent excessive consumption of server and client resources. Additionally, it sends screen sharing (StreamID# 101) and canvas (StreamID# 102) streams only if the client applications support these features.

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. It creates a new entry in the Active Talker list. The list keeps getting updated depending on the latest talker in the room and the latest talker is moved up in the list. Therefore, you may receive the event too frequently in a noisy room. The list of Active Talkers is available in the JSON format. When the Active Talker list changes, the changes are sent to each connected endpoint through this event.

Sample Code

// JSON 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
    }
  ]
}

Sample Code

// 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);
           }
       }                       
 });

Disconnect from a Room

When the conversation in a session is over, a client endpoint may want to disconnect from the video room. A simple way to disconnect is to disconnect the socket or through the Disconnect method.

Example (Web SDK): Disconnect from a room

The EnxRoom.disconnect() method disconnects the client endpoint from the room. The media and signalling sockets are also released in this process.

Sample Code

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
 });