The module exposes a set of real-time communication capabilities in the form of an Angular service and a number of Angular directives and controllers. This module is built on the rtcomm.js open source JavaScript library which wraps WebRTC with call signaling and adds a number of advanced real-time communications capabilities like presence and chat.

Since this is a module based on AngularJS, we strongly recommend taking a look into AngularJS for more information. This page showcases various directives (similar to widgets) provided by this module.

Requirements

This module relies on MQTT for call signaling. MQTT is a light-weight, pub/sub, messaging protocol. The module works with any standard MQTT broker that supports MQTT protocol version 3.1 and higher. Some of the directives in this module require the new WebSphere Liberty Rtcomm feature which is free for development and small deployments. These directives will be pointed out in the documentation below.

Certain directives on this page (such as video) will only work on browsers that support WebRTC (e.g. Chrome and Firefox).

Developer Options

  1. Run demo from this page: Get started

  2. Create a NodeJS sandbox: Learn how to get started here

  3. Add advanced features with WebSphere Liberty: Go here to add Rtcomm features like call queues, media processing and a gateway for SIP federation.

To use all the directives on this page you must either register a unique ID or login using your Google account. To test these directives you will need to ask a friend to register as well or open an incognito window and register a second unique ID there.




Directives are disabled!

Directives are enabled!



Start a video and audio conversation using the rtcomm-video directive. Have a friend enter the website and register with a name, place a call to them using the name they registered with in the input field above.

This directive uses two video streams one for the remote user and one for the local user. If a call is in session, the video streams will use this directive to display the video feeds of both users. Basically, one would add the directive to the page and after that initiate a call using the RtcommService as shown in the example below. Another way to establish a video call is by using the rtcomm-presence directive .



  <div ng-controller="RtcommVideoDemoCtrl">

    <div class="well">

      <rtcomm-video></rtcomm-video>

    </div>

    <input type="text" ng-model="demoCallerID" class="form-control" placeholder="Enter the name of someone to call, ex. john_smith"/>

    <br/>

    <button type="button" ng-click="placeCall()" class="btn btn-primary">Place a Call</button>

    <button type="button" ng-click="stopCall()" class="btn">Stop Call</button>

  </div>

            

  rtcommPageApp.controller('RtcommVideoDemoCtrl', function($scope, RtcommService){

    /* Data model for the caller name */
    $scope.demoCallerID = "";

    /* Place a call to another user */
    $scope.placeCall = function(){

      /* Use the RtcommService to place a call to a user, enable video and audio using 'webrtc'*/
      RtcommService.placeCall($scope.demoCallerID, ['webrtc']);

    }

    /* Stop the active call */
    $scope.stopCall = function(){

      /* Get the active endpoint in the session */
      var activeEndpointUUID = RtcommService.getActiveEndpoint();
      var activeEndpoint = RtcommService.getEndpoint(activeEndpointUUID);

      /* Disconnect the endpoint from the session */
      activeEndpoint.disconnect();

    }
  });


            


This chat directive demo, allows you to start a chat session with another person who is currently accessing the webpage. Input their registered name in the field above and start the chat session.

Rtcomm-chat allows users to initiate real time chat conversations with another user. One can initiate the chat session using the RtcommService as shown in the code below or through the rtcomm-presence directive and enabling the chat option. This allows users to start chat sessions with other users in the same topic.

CSS - Customize Color and Size

The color and size of this directive can be changed by modifying the attributes related to it found in the angular-rtcomm.css file:

  • .chat - Overall chat directive element
  • .chat li - List element containing the chat message (timestamp, name, message)
  • .chat li .chat -body p - Can be used to set the color of the messages in the chat


<div ng-controller="RtcommChatDemoCtrl">

	<rtcomm-chat></rtcomm-chat>

	<div class="text-center">

		<input type="text" ng-model="demoCallerID" class="form-control" placeholder="Enter the name of someone to chat with, ex. john_smith" />
		<br/>

		<button type="button" class="btn btn-primary" ng-click="startChat()">
			Start Chat
		</button>

		<button type="button" class="btn" ng-click="stopChat()">
			Stop Chat
		</button>

	</div>

</div>
						

rtcommPageApp.controller('RtcommChatDemoCtrl', function($scope, RtcommService){

	/* Data model for the caller name */
	$scope.demoCallerID = "";

	/* Start a chat session */
	$scope.startChat = function(){

		/* Place a call as a chat session to the user */
		RtcommService.placeCall($scope.demoCallerID, ['chat']);
	}

	/* Disconnect the user from the session */
	$scope.stopChat = function(){

		/* Get the active endpoint in the session */
		var activeEndpointUUID =  RtcommService.getActiveEndpoint();

		var activeEndpoint = RtcommService.getEndpoint(activeEndpointUUID);

		/* Disconnect the endpoint from the session */
		activeEndpoint.disconnect();
	}
})

						

Directive used to register an endpoint. Registration implies creation of a user record as a retained message on the configured presence topic which can be accessed by any endpoint or service that has permissions to subscribe on the registration topic. If the user name is specified in advance, for example via a cookie, the userid can be specified when initializing the RtcommService.




<rtcomm-register></rtcomm-register>


				

The rtcomm endpoint status directive displays the status of the client's current active endpoint. The status is displayed as a message on the directive element itself and it is based on the events and status of a session initiated by the active endpoint.

Messages will vary according the following statuses:


Event Description Message
session:started Endpoint has been successfully connected to another endpoint "Connected to {endpointID}"
session:stopped Endpoint's session has stopped. "No active sessions, waiting ..."
session:alerting An inbound connection is being requested. "Inbound call from {endpointID}"
session:trying Endpoint is attempting to initiate a session "Attempting to call {endpointID}"
session:ringing Peer has been reached, but has not accepted the connection. "Call to {endpointID} is ringing"
session:queued Queue has been contacted, waiting for a response. "Waiting in queue at: {queuePositionNumber}"
session:failed A failure occurred while establishing the session. "Call failed with reason: {failureReason}"



				<rtcomm-endpoint-status></rtcomm-endpoint-status>


			

Above is the rtcomm-presence directive in action. Once you register on the page, it displays a list of all the users currently registered on the page. Through this directive one can also initiate video and/or chat sessions by clicking on the video-camera icon () next to the user's name on the list.

The directive can be configured in various ways:

  • monitorTopics - arr[string] | Array of topics to monitor for presence, this will list the users registered (subscribed) on each topic declared.
  • chat - boolean | If set to true, it will enable chat sessions to be initiated through rtcomm-presence.
  • webrtc - boolean | If set to true, it will enable webrtc sessions (video and audio) to be initiated through the rtcommPresence.
  • flatten - boolean | If set to true, all the users in the in the topic and subtopics will be displayed all in a list. When false it will display a hierarchy of the users organized by subtopics they are subscribed to, this is similar to that of a file system structure.

In this code sample we are enabling chat and webtc (video and audio) sessions to be initiated through the directive. Since flatten is set to true the directive will display a flat list of all the users registered on the page. Finally we set the topic that the directive should monitor to 'page'



<!--  Panel for decoration -->
<div class="panel panel-default">
	<div class="panel-body">
		<!--  Monitor topic 'page', enable chat & webrtc -->
		<rtcomm-presence  ng-init="monitorTopics=['page']; init({'chat': true, 'webrtc': true, 'flatten': true});"></rtcomm-presence>
	</div>
</div>





Note: You'll be making a call to someone who's in the queue


Join the queue! When a user places a call on the queue a session will be initiated between the person in front of the queue and the user who initiated it.

As shown in the code below, the directive can be initialized with these parameters:

ng-init="init( {autoJoin}, {publishPresence}, {queueName})"


  • autoJoin - If true the user will autojoin the queue once registered.

  • publishPresence - If true the queue in which the user joins will appear on the presence directive

  • queueName - The name of the queue that the user will join



<div ng-controller="RtcommQueuesDemoCtrl">

	<!-- Auto join set to false, it will publish your queue to the presence and actions on this queue will be done on the "Landing Page Queue" -->
	<rtcomm-queues ng-init="init(false,true,['Landing Page Queue'])"></rtcomm-queues>

	<br/>

	<button type="button"  ng-click="startVideoSession()"  class="btn btn-primary">
		Start a Video Call
	</button>

	<button type="button" ng-click="startChatSession()" class="btn btn-success">
		Start a Chat Session
	</button>

</div>

				


rtcommPageApp.controller('RtcommQueuesDemoCtrl', function($scope, RtcommService){

	/* Name of the queue to place the call on */
	var queueName = "Landing Page Queue";

	$scope.startVideoSession = function(){

		/* Place a webrtc call on the queue */
		RtcommService.placeCall(queueName, 'webrtc');
	}

	$scope.startChatSession = function(){

		/* Place a chat session request on the queue */
		RtcommService.placeCall(queueName, 'chat');
	}

});

				
			

<server>

    <!-- Enable features -->
    <featureManager>
        <feature>rtcomm-1.0</feature>
        <feature>servlet-3.1</feature>
    </featureManager>

    <httpEndpoint id="defaultHttpEndpoint"
                  httpPort="9080"
                  httpsPort="9443" />


    <!-- Setup the rtcomm options for the Liberty Server profile and replace the rtcommTopicPath({{REPLACE_WITH_UNIQUE_TOPIC_PATH}}) -->
	<rtcomm messageServerHost="{{REPLACE_WITH_MQTT_HOSTNAME}}" messageServerPort="{{PORT}}" rtcommTopicPath="{{REPLACE_WITH_UNIQUE_TOPIC_PATH}}" sharedSubscriptionPath="$SharedSubscription{{REPLACE_WITH_UNIQUE_TOPIC_PATH}}">

		<iceServerURL>stun:stun.l.google.com:19302</iceServerURL>
		<iceServerURL>stun:stun1.l.google.com:19302</iceServerURL>
		<iceServerURL>stun:stun2.l.google.com:19302</iceServerURL>

		<!--  Establish Queue  -->
		<callQueue description="Landing Page Queue" callQueueID="Landing Page Queue"/>

	</rtcomm>

</server>

The easiest way to get started is by hacking on a sample app:

Requirements

Download the sample

Clone the sample.angular-rtcomm repository with the following command:

git clone https://github.com/WASdev/sample.angular-rtcomm.git

Install Dependencies

Enter the sample project's directory and install the dependencies for the sample.

It will automatically install bower and mosca, among other project depencies:

cd sample.angular-rtcomm
npm install

Run The App

Use the following command to start the web application

npm start

Access the webapp at http://localhost:3000.

Open multiple browser tabs, register and start video chatting!

For more information access the project's repository here.

With WebSphere Liberty integrated into your Rtcomm developer sandbox you can enable many advanced features including:

  • Rtcomm Gateway to SIP: A SIP gateway makes it possible to federate with the PSTN using SIP trunking. It also allows for the development of reach signaling applications using SIP Servlets.
  • Call Queues: The WebSphere Liberty Rtcomm feature can be used to provision call queues for the development of simple helpdesk type applications.
  • Rich Media Processing: WebSphere Liberty supports a media server control interface for enabling a number of advanced media processing features such as audio mixing, continuous presence video, record/playback and transcoding of media.
  • Rtcomm Registry: Rtcomm supports a registry that enables call routing using only contact IDs.

  1. Download and Install the Liberty runtime:


  2. Install the rtcomm-1.0 feature to enable the registry and call queues:



    Using the installUtility (located in the wlp/bin folder) run the command:

    bin/installUtility install rtcomm-1.0



    Using Eclipse WDT Tools add the feature to your runtime environment

    Picture what search in order to install the 'rtcomm-1.0' feature in Websphere Liberty

  3. Install the rtcommGateway-1.0 feature to enable gatewaying to SIP, the SIP Servlet programming model and server-side media processing:



    Using the installUtility (located in the wlp/bin folder) run the command:

    bin/installUtility install rtcommGateway-1.0



    Using Eclipse WDT Tools add the feature to your runtime environment

    Picture what search in order to install the 'rtcommGateway-1.0' feature in Websphere Liberty



  4. To learn more about the Rtcomm Gateway go here.

    To learn more about Rtcomm and Liberty go here.

    For more help on configuring the rtcomm-1.0 feature or other Real-Time-Communication capabilities with Liberty go here.

Sample Rtcomm Healthcare

This sample demonstrates using the WASdev/lib.rtcomm.clientjs and WASdev/lib.angular-rtcomm projects to add real-time communications to a Healthcare website.


Sample Rtcomm Helpdesk

It demonstrates how the lib.rtcomm.clientjs JavaScript library can be used to build an application that supports the creation of real-time audio/video/chat sessions between a customer and an agent. It includes support for call queuing allowing multiple agents to listen on one or more queues for inbound calls from customers of a web site.