Learn Skype Web SDK Day 20 : Starting a New Audio Conversation

Starting an audio call using Skype for Web API is very similar to starting an Instant Message conversation. The actual setup of the conversation and adding participants is identical – in fact the only real difference is that instead of starting the Chat Service, we start the Audio Service.

Conversations are started, stopped and managed from the conversationManager, which is a member of the top-level parent Application. Creating a new conversation with Skype for Web API is actually a lot easier than you might think. It consists of 4 distinct steps: create the conversation, add participants, register the new conversation, start the conversation.

In order to make audio calls, you need to make sure the Plugin is installed.

Step 1 – Create the conversation. Like the rest of Skype for Web API – new objects are not ever instantiated in isolation – they always come from a parent. In this case we use the parent conversationManager to create a new conversation:

var application;
//instantiate application object and do sign-in process
var conversation = application.conversationsManager.createConversation();

Step 2 – Add the participants. You don’t need to add yourself, but you need to add anyone else in the conversation. Assuming you already have the person object:

var conversationParticipant = conversation.createParticipant(person);
conversation.participants.add(conversationParticipant);

Step 3 – Register the conversation. Before you start the conversation you need to tell the conversationsManager about it by adding it into its list of conversation:

application.conversationsManager.conversations.add(conversation);

Step 4 – Start the conversation! You’re now ready to begin the Audio Service, which you do with:

conversation.audioService.start();

At this point, the remote participant will receive the incoming conversation. So that you can track whether they answer it, or ignore/reject it you need to know its state. You can get this by subscribing to state change events on the local participants audio state:

conversation.selfParticipant.audio.state.changed(function(newState) {
//do something with newState
});

Once you start the audioService the state will change to “Connecting”. When the remote participant accepts, the state will change to “Connected”. If they reject or ignore the call it will change to “Disconnected”.

If you find that the state goes staight to “Disconnected” immediately without contacting the remote participant, have a look at the Console Log. If there’s been an error you should find it there. For instance, your Log list might look like this:

AudioVideoModality(a5df8786)::state: Created -> Connecting Reason: undefined

AudioVideoModality(a5df8786)::state: Connecting -> Disconnected Reason: undefined

Here it’s pretty easy to see that the Plugin isn’t installed.

Today’s example code shows how to start an audio conversation using Skype Web SDK:

 <div class="form-horizontal">
    <div class="form-group">
      <label for="username" class="col-sm-2 control-label">Username</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="username" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default" id="btnLogIn">Log in</button>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default" id="btnLogOut">Log out</button>
      </div>
    </div>
  </div>

  <div>
    <span id="loginStatus"></span>
  </div>

  <hr/>

  <div class="form-horizontal">
    <div class="form-group">
      <label for="contact" class="col-sm-2 control-label">Start Audio Call with:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="contact" placeholder="Contact SIP Address">
      </div>
    </div>  

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default" id="btnStartConversation" disabled="disabled">Start</button>
      </div>
    </div>
  </div>
  
  <div>
    <span id="audioStatus"></span>
  </div>
<div id="footer"></div>
  
  <!-- This is not needed for the samples to run, but adds standard headers and footers to the samples, to display title, instructions, about etc.
       If you're taking this code and using it yourself, you can remove this.-->
   <script type="text/javascript" src="../../assets/layoutcodesample-min.js"></script>
  
  <script type="text/javascript">

  <!-- These variables are only needed for laying out the code sample, they are not part of the sample code. -->
  var pageTitle = 'Starting an Audio Conversation';
  var blogPostLocation = "http://thoughtstuff.co.uk";
  var githubLocation = "http://github.com";
 


 var client;
  $(function () {
    'use strict';

	Skype.initialize({
            apiKey: 'SWX-BUILD-SDK',
        }, function (api) {
            client = new api.application();           
			
		// whenever client.state changes, display its value
		client.signInManager.state.changed(function (state) {
		$('#loginStatus').text("Login State: " + state);
		});
	
        }, function (err) {
            alert('Error loading Skype Web SDK: ' + err);
        }); 

    $('#btnLogIn').click(function () {

        // start signing in
        client.signInManager.signIn({
          username: $('#username').val(),
          password: $('#password').val()
        }).then(function () {
            //log in worked!
            alert('Logged in!');
            $('#btnStartConversation').prop('disabled', false);
            
          }, function (error) {
            //Something went wrong.
            alert(error);
          });
      });

    $('#btnLogOut').click(function () {
        // start signing out
        client.signInManager.signOut()
        .then(function () {
               //log out worked!
               alert('Logged out!');
               $('#btnStartConversation').prop('disabled', true);
             }, function (error) {
                //Something went wrong.
                alert(error);
              });
      });

    $('#btnStartConversation').click(function () {
      StartConversation($('#contact').val());
    });

  function StartConversation (contactSIP) {
  //first, get the person to start a conversation with. Assume one person.
  var person;
  GetContactFromName(contactSIP).then(function (results) {
    results.forEach(function (result) {
    person = result.result;          
  });

 //create the conversation object
 var conversation = client.conversationsManager.createConversation();

 //add the person to the conversation by creating a conversation participant object
 var convParticipant = conversation.createParticipant(person);
 conversation.participants.add(convParticipant);

 //add the newly created conversation to the ConversationManager list
 client.conversationsManager.conversations.add(conversation);

 
 conversation.audioService.start();
 
 
 //watch the audio state of the self-participant to see what's happening
 conversation.selfParticipant.audio.state.changed(function(newState) {
	$('#audioStatus').text("Audio State: " + newState);
 });
});

}

function GetContactFromName(contactSIP)
{
 var query = client.personsAndGroupsManager.createPersonSearchQuery();
 query.text(contactSIP);
 query.limit(1);
 return query.getMore();          
}

});

</script>

Demo Online

You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.

Good to Know

• Before you can run this code, make sure you've read my post on all the prerequisites you need to have in place.
• You don't have to copy the code from here - it's all on GitHub!
• If you liked this post, there are more! Check out the dedicated Skype for Web SDK Collection page, or signup to the newsletter
• Need a Skype for Web SDK solution, but not in a position to build yourself? Hire me!

Written by Tom Morgan

Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.

---

Buy the book: Building and Developing Apps & Bots for Microsoft Teams. Now available to purchase online with free updates.

Related posts:

Learn Skype Web SDK Day 13 : Starting a New IM Conversation Learn Skype Web SDK Day 18 : Terminating a Conversation Learn Skype Web SDK Day 19 : Receiving a New Conversation Learn Skype Web SDK Day 9 : Getting & Displaying Contact Photos Learn Skype Web SDK Day 12 : Getting Users in Groups