XIRSYS 1-to-1 Video Sample

Follow

This tutorial will show you how to set up a simple one-to-one audio/video chat using a basic HTML page and XirSys with its WebRTC capabilities.

Difficulty: Beginner

Requirements:

  1. Website with root access,  
  2. Text Editor e.g. Notepad++ or Sublime Text 2
  3. XirSys Account

Before we begin, if you are having trouble piecing this code in your webpage or suspect you will have trouble please copy/paste the completed version at the bottom of this article into your page then come back and read this article for a complete understandingLet’s begin at the top by laying out our HTML markup:

<!DOCTYPE html>
<html>
   <head></head>
   <body>
    <section id="login" class="panel" style="height:240px;text-align:center" >       
     <div>
       <input id="username" type="text"><br>
      <div class="btn-group">
         <button id="enter" class="btn">Enter</button>
      </div>
     </div>
    </section>
    <section id="videos" class="panel" class="login panel" style="visibility:hidden" >  
     <div>
      <video id="vid1"></video>
      <label id="vid2">Waiting...</label>
    </div>
   </section>
   </body>
</html>

We will then add the necessary scripts references which include the XirSys SDK, JQuery and GSAP's TweenMAX library.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script>
<!--XIRSYS SDK-->
<script src="./js/xirsys/xRtc/Common.js"></script>
<script src="./js/xirsys/xRtc/Class.js"></script>
<script src="./js/xirsys/xRtc/CommonError.js"></script>
<script src="./js/xirsys/xRtc/Logger.js"></script>
<script src="./js/xirsys/xRtc/EventDispatcher.js"></script>
<script src="./js/xirsys/xRtc/Ajax.js"></script>
<script src="./js/xirsys/xRtc/ServerConnector.js"></script>
<script src="./js/xirsys/xRtc/AuthManager.js"></script>
<script src="./js/xirsys/xRtc/DataChannel.js"></script>
<script src="./js/xirsys/xRtc/HandshakeController.js"></script>
<script src="./js/xirsys/xRtc/UserMedia.js"></script>
<script src="./js/xirsys/xRtc/Connection.js"></script>
<script src="./js/xirsys/xRtc/Stream.js"></script>
<script src="./js/xirsys/xRtc/Room.js"></script>

