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
- Use preferred SDK
- Connect to Room & publish
- Subscribe Remote Streams
- Play Stream
- Handle Active Talkers
- Disconnect
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 SDK – Android SDK – iOS SDK – React Native SDK – Flutter SDK – Cordova 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 SDK – Android SDK – iOS SDK – React Native SDK – Flutter 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 SDK – Android SDK – iOS SDK – React 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 SDK – Android SDK – iOS SDK – React Native SDK – Flutter SDK – Cordova 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 });