Pages Menu
TwitterRssFacebook

Posted by on Jun 4, 2015 in Learn Skype Web SDK | 0 comments

Learn Skype Web SDK Day 26 : Creating a Conference

Learn Skype Web SDK Day 26 : Creating a Conference

This is one post in a series of more than 30, devoted to helping you get up to speed quickly with the new Skype Web SDK. Each lesson comes with source code (in GitHub) and a working demo page so you can see what it does. Check out the full list of posts on the Skype Web SDK page.


View Demo

A conference is nothing more than a conversation with more than one person. This is as oversimplification of course, but it can help to think like this when using the Skype for Web API, because that is the abstraction it provides.

When using the API, you can create a conference simply by creating a conversation exactly as you normally would, but adding more than one participant. Likewise, once a conversation has been established you can add participants. In the background the conversation will upscale to a conference, but the difference won’t be obvious via the API, and you don’t need to modify how you normally work with conversations:

 var conversation = client.conversationsManager.createConversation();
 var convParticipant1 = conversation.createParticipant(contact1);
 var convParticipant2 = conversation.createParticipant(contact2);
 conversation.participants.add(convParticipant1);
 conversation.participants.add(convParticipant2);

There are two indicators though, which you can use to identify the difference between conversation and conference. The first is a isGroupConversation flag, which is part of the Conversation object. By registering state changes on this property you can be kept informed of when the upscale to conference occurs. The second is the conference URI. This is populated for conferences, and is the SIP URI which other Lync users can use to access the conference. Again, this has a changed event:

 conversation.isGroupConversation.changed(function () {
//do something when the conversation becomes a conference.
 });

 conversation.uri.changed(function () {
//do something with the conference URI
 })

In the example code for this post, specify two participants to start a conference. You can also then use the generated conference URI to allow other users to join.

In the code sample below, the user’s list of contacts and groups is displayed:

 <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="contact1" class="col-sm-2 control-label">Start Conversation with:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="contact1" placeholder="Contact SIP Address">
      </div>
    </div>  
    <div class="form-group">
      <label for="contact2" class="col-sm-2 control-label">and:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="contact2" 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="btnCreateConference" disabled="disabled">Create Conference</button>
      </div>
    </div>
  </div>

  <hr/>

 isGroupConversation: <span id="isGroupConversation"></span> <br/>
 Conference URI: <span id="conferenceUri"></span>

  
  <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 = 'Creating a Conference';
  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!');
            $('#btnCreateConference').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!');
               $('#btnCreateConference').prop('disabled', true);
             }, function (error) {
                //Something went wrong.
                alert(error);
              });
      });

    $('#btnCreateConference').click(function () {
      CreateConference($('#contact1').val(),$('#contact2').val());
    });

  function CreateConference (contactSIP1,contactSIP2) {
  //first, get the people to start a conference with. We're using 2 people which
  //is the minimum for a conference, but you could easily use more.
  var contact1;
  GetContactFromName(contactSIP1).then(function (results) {
    results.forEach(function (result) {
    contact1 = result.result;          
    });

  var contact2;
  GetContactFromName(contactSIP2).then(function (results) {
    results.forEach(function (result) {
    contact2 = result.result;          
  });


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

 //add the 2 contacts to the conversation by creating a conversation participant object
 //for each one.
 var convParticipant1 = conversation.createParticipant(contact1);
 var convParticipant2 = conversation.createParticipant(contact2);
 conversation.participants.add(convParticipant1);
 conversation.participants.add(convParticipant2);
 
 conversation.isGroupConversation.changed(function () {
 $('#isGroupConversation').text(conversation.isGroupConversation());
 });

 conversation.uri.changed(function () {
 $('#conferenceUri').text(conversation.uri());
 })

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

 conversation.chatService.start();

});
});

}

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.

Disclaimer: This is sample code, intended to inform and educate. It is not production-ready and is lacking key components such as error handling. You use it entirely at your own risk. You should fully understand the effects, limitations and risks of the code before executing, and understand the implications of any set-up steps. By using these code examples you are using the Skype Web SDK, so you should read the Skype Software License Terms to which you are agreeing.

Good to Know

Post a Reply

Your email address will not be published. Required fields are marked *

This site uses cookies to help make this website better. By continuing to use this site we’ll assume you’re OK with that (implied consent).