Learn Skype Web SDK Day 29 : Joining a Conference Anonymously

It’s all very well that you can log in as a Skype for Business user using the Skype Web API, and for lots of scenarios that makes sense. However for a lot of people the Skype Web API is exciting because it enables your customers who don’t have Skype for Business to communicate with you online.

The tricky problem here has always been that customers don’t have Skype for Business accounts in your company. The traditional workaround is the Web Access portal, which allows people without credentials to join meetings anonymously:

This functionality is also possible in Skype Web API. You can “sign in” as an anonymous user, simply by providing a display name and the URI of the conference you wish to join. So, the traditional SignIn method, which usually takes as its parameters username and password, instead takes just ‘name’ and ‘meeting’ parameters:

 var client;
   //instantiate client object using Skype4B Bootstrapper
 client.signInManager.signIn({
          name: $('#displayName').val(),
          meeting: $('#meetingURI').val()
        }).then(function () {
            //log in worked!
            alert('Logged in!');
          }, function (error) {
            //Something went wrong.
            alert(error);
          });

The Conference URI which you pass must be the actual Conference SIP address, in the format: sip:[email protected];gruu;opaque=app:conf:focus:id:Q740UACR

The sign in process is exactly the same, and returns a promise on succeessful signin (or unsuccesful error).

Once you’ve signed in, you won’t be joined into the meeting automatically. You still need to join the meeting exactly the same as if you’d signed in as a regular user.

In the example code you can join a meeting anonymously and send messages. You should use this with the previous blog post on creating a conference so that you can set up a conference and know the conference URI. Here’s what I do:

– Create a conference, inviting two users using the Skype for Business client.
– Open the participant list in Skype for Business client, verify there are 3 users.
– In a new browser window, join the conference anonymously.
– In the Skype for Business client, verify that a new Guest user has joined.

 <div class="form-horizontal">
    <div class="form-group">
      <label for="name" class="col-sm-2 control-label">Display Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" placeholder="Andy Other">
      </div>
    </div>
  
   <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" disabledvvv="disabled">Join</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/>
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);
        }); 

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

        // Join Conference URI anonymously with just the display name and conference URI
        client.signInManager.signIn({
          name: $('#name').val(),
          meeting: $('#confURI').val()
        }).then(function () {
            //log in worked!
            alert('Logged in!');
                  StartConversation();
          }, function (error) {
            //Something went wrong.
            alert(error);
          });
      });

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

 

        $('#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.

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!

Related posts:

Learn Skype Web SDK Day 27 : Joining a Conference via URI Learn Skype Web SDK Day 26 : Creating a Conference Learn Skype Web SDK Day 28 : Listing Participants in a Conference Learn Skype Web SDK Day 2 : Logging Out Learn Skype Web SDK Day 3 : Getting Your Own Presence