The next step is to set up getToken.php and getIce.php, which are needed to create a unique connection to point to our service.  For more information you can reference the Quick Start Guide while logged into your XirSys account (https://manage.xirsys.com/downloads/getting_started.pdf). Here are a few screenshots of what the .php files will look like:



Now lets do some scripting! Within the ready listener, set the paths to the required getToken.php and getIceServers.php configuration files:

<script>
(function ready(){
   xRtc.AuthManager.settings.tokenHandler = "./getToken.php";
   xRtc.AuthManager.settings.iceHandler = "./getIceServers.php";
   //Let's add a click listener for our enter button, which will kick the app off
   $("#enter").click(function(e) {
    e.preventDefault();
    enterRoom();
   });
   //Enter Room Function Goes Here!
})();
</script>

To enter / open a Room, the three XIRSYS objects must be created are:

  1. ServerConnector instance
  2. AuthManager instance
  3. Room instance

For the next step we must instantiate three XirSys objects by setting event handlers for each and also calling the enter method to enter the room. Do this by adding the following code in your <script> tag under your document.ready function.

function enterRoom(){
   // create XirSys objects needed to initialize a room
   xServerConnector = new xRtc.ServerConnector();
   xAuthManager = new xRtc.AuthManager();
   xRoom = new xRtc.Room(roomInfo, xAuthManager, xServerConnector);
   // create event handlers for each XirSys object
   addEventHandler( xAuthManager, xRtc.AuthManager.events, xRtcAuthManagerHandler );
   addEventHandler( xServerConnector, xRtc.ServerConnector.events, xRtcServerConnectorHandler );
   addEventHandler( xRoom, xRtc.Room.events, xRtcRoomHandler );
   // enter / open room
   xRoom.enter( xUserName =  $("#username").val(), { autoReply: false });
   // Enable local mic and cam under this comment
}

Since this is a 1-to-1 video sample, we will enable the local camera and microphone within the enterRoom method as well. The following code will be added into the enterRoom function under the comment: Enable local mic and cam under this comment.

addEventHandler( xRoom, xRtc.Room.events, xRtcRoomHandler );

// enter / open room
xRoom.enter( xUserName =  $("#username").val(), { autoReply: false });
// set local camera and microphone xRtc.getUserMedia( {video:true,audio:true}, xRtcMediaSucessHandler, xRtcMediaFailHandler);

Upon entering the Room, we transition from the login section to the 1-to-1 video section. When the first remote participant is connected, the connectContact method is called and attempts to establish a connection between users, that is where the following function comes into play; also note the following code will be pasted under the enterRoom function within your script tag:

 

 

function xRtcRoomHandler (event){
   switch(event.type){
      case 'enter':
         TweenMax.to($("#login"), 2, {css:{autoAlpha:0}});//clean up
         TweenMax.to($("#videos"), 2, {css:{autoAlpha:1}});//clean up
         $("#vid2").text("Waiting");
      break;
      case 'participantconnected':
         (this.calling==false) ? connectContact(xRoom.getParticipants()) :  $("#vid2").text("Busy");
      break;
   }
}

function connectContact(participants) {
   var contact = getContacts(participants)[0];
   if( contact && (calling == false) )
   {
      calling = true;
      //attempt connection to remote user/contact
      xRoom.connect(contact, {});
   }else{
      console.log("No Avaliable Users.");
   }
}

Further, upon receiving the "incomingconnection" event, we set the connection to automatically be accepted by the remote participant. By automatically accepting the remote / incoming connection, a connection is created and the "connectioncreated" event is dispatched, that is where the following function comes into play; also note the following code will be pasted under the connectContact function within your script tag:

function xRtcRoomHandler (event){
   switch(event.type){
      case 'enter'
         TweenMax.to($("#login"), 2, {css:{autoAlpha:0}});//clean up
         TweenMax.to($("#videos"), 2, {css:{autoAlpha:1}});//clean up
         $("#vid2").text("Waiting");
      break;
      case 'participantconnected':
         (this.calling==false) ? connectContact(xRoom.getParticipants()) :  $("#vid2").text("Busy");
      break;
      case 'incomingconnection':
         //auto-accept connection
         var incomingConnectionData = event.data[0]
         incomingConnectionData.accept();
      break;
      case 'connectioncreated':
         setConnection(event.data[0]);
      break;
      }
}

In this next piece of code the setConnection method calls the "connectioncreated" Room event, which sets the XIRSYS Connection object and set an event handlers to listen to connection status amongst user's sharing a Connection:

case 'connectioncreated':

setConnection(event.data[0]);

break;

function setConnection(connectionData) {
   xConnection = connectionData.connection;
   addEventHandler( xConnection, xRtc.Connection.events, xRtcConnectionHandler );
   if (xLocalStream)
   xConnection.addStream(xLocalStream);

}

Next, while listening to the events dispatched by the XIRSYS Connection object, we can replace the status, the label element we're using with a video element, and be subscribed to any remote stream(s):

function xRtcConnectionHandler(event){
	switch(event.type)
	{
		case 'remotestreamadded':
		//replace label with video element
		$("#vid2").replaceWith('<video id="vid2" style=visibility:hidden></video>');
		addVideo(event.data[0]);
		break;
		case 'connectionestablished':
		TweenMax.to($("#vid2"), 2, {css:{autoAlpha:1}})
		break;
	}
}

Below is the complete code which includes a couple helper methods, one of which is used for setting event handlers and the other assigning the media streams to the correct video elements:

Here is a screenshot of what the finished chat application will look like: 

 

When the page is completely set up you will have a login page to connect to, and once a username is entered you will connect your camera and microphone to the video object. Depending on whether you are the first person to connect you will either see the other user’s video or a “Waiting” message.

Let us know if you need any further assistance and your overall experience with this post and XirSys.

Have more questions? Submit a request

Comments

Powered by Zendesk