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

Using the Client SDK

End-Points can connect to a specified Room hosted on EnableX platform using a Token to establish a RTC session. EnableX currently provides 4 types of Client SDK to develop End Point Applications, These are:

  • Web SDK
  • Android SDK
  • iOS SDK
  • React Native SDK

Use Web SDK

Web SDKis used to develop applications on Client End Points which will run on supported browsers. The SDK EnxRtc.js, is a minified JS library. You can download the SDK, save locally and refer the EnxRtc.js file in your <head></head> section of HTML file.

A typing HTML file using EnxRtc.js will look like the following:

<html>
<head>
     <title>EnableX</title>
     <script src="js/EnxRtc.min.js"></script> <!-- Web SDK -->
     <script src="js/my-app.js" type="text/javascript" ></script> <!-- App Related -->
 </head>
 <body>
     <div id="videos">
         <div id="remoteVideos"></div>
         <div id="localVideo"></div>
     </div>
 </body>
 </html>

Use Android SDK

Android SDK is used to develop native client-end applications for Android based devices. You can download the SDK and keep it in libs folder. Add the following script to gradle file at Root level:

allprojects {
     repositories {
         flatDir {
             dirs 'src/main/libs'
         }
     }
 }

Add the following script to gradle file at App level:

dependencies {
     compile(name:'vcxsdk-release', ext:'aar')
}

Use iOS SDK

iOS SDK is used to develop native client-end applications for iOS based devices. You can download the SDK here.

  • Install CocoaPods as described in CocoaPods Getting Started.
  • In Terminal, go to project directory and run pod init
  • To integrate EnxiOS into your Xcode project using CocoaPods, specify pod name EnxRTCiOS.
  • After adding all required library in PodFile go to terminal and run pod Install
  • Reopen your project in Xcode using the new .xcworkspace  file.

To use EnableXiOS SDK, add GoogleWebRTC and Socket.IO-Client-Swift(12.0.0) in your project with the following pod names:

'GoogleWebRTC', '~> 1.1.27564’
'Socket.IO-Client-Swift', '~> 12.0.0'

Use React Native SDK

The React Native SDK is used to build Hybrid Application for Android and iOS based devices.  Install using NPM and follow instructions given.

Choose Media Devices

You will need to have a microphone and camera access to create your audio and video stream respectively. Applications for mobile devices will request user’s permission to grant microphone and camera access during installation. However, PC and mobile browsers might need to request the user’s permission each time the application is started.

Getting Devices using Web SDK

To get a list of all connected Microphones and Cameras to the device, please use EnxRtc.getDevices() method. See the example below:

EnxRtc.getDevices( function( DeviceList ) {
     // DeviceList is JSON containing Mic, Cam list
 });

 // If you do console.log(DeviceList);, it would print the following:
 {
     "cam":[ 
         {
         "deviceId": "",
         "groupId": "",
         "label": "" ,
         "kind" : ""
         }
     ],
     "mic": [
         {
         "deviceId": "",
         "groupId": "", 
         "label": "" ,
         "kind" : ""
         }
     ] 
 } 

Using this JSON you may create UI Elements to choose one camera and one microphone. The UI Element must return the deviceId which will be used to start your local stream.

Connect to Room and Publish

The Client End Point needs to get a Token and connect to the Room. EnableX validates the Token before granting access to the Room. Once successfully connected to the Room, you may start your audio/video stream and publish the streams to the Room.

Connect & Publish using Web SDK

EnxRtc.joinRoom() method connects End-Point to the room, optionally initiates and publishes local stream. After successful publishing, it returns Local Stream handle to manage the published stream. It also returns all other remote streams available in the room for the participants to subscribe.

/* Configure your Stream */

var config = {
     audio: true, 
     video: true,
     videoSize: [640, 480, 640, 480],
     attributes : {  /* Define any custom data keys/value */
         name: "String",
         age: Number,
         emp_id: "String"
     },
     options: playerOptions
 };

 /* Join Room with Token and Publish Local Stream */

 localStream = EnxRtc.joinRoom(token, config, function (success, error) {
     if (error && error != null) {
         /* Handle Connection Error */     
     }     
     if (success && success != null) {         
          room = success.room;         
          /* Develop further - Subscribe Streams */
     }
 });

Note:

  • By setting audio, video or data to True or False, you are adding respective track into the stream you would publish to the room.
  • You may define Video Size you want to capture. This is dependent on the camera used to capture the video track.
  • You may use any custom key in attributes. Ref code snippet below to know how custom keys may be defined.
  • The option is to include video player attributes. You may need to define it as you need. refer Appendix.

Read more…

Connect & Publish using Android SDK

EnxRtc.joinRoom() method handles all complexities of connecting and joining the room.

JSONObject publishStreamInfo = {
         video: true,
         audio: true,
         data: true,
         attributes: { name: "XX" }
}

String token = "XXX";

EnxRtc enxRtc = new EnxRtc(
                  Current-Class-Context, 
                  EnxRoomOberver-Instance, 
                  EnxStreamObserver-Instance);


EnxStream localStream = enxRtc.joinRoom(token, publishStreamInfo);

public void onRoomConnected(EnxRoom room, JSONObject roomMetaData) {
   // Connected. 
   //Callback received with room object and Room Meta JSON
}

public void onRoomError(JSONObject roomError) {
   // Connection failed. Find error
}

Read more…

Connect & Publish using iOS SDK

EnxRtc.joinRoom() method handles all complexities of connecting and joining the room.

NSDictionary* publishStreamInfo = {
         video: true,
         audio: true,
         data: true,
         attributes: { name: "XX" }
}

NSString* token = "XXX";

EnxRtc *enxRtc = [[EnxRtc alloc] init];
EnxStream *localStream = [enxRtc joinRoom:token delegate:self publishStreamInfo:publishStreamInfo];

//Delegate methods
-(void)room:(EnxRoom *)room didConnect:(NSDictionary *)roomMetadata{
	// Connected. Delegate receives room instance and Room Meta JSON.
}

-(void)room:(EnxRoom *)room didError:(NSString *)reason{
	// Connection failed. Find error
}

Read more…

Connect & Publish using React Native SDK

Enx.joinRoom() method handles all complexities of connecting and joining the room.

<EnxRoom
          token={this.props.token}
          eventHandlers={this.roomEventHandlers}
          localInfo={this.state.publishStreamProp}
          roomInfo={this.state.enxRoomInfo}
          advanceOptionsInfo={this.state.advanceOptions}
> 

this.roomEventHandlers={
	roomConnected:event=> {
		// Connected. event receives Room Meta JSON
	},
	roomError:event=>{
		// Connection failed. Find error
	},
	userConnected:event=>{
		// A new user connected. user JSON has user information
	},
	activeTalkerList:event=>{
		// List of talkers in the Room
		// Received after room-connected
	}
}

Read more…

Subscribing 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.

Stream Subscription using Web SDK

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.

for (var i = 0; i < success.streams.length; i++){
     room.subscribe(success.streams[i]);
 }

 /* When the stream is subscribed */
 room.addEventListener("stream-subscribed", function(event) {
     console.log("Stream subscribed");
 }); 

Read more…

Stream Subscription using Android SDK

EnxRoom.subscribe() method may be used to subscribe individual streams available in the room. Use onSubscribedStream callback to handle stream further.

@Override
public void onStreamAdded(EnxStream stream) {
     room.subscribe(stream);
}

// Callback
public void onSubscribedStream(EnxStream stream) {}

Read more…

Stream Subscription using iOS SDK

When a new stream is added to the Room we receive a Stream Object through delegate method - room:didAddedStream. The receive the stream, you need to subscribe to it using EnxRoom.subscribe() method.

// There is a new stream you may subscribe
-(void)room:(EnxRoom *)room didAddedStream:(EnxStream *)stream{
	[room subscribe:stream]; // Subscribe to it.
}

- (void)room:(EnxRoom *)room didSubscribeStream:(EnxStream *)stream {
	// You subscribed to stream.
}

Read more…

Stream Subscription using React Native SDK

When a new stream is added to the Room a callback streamAdded is received with Stream Object. The receive the stream, you need to subscribe to it using Enx.subscribe() method.

// You are notified about new Stream in Room
streamAdded:event=>{	// Subscribe Stream
	Enx.subscribe(event.streamId,error=>{
		
	});
}

streamSubscribed :event=>{
    // Stream is subscribed 
}

Read more…

Play Stream

You can play a local stream and all subscribed remote streams including screen-share, canvas streams within Video Player.

Play Stream using Web SDK

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.

stream.play(DOM-ElementID, playerOptions);

Read more…

Play Stream using Android SDK

To show a video in a player, use EnxStream.attachRenderer() with an Object of EnxPlayerView.

EnxPlayerView remotePlayer = new EnxPlayerView( 
     getActivity(), 
     EnxPlayerView.ScalingType.SCALE_ASPECT_FIT, 
     false 
);

stream.attachRenderer(remotePlayer);

Read more…

Play Stream using iOS SDK

You can play a local stream, all subscribed remote streams including screen-share, canvas streams within EnxPlayerView Object. Therefore, you need to create an Object of EnxPlayerView Class and then attach the Stream to Player View.

EnxPlayerView *playerView = [[EnxPlayerView alloc] initWithFrame:frame]; 

[stream attachRenderer:PlayerView]; // Attach stream to playerview to play
[yourCustomView addSubview:PlayerView]; // Add playerView to your view

[stream detachRenderer]; // Detaching Renderer to stop playing

Read more…

Play Stream using React Native SDK

You can play a local stream, all subscribed remote streams including screen-share, canvas streams using the EnxStream and EnxPlayerView Tags.

var propertyDict = {
	textColor: #000000, 
	textSize: 12, 
	textStyle: 1, 
	text_background: 0
	}

var dict = {
	enable: true, 
	properties:propertyDict
	}

var overlayDict = { overlay: dict }

Enx.setConfigureOption(overlayDict, this.state.localStreamId); 
Enx.changePlayerScaleType(SCALE_ASPECT_FIT, this.state.localStreamId); 

<EnxStream 
	streamId={String(element.streamId)} 
	eventHandlers={this.streamEventHandlers}> 

<EnxPlayerView 
	streamId={String(element.streamId)} 
	eventHandlers={this.streamEventHandlers}> 

Read more…

Unpublish Stream

Unpublishing a published stream will remove the local stream from the Room. This will not release  device access, so subsequent re-publishing of the stream will not request for device access again

Unpublish using Web SDK

To unpublish, use EnxRoom.unpublish() method. Please use the callback to handle if stream is unpublished successfully. All users connected to the room will be notified that a Published Stream is unpublished or removed from the Room using the event named stream-removed

room.unpublish(localStream, function(result, error){
     if (result === undefined){
         // Failed 
     } else {
         // Unpublished
     }
 });

Read more…

Unpublish using Android SDK

To unpublish, use EnxRoom.unpublish() method. Please use the callback to handle if stream is unpublished successfully. All users connected to the room will be notified that a Published Stream is unpublished or removed from the Room using the callback named onRemoveStream 

room.unPublish();

public void onUnPublishedStream(EnxStream localStream) {}

Read more…

Unpublish using iOS SDK

To unpublish, use EnxRoom.unpublish() method. Please use the callback to handle if stream is unpublished successfully. All users connected to the room will be notified that a Published Stream is unpublished or removed from the Room using the delegate method named – room:didRemovedStream:

[room unpublish]; // To unpublish all Local Streams

-(void)room:(EnxRoom *)room didRemovedStream:(EnxStream *)stream{
     // To tell others that stream is taken off the Room
}

Read more…


Explore Developer Guide