Pages Menu
TwitterRssFacebook

Posted by on Jun 5, 2015 in Everything Else | 0 comments

Learn Skype Web SDK Day 27 : Joining a Conference via URI

Learn Skype Web SDK Day 27 : Joining a Conference via URI

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

You can use Skype for Web API to join existing conferences, either ones you’ve set up somewhere else, or conferences set up by other people. All you need is the Conference URI, which looks like a SIP address, e.g. sip:[email protected];gruu;opaque=app:conf:focus:id:Q740UACR.

Instead of using the conversationsManager object to create a new conversation, you can use it instead to retrieve the conversation object which represents the conference, by calling getConversationByUri and passing in the conference URI:

conversation = client.conversationsManager.getConversationByUri(conferenceURI);

Once you have that, you don’t need to add any participants or anything (because you’re not creating a new conversation, just joining an existing one), you can just call:

conversation.chatService.start();

to join with IM, and/or:

conversation.audioService.start();

to join with Audio.

Of course, you may still want to subscribe to state changes, new historyService messages etc etc, as you would for a new conversation that was being created. See the example code for this post below for more information on doing that.

 <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="confURI" class="col-sm-2 control-label">Join Conference URI:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="confURI" placeholder="sip:[email protected];gruu;opaque=app:conf:focus:id:Q740UACR">
      </div>
    </div>  

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default" id="btnStartConversation" disabled="disabled">Join</button>
      </div>
    </div>
  </div>

  <div>
    Conversation State: <span id="lblConversationState"></span>
    <ul id='conversationText'></ul>

<hr/>

  <div class="form-horizontal">
    <div class="form-group">
      <label for="message" class="col-sm-2 control-label">Send Message:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="message" placeholder="Message to send">
      </div>
    </div>  

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-default" id="btnSendIM" disabled="disabled">Send IM</button>
      </div>
    </div>
  </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 = 'Joining a Conference by URI';
  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);
               $('#btnSendIM').prop('disabled', true);
             }, function (error) {
                //Something went wrong.
                alert(error);
              });
      });

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

        $('#btnSendIM').click(function () {
      conversation.chatService.sendMessage($('#message').val());
    });

  function StartConversation () {
 var conferenceURI = $('#confURI').val();
 conversation = client.conversationsManager.getConversationByUri(conferenceURI);
 
 //register for the conversation state changing to connected.
  conversation.chatService.state.changed(function(newState){
  $('#lblConversationState').text(newState);
  if (newState == 'Connected') {
    $('#btnSendIM').prop('disabled', false); //safe to send IMs now
  }
  });

//register for new messages added to the historyService object
  conversation.historyService.activityItems.added(function (newMsg){
    if (newMsg.type() == 'TextMessage')
    {
         var direction;
         if (newMsg.direction() == 'Incoming') 
            direction = "<--";          
         else
         {
            direction = "-->";          
          }

         $("#conversationText").append('<li><b>' + direction + '</b>&amp;nbsp; ' + newMsg.sender.person.displayName() + ' : ' + newMsg.text() + '</li>');  
    }
  });
 
 conversation.chatService.start();
 


}



});

</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).