Home / Get Started / Setup Client End Point

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

Table of Contents

Using the Client Toolkit

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 Toolkit to develop End Point Applications, These are:

  • Web Toolkit
  • Android Toolkit
  • iOS Toolkit
  • React Native Toolkit

Use Web Toolkit

Web Toolkit is used to develop applications on Client End Points which will run on supported browsers. The Toolkit consists of 2 files, viz. EnxRtc.js (A minified JS library) and EnxRtc.js.map (Associated .map file). You can download the toolkit, 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 Toolkit -->
     <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 Toolkit

Android Toolkit is used to develop native client-end applications for Android based devices. You can download the toolkit 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 Toolkit

iOS Toolkit is used to develop native client-end applications for iOS based devices. You can download the toolkit 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 Toolkit

The React Native Toolkit 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 Toolkit

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 Toolkit

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",
         aget: 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 vide 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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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 Toolkit

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

var propertyDict = {
	textColor: -10053376, 
	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 Toolkit

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 Toolkit

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 iOSToolkit

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