Learn Skype Web SDK Day 29 : Joining a Conference Anonymously
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
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>&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!
Hi Tom,
I return:
GET https://lyncdiscoverinternal.mdfronts.com/xframe net::ERR_NAME_NOT_RESOLVED
GET https://lyncdiscover.mdfronts.com/xframe net::ERR_INSECURE_RESPONSE
I am using SfB Online.
Any solution.
Hi Tom, How to generate a Conference URI to schedule a meeting using Web SDK without using SfB client or outlook?
Thanks,
H