Advance Features Web Toolkit covers API capabilities to build feature-rich End-Point Applications. as Moderator Controls.

Table of Contents

Switch Source Media Devices of Published Stream

A user may want to switch to alternate Media Devices for his published stream. EnableX API allows Media Device switching on the fly.

The APIs allows you to switch between Rear and Front Camera and to alternate available Microphone.

Switch between Rear & Front Camera

If user looks to switch between Rear and Front Camera as a source for published Stream, use Enx.switchCamera() method.

Method: Enx.switchCamera(localStreamId)

Parameters: localStreamId – String, Local Stream Id whose source camera is being switched

Enx.switchCamera(localStreamId);

Switch to alternate Microphone

If user looks to switch Micrcophone used to create published Stream to an alternate Microphone, use Enx.switchMediaDevice() method. This API requires new device name to switch to. You can use Enx.getDevices() method to fetch a list of microphone names and create a UI for new device selection.

Method: Enx.switchMediaDevice(micDevice)

Parameters: micDevice – String, New Microphone Device name

Callback: notifyDeviceUpdate – When Audio Device Update is complete. Returns with switched Microphone Device

Enx.switchMediaDevice( micDevice ); // To switch to new micDev

// To self: Device updated
notifyDeviceUpdate : event =>{
	// event = micDevice name
} 

Use Stream Advance Options

You can use Advance Options on your local Stream to get notified on various events affecting your Streaming process.

Method: Enx.setAdvancedOptions(AdvanceOptions) – To set advance options

Parameter:

  • AdvanceOptions – Array of Options that you can set on your Local Stream:
    • battery_updates – Boolean. Set as true to receive battery updates/information
    • notify_video_resolution_change – Boolean. Set as true to receive Video Resolution Change Information

Callback: advancedOptionsUpdate – To notify advance options on local stream has been updated

advanceOptions: {
	battery_updates: true,
	notify_video_resolution_change: true
} 

Enx.setAdvancedOptions(advanceOptions)

// Advance Options are updated
advancedOptionsUpdate: event => {
	/* event = 
	[ 
		{	"id":"battery_updates",
			"enable":true
		}, 
		{	"id":"notify-video-resolution-change",
			"enable":true
		} 
	]  */
}

Method: Enx.getAdvancedOptions() – To get advance options

Enx.getAdvancedOptions()

// Advance Options are updated
getAdvancedOptions: event => {
	/* event = 
	[ 
		{	"id":"battery_updates",
			"enable":true
		}, 
		{	"id":"notify-video-resolution-change",
			"enable":true
		} 
	]  */
}

Mute / Unmute Audio in a Stream

Use Enx.muteSelfAudio() method to mute and unmute audio from Local Stream. When a user mutes or unmutes audio from own Published Stream, all other connected users of the room are notified with remoteStreamAudioMute and  remoteStreamAudioUnmute callbacks respectively. Listen to these events to update related UI elements.

Methods: Enx.muteSelfAudio( localStreamId, muteState )

Parameters:

  • localStreamId – String, Local Stream Id which is to be muted or unmuted
  • muteState – Boolean, Pass to true to mute, false to unmute

Callbacks:

  • remoteStreamAudioMute – To all participants notifying user has muted audio
  • remoteStreamAudioUnmute – To all participants notifying user has unmuted audio
  • audioEvent – To self that audio is either muted or unmuted
Enx.muteSelfAudio(localStreamId, true);   //To mute audio
Enx.muteSelfAudio(localStreamId,false);   //To unMute audio

// To all participant - user muted audio 
remoteStreamAudioMute:event=>{
	// event = { "result":0, "clientId":"XXX", "msg":"user muted audio" } 
}

// To all participant - user unmuted audio
remoteStreamAudioUnMute:event=>{
	// event = { "result":0, "clientId":"XXX", "msg":"user unmuted audio" } 
}

// To self - Audio muted / unmuted
audioEvent:event=>{
	// event = { "msg":"Audio Off", "result":0 } 
	// event = { "msg":"Audio On", "result":0 } 
}

Mute / Unmute Video in a Stream

Use Enx.muteSelfVideo() method to mute and unmute video from Local Stream. When a user mutes or unmutes audio from own Published Stream, all other connected users of the room are notified with remoteStreamVideoMute and remoteStreamVideoUnMute callbacks respectively. Listen to these events to update related UI elements.

Class: EnxStream

Methods: Enx.muteSelfVideo( localStreamId, muteState )

Parameters:

  • localStreamId – String, Local Stream Id whose video is to be muted or unmuted
  • muteState – Boolean, Pass to true to mute, false to unmute

Callbacks:

  • remoteStreamVideoMute – To all participants notifying user has muted video
  • remoteStreamVideoUnMute – To all participants notifying user has unmuted video
  • videoEvent – To self that video is either muted or unmuted
Enx.muteSelfVideo(localStreamId, true);   //To mute video
Enx.muteSelfVideo(localStreamId,false);   //To unMute video

// To all participant - user muted video 
remoteStreamVideoMute:event=>{
	// event = { "result":0, "clientId":"XXX", "msg":"user muted video" } 
}

// To all participant - user unmuted video
remoteStreamVideoUnMute:event=>{
	// event = { "result":0, "clientId":"XXX", "msg":"user unmuted video" } 
}

// To self - Video muted / unmuted
videoEvent:event=>{
	// event = { "msg":"Video Off", "result":0 } 
	// event = { "msg":"Video On", "result":0 } 
}

Send Chat Data

INFO! EnableX Android Toolkit 1.4.2 support an advance version of Public & Private Messaging API. Therefore, you are discouraged to use this Stream based Messaging. It will be deprecated in future version.

You may implement basic text-chat communication using EnableX API. The Text-Data is carried on a separate data track in a published Stream and received by all subscribers of the stream.

  • Notes to send message:
    • You must initiate your stream with data track enabled using the JSON Payload as {data: true}
    • You must publish your stream into the room before you can use the Enx.sendData() method.
  • Notes to receive message:
    • You must subscribe to the remote stream
    • User Observer receiveData to receive any incoming message.

Method: Enx.sendData(localStreamId, messageObject)

Parameter:

  • localStreamId – Local Stream ID on which the message to be sent
  • messageObject– This object has following keys:
    • from: Sender Name
    • message: Message Body
    • timestamp: Time Stamp in UTC – when the message was originated

Callback: receiveData – To all participants in the room with messageObject

messageJSON: {
        message: "Test chat",
        from: "React-Native",
        timestamp: Date.now()
}


Enx.sendData(localStreamId, messageJSON);  // Send message

// Participants receive message
receiveData : event=>{
	/* event = 
	{	id : 12345, 
		msg : {
			from: "", message: "", 
			timestamp: 12345, type: "public"
		}
	} */
}

Public, Private & Group Messaging

This is an advance messaging feature between Session participants. You can do following type of messaging in a session among participants:

  • Public Messaging: To send message to all connected users.
  • Private Messaging: To send message to a specific user.
  • Group Messaging: To send message to more than one specified users.

Messaging feature neither require the sender to publish his Stream, nor receivers to subscribe.

MethodEnx.sendMessage(message, isBroadcast, clientIds)

Parameters:

  • message – String. type message.
  • IsBroadcast – Boolean. Use true for Public Broadcast, Use false for private messaging to one or more recipients.
  • clientIDs – Array of ClientIDs whom you wish to send private messages.

Callbacks: 

  • receiveChatDataAtRoom – Receives message in JSONObject
  • acknowledgeSendData – Sender is acknowledged
Enx.sendMessage(message, true, null); // Public Messaging
Enx.sendMessage(message, false, [ClientID]); // Private/Group Messaging

 
// Users Receive Message through Callback 
receiveChatDataAtRoom: event => {
      // event = 
      // { "source_id":"XXX", "type":"chat", "msg":"hello"} 
}  

// Sender is acknowledged  
acknowledgeSendData: event => {
     
}  

Use Custom Signaling

Your Application might require to send instructions, data to one or more recipient connected in a Session to deploy new features, business workflow. For example, you wan to create a Polling mechanism among participants. EnableX supports Custom Signaling method through which you can build such utility that requires passing of messages among participants.

Using Custom Signaling Method, you might send message to all or selected participants in a Room. You can define your custom data structure to pass to meet your business requirement.

MethodEnx.sendUserData(message, isBroadcast, clientIds)

Parameters:

  • message – String. type message.
  • IsBroadcast – Boolean. Use true for Public Broadcast, Use false for private messaging to one or more recipients.
  • clientIDs – Array of ClientIDs whom you wish to send private messages.

Callbacks:

  • receiveChatDataAtRoom – Receives message in JSONObject
  • acknowledgeSendData – Sender is acknowledged
Enx.sendUserData(message, true, null); // Send to all
Enx.sendUserData(message, false, [ClientID]); // Send to few clients

 
// Users Receive  through Callback 
receiveChatDataAtRoom: event => {
      // event = 
      // { "source_id":"XXX", "type":"chat", "msg":"hello"} 
}  

// Sender is acknowledged  
acknowledgeSendData: event => {
     
}  

Receive & Play Shared Screen

When a user starts or stops Screen Share, all connected users of the room are notified with screenShareStarted and screenShareStopped callbacks. As Screen-Share is also a Stream, you can play it using a Video Player. Screen Share is carried on Stream ID# 101. Client End Point must subscribe to this Stream ID to receive and play it locally.

Callbacks:

  • screenShareStarted – To know that a Screen Share has started
  • screenShareStarted – To know that a Screen Share has stopped
// You are notified that Screen Share has started
screenShareStarted : event=>{   
	/* event = 
	{	clientId : "xxx", name : "XXX", 
		result : 0, streamId : 101
	}
	*/
	// Handle UI to play Screen Share
}

// You are notified that Screen Share has stopped
screenShareStopped: event=>{ 
	/* event = 
	{	clientId : "xxx", name : "XXX", 
		result : 0, streamId : 101
	}
	*/
	// Handle UI to stop playing Screen Share
}

Receive & Play Canvas Streams

An Client End Point Application developed using Android Toolkit can’t initiate HTML5 Canvas Streaming. However, it can receive Canvas Streaming initiated by other Client End Point Application developed using Web Toolkit that runs on Web Browsers.

When a user starts or stops HTML5 Canvas Streaming, all connected users of the room are notified with canvasStarted  and  canvasStopped. As its a Stream, you can play it using a Video Player. Note that Canvas Stream is carried on Stream ID# 102. Client End Point must subscribe to this Stream ID to receive and play it locally.

Observers:

  • canvasStarted – To know that Canvas Streaming has started
  • canvasStopped – To know that Canvas Streaming has stopped
// You are notified that Canvas Streaming has started
canvasStarted : event=>{   
	/* event = 
	{	clientId : "xxx", name : "XXX", 
		result : 0, streamId : 102
	}
	*/
	// Handle UI to play Canvas Streaming
}

// You are notified that Canvas Streaming has stopped
canvasStopped: event=>{ 
	/* event = 
	{	clientId : "xxx", name : "XXX", 
		result : 0, streamId : 102
	}
	*/
	// Handle UI to stop playing Canvas Streaming
}

Take Image Snapshot from Video Stream

To take snapshot of a video stream in your application use the Enx.captureScreenShot() method. The image from the video stream will be captured as raw bitmap and returned as base64 string data in the callback.

Method: Enx.captureScreenShot(streamId)

Parameter: streamId – String. ID of Stream from which Snapshot to be taken

Callback: capturedView – Receives base64 encoded String for the capatured raw bitmap

Enx.captureScreenShot(localStreamId);

capturedView: event => {
	this.setState({
		base64Icon: event
	});
}

// To show captured snapshot
<Image 
	style={{ width: 50, height: 50 }}
	source={{ uri: `data:image/png;b ase64,${this.state.base64Icon}`}}
/> 

Change to Audio only call

If you want change to a audio-only call, i.e. you neither want to receive anyone’s video not want to publish your video; you may use Enx.changeToAudioOnly() method. This method acts as a toggle to switch between audio-only and audio-video call.

This opt-in is only for the specific End-Point and doesn’t affect others in the room.

Method: Enx.changeToAudioOnly( audioOnlyState )

Parameter: audioOnlyState – Boolean. Pass true to switch to Audio Only call, pass false to switch back to audio-video call.

Enx.changeToAudioOnly(true);   // Switched to Audio-Only call
Enx.changeToAudioOnly(false);  // Switched back to Audio-Video call

Receive Streaming Stats

For Streaming Quality analysis, you may opt to receive Streaming Stats and get them displayed on respective Player. Once opted, you will receive Stats for all Streams received at the end point. You will receive following important information on Streams:

  • Publishing Resolution
  • Bandwidth at Publisher End
  • Receiving Resolution
  • Receiving Bandwidth consumed
  • Available Bandwidth at Receiver
  • … there are more

Methods:

  • Enx.enableStats( isEnabled) – To opt to receive Streaming Stats.
    • isEnabled – Boolean Parameter. Pass true to enable, false to disable
  • Enx.enablePlayerStats(isEnabled, streamId) – To opt to display received Streaming Stats on respective Player.
    • isEnabled – Boolean Parameter. Pass true to display, false to hide display of Stats on respective Stream Player
    • streamId – String. The stream ID for which Stats to be displayed on Player

Callbacks:

  • acknowledgeStats – To notify end-point that Stream Stats is enabled or disabled
  • receivedStats – When received updated Stats of all Streams
  • playerStats – When received updated Stats of a Stream

Handle Application Switch from Foreground to Background

User may switch to different application pushing your RTC Application to Background and vice versa. You need to handle such activity using Enx.onPause() and Enx.onResume() methods.

Method:Enx.onPause(localMuteState, remoteMuteState)

Parameters:

  • localMuteState – Boolean. Pass false to pause local Video Stream, true to continue with publishing
  • remoteMuteState – Boolean. Pass false to pause receiving remote Video Stream, true to continue receiving

Method: Enx.onResume(localUnmuteState, remoteUnmuteState)

  • localUnmuteState – Boolean. Pass true to resume sending local Video Stream if it was stopped while getting to Background.
  • remoteUnmuteState – Boolean. Pass true to resume receiving remote Video Streams if they stopped while getting to Background.

// When application goes to Background 
this.setState({localMuteState : false});
this.setState({remoteMuteState : false}); 
Enx.onPause( localMuteState, remoteMuteState );   

// When application comes back to Foreground 
this.setState({localUnmuteState : true});
this.setState({remoteUnmuteState : true});  
Enx.onResume( localUnmuteState, remoteUnmuteState);  

Share Log with EnableX to audit

To share Console Log with EnableX Tech Team for auditing purpose, use Enx.postClientLogs() . The method sends latest 200KB of Console Log to EnableX.

Method: Enx.postClientLogs()

Callback: logsUploaded – When logs get posted to EnableX

Before you can share Console Log, you need to enable Console logging.

Method: enableLogs(loggingState)

Parameter: loggingState – Boolean. Pass true to enable, false to disable logging

Enx.enableLogs(true); // Enable Logging
Enx.postClientLogs(); // Post Log to EnableX

logsUploaded : event =>{
 // Logs uploaded
 // event = { msg:'success', result:0 } 
}

Explore Android Toolkit