Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
30 days of worked examples and source code to help you learn faster
TOM MORGAN (THOUGHTSTUFF.CO.UK)
THOUGHTSTUFF.CO.UK
Version 1.0 August 2015
LEARN SKYPE WEB SDK IN 30 DAYS
Learn Skype Web SDK in 30 Days 1 Tom Morgan | thoughtstuff.co.uk
Table of Contents About the Author .................................................................................................................................... 3
About this Book ....................................................................................................................................... 4
About the Code Samples ......................................................................................................................... 5
Using the Samples Online ................................................................................................................... 5
Using the Sample Offline .................................................................................................................... 6
Chapter 1 - Before You Start ................................................................................................................... 7
Day -2: Server Prerequisites ................................................................................................................ 7
Day -1: Setting Up Your Development Environment .......................................................................... 8
Day 0: Introducing Skype Web SDK................................................................................................... 10
Chapter 2 - Getting Connected ............................................................................................................. 12
Day 1: Logging In ............................................................................................................................... 12
Day 2: Logging Out ............................................................................................................................ 14
Chapter 3 – Presence ............................................................................................................................ 16
Day 3: Getting Your Own Presence ................................................................................................... 16
Day 4: Getting Your Own Information .............................................................................................. 17
Day 5: Subscribe to Changes in your own Presence / Information .................................................. 18
Day 6: Getting & Subscribing to Other People’s Presence ............................................................... 19
Day 7: Setting Your Own Presence ................................................................................................... 21
Day 8: Setting Your Own Information ............................................................................................... 22
Day 9: Getting & Displaying Contact Photos ..................................................................................... 22
Chapter 4 – Contacts ............................................................................................................................. 24
Day 10: Getting the Contact List ....................................................................................................... 24
Day 11: Searching for Users & Groups .............................................................................................. 25
Day 12: Getting Users in Groups ....................................................................................................... 26
Chapter 5 - Instant Messaging .............................................................................................................. 28
Day 13: Starting a New IM Conversation .......................................................................................... 28
Day 14: Sending Instant Messages.................................................................................................... 29
Day 15: Receiving Instant Messages ................................................................................................. 30
Day 16: Doing More with History Service ......................................................................................... 31
Day 17: Sending & Receiving “Is Typing” Notifications..................................................................... 32
Day 18: Terminating a Conversation ................................................................................................. 34
Day 19: Receiving a New Conversation ............................................................................................ 35
Chapter 6 - Audio / Video ..................................................................................................................... 38
Day 20: Starting a New Audio Conversation ..................................................................................... 38
Learn Skype Web SDK in 30 Days 2 Tom Morgan | thoughtstuff.co.uk
Day 21: Up-scaling to an Audio Call .................................................................................................. 40
Day 22: Receiving an Incoming Audio Call ........................................................................................ 41
Day 23: Mute, Hold and DTMF Tones ............................................................................................... 44
Day 24: Starting a New Video Conversation ..................................................................................... 45
Day 25: Listing & Changing Devices .................................................................................................. 47
Chapter 7 – Conferencing ..................................................................................................................... 49
Day 26: Creating a Conference ......................................................................................................... 49
Day 27: Joining a Conference via URI ................................................................................................ 50
Day 28: Listing Participants in a Conference ..................................................................................... 51
Day 29: Joining a Conference Anonymously ..................................................................................... 52
Chapter 8 – Ready to Go! ...................................................................................................................... 55
Day 30: Putting it all together – where you come in ........................................................................ 55
Bonus Day - How to: Skype Web SDK Development without having all the server pre-requisites in
place .................................................................................................................................................. 55
Learn Skype Web SDK in 30 Days 3 Tom Morgan | thoughtstuff.co.uk
About the Author
Tom Morgan is an experienced .NET
developer and Microsoft Skype for
Business MVP with over 10 years
development experience.
For nearly 4 years he has worked at
Modality Systems, a specialist
provider of Universal
Communications services, where he
produces software which interacts
with Microsoft Lync/Skype for
Business. As a Senior Development
Consultant he is responsible for
designing, developing and deploying
development services projects for a
varied client list including FTSE 100
companies, multi-national
corporations, government
organisations and charities, as well as maintaining and developing Modality’s
product line of Communication Enabled Business Process (CEBP) applications.
In the past he has worked with Scott Hanselman (Microsoft) on a community
project (LyncAutoAnswer.com), and wrote a Lync community tool (AutoAssist)
which eventually was acquired by Modality Systems and turned into a
commercial product.
He blogs about Microsoft Skype for Business development on his blog
ThoughtStuff (thoughtstuff.co.uk) with plenty of code samples and freely
available Skype for Business products.
Learn Skype Web SDK in 30 Days 4 Tom Morgan | thoughtstuff.co.uk
About this Book This book is a collection of blog posts I wrote following the release of the Skype Web SDK during the
keynote at Build 2015, Microsoft’s Developer Conference. Apart from some minor typographical
changes the content is identical to the blog posts, which are all available at www.skypewebsdk.com.
The hope is that publishing all the content together in a searchable PDF will make it easier to
reference and make it available to more developers. The overall aim is to make it simple for YOU -
the developer who is just starting out with Skype for Business - to get up to speed and writing code.
There are 30 “days” (plus a few extras before and after). Each day works through a specific problem
and describes how to solve it. In addition, at the end of each day you will see a link to GitHub. This is
where you can download a fully working sample for that day to try out in your own lab.
I’d love to hear your feedback about this book (both good and bad) as it’s my first attempt and I’d
like to know what works and what doesn’t. Comments, mistakes etc. via Twitter to
http://www.twitter/tomorgan or via email to [email protected] please.
Finally, expect new versions of this book! If you’ve been passed this by a friend check to make sure
you’re on the latest release, which is always at:
https://gallery.technet.microsoft.com/office/Learn-Skype-Web-SDK-in-30-418fe989
Copyright © 2015 Tom Morgan. Microsoft and Skype for Business are either registered trademarks
or trademarks of Microsoft Corporation in the United States and/or other countries.
Learn Skype Web SDK in 30 Days 5 Tom Morgan | thoughtstuff.co.uk
About the Code Samples
Disclaimer: The code in this book and the code linked to online 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 which you are agreeing to.
Many of the days contain links at the end to code samples. Each of the samples contains just enough
code to demonstrate a particular use of the Skype Web SDK. The samples are designed to
demonstrate functionality, and have been tested with the Skype Web SDK. They should therefore
work within any correctly set-up environment. They look like this:
Try this out: http://code.skypewebsdk.com/Login/Logging%20out/index.htm Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Login/Logging%20out/index.htm
The first link will take you to a demo page, showing the working code. If you have configured your
Skype for Business environment appropriately (see below) then you will be able to run the demo
page directly from that link.
The second link will take you to the code in GitHub where you can either download it or fork it.
Using the Samples Online
Each of the samples requires you to log in. This means that you can use the online version of the
samples to connect directly to your environment, using your login credentials so that you can
experience Skype Web SDK with users, groups and information you are familiar with.
To do this, your Skype for Business domain must be correctly set up for Skype Web SDK and you will
need to add code.skypewebsdk.com as a trusted domain to run code from. Instructions on how to
do this can be found in the Day -2 section. All the sample code is hosted on GitHub so you can verify
that credentials are not being stored etc.
Learn Skype Web SDK in 30 Days 6 Tom Morgan | thoughtstuff.co.uk
Using the Sample Offline
The samples can also be used offline, without the surrounding header & footer that you see online.
For your convenience these elements have been separated into their own files, making it easy to
strip the sample back to its core functionality. To do this:
Download the samples from GitHub.
Open the index.html for the sample you wish to run
Remove the <div id="header"></div> and <div id="footer"></div>
elements. This is where the informational headers and footers are loaded.
Remove the script reference: <script type="text/javascript" src="../../assets/layoutcodesample-min.js"></script>
and the 3 variables which follow it. These are used to load content into the header and
footer sections.
Remember that even if you are running the code locally, you will still need to configure Skype for
Business to trust your domain. See the Skype for Day -2 section for more information.
Learn Skype Web SDK in 30 Days 7 Tom Morgan | thoughtstuff.co.uk
Chapter 1 - Before You Start Days -2 to 0
Day -2: Server Prerequisites
As at the time of writing, the Skype Web SDK doesn’t impose any additional requirements on the
server, over and above those required for UCWA. So, if you’re already accessing your Skype for
Business environment using the Unified Communications Web API, you should find that you’ll be
able to start using the Skype Web SDK straightaway (as long as you host your code on the same
domain, see below).
For the rest of us, however, you’ll need to do the following steps before you can begin to use
Microsoft’s latest API for Skype for Business:
Step 1 – Upgrade your Servers You need to be running at least Lync Server 2013 CU 1 on all Front End, Edge & Director servers.
Step 2 – Bootstrap You need to run the Bootstrapper on each of the aforementioned servers. To do this, run:
%ProgramFiles%\Microsoft Lync Server 2013\Deployment\Bootstrapper.exe on each server.
Step 3 – Set-CsWebServiceConfiguration As a security measure you need to tell your Lync / Skype for Business servers which domains to trust
connections from. You do this by running Set-CsWebServiceConfiguration.
First, run Get-CsWebServiceConfiguration to find the identities you have. If you only have one,
make a note of it. If you have more than one, pick one and make a note of it.
To add a new domain for UCWA, create the domain using New-CsWebOrigin and then add it to the
CrossDomainAuthorizationList:
$x = New-CsWebOrigin -Url “{https://thoughtstuff.co.uk}”
Set-CsWebServiceConfiguration -Identity “{YOUR_IDENTITY}” -CrossDomainAuthorizationList @{Add=$x}
This is the domain where your Skype for Business code will be running. In a pinch, or if you have a
test environment, you can specify localhost as the domain and then host your code locally. However,
this is a security risk for public-facing systems as it means anyone can access your server (as long as
they host on localhost)
You have to add separate entries for http and https, and any specific port numbers (ie
thoughtstuff.co.uk is different to thoughtstuff.co.uk:8080)
You need to do this on every FE, Edge and Director server (the same list as steps 1 and 2).
Learn Skype Web SDK in 30 Days 8 Tom Morgan | thoughtstuff.co.uk
Day -1: Setting Up Your Development Environment
Unlike many of the other Skype for Business APIs and SDKs, the Skype Web SDK doesn’t require
much setup at all because it’s designed to work anywhere; all it really needs is a web connection.
However, there are some tools you’ll want in place before you start, and some settings you’ll need
to tweak.
Editors You’ll need something to write and edit HTML in. You can use your favourite text editor, an IDE, or
just notepad.exe. You’ll need a browser: any of the popular choices such as Internet Explorer,
Chrome, Safari or Firefox should be fine, though you’ll want to make sure you’ve got an up to date
version.
You’ll also benefit hugely from having Fiddler installed, for when things don’t work first time.
Hosting You need to be able to host your code in a web-server, either locally on your machine or on a
remote server. Whilst you can open local HTML files directly in your browser, Skype Web SDK won’t
work. The reason for this is security. If you think back to when you set up your server, you’ll
remember that you had to specify which hostnames were allowed to connect to the server. When
you’re hosting files locally you don’t have a hostname, so the server will refuse you. By hosting in a
webserver, even though our hostname may only be “localhost” this will be enough (if we’ve added
“localhost” to the server whitelist).
Adding “localhost” to the server whitelist is a security risk, and only recommended if you’re
developing on a test system. If you chose not to do this when setting up the server, all of your Skype
Web SDK code needs to run from whichever domain you whitelisted.
The instructions below are for setting up Internet Information Services (IIS), the default web server
on Windows machines. If you want to use a different web server you’ll need to make sure it’s turned
on and set up.
Firstly, make sure IIS is installed. You can do this by choosing “Turn Windows Features On and Off”
and selecting “Internet Information Services”.
By default, IIS creates a single site (Default Web Site) which looks at files in the C:\inetpub\wwwroot
folder. Your code is probably going to be kept somewhere else, so let’s add a new site.
In the Connections tree on the left-hand side, right-click Sites and choose Add Website. Choose a
name for your new site, and navigate to the folder you want it to look in for website files. In this
example, I’ve chosen to point it to a folder containing my sign-in code, but you could just create a
new folder and put a single index.html file in it:
Learn Skype Web SDK in 30 Days 9 Tom Morgan | thoughtstuff.co.uk
You can either keep the default port number of 80, or choose a different one. If you keep port 80
then you’ll receive a warning that the port number is already in use, and that you’ll only be able to
start one site at a time. This is because port 80 is already used by the Default Web Site. If you’re not
using it, then you can right-click the Default Web Site and click Manage Website > Stop, and then do
the same thing to Start your new site. Otherwise, choose another port number, as I have.
To view your new site, click the Browse button on the right hand side, in the Actions pane. This will
open the site using the correct address and port number. If it doesn’t work: make sure that the user
ApplicationPoolIdentity has permissions to access the folder you’ve chosen, or pick another user
to run the Application Pool.
Important: You’ll remember from the previous day on Skype Web SDK Prerequisites that you need
to tell Skype for Business about any domains which will be running code. Therefore, you should
make sure that the full domain of the site you have just set up (including any port numbers) is
correctly registered with Skype for Business as an allowed domain.
Learn Skype Web SDK in 30 Days 10 Tom Morgan | thoughtstuff.co.uk
Day 0: Introducing Skype Web SDK
During the Build 2015 Keynote, Microsoft announced the release of the technical preview of their
newest SDK for Skype for Business, the Skype Web SDK, and part of the Skype Developer Platform.
With this new developer tool Microsoft has listened to user feedback around UCWA as well as
considering the current state of the communications market. In the Skype Web SDK they have
provided a means for developers everywhere to integrate communication deep into their webpages.
How does it work? Skype Web SDK is released as a JavaScript file, which acts as the interaction between the developer
and the Skype for Business infrastructure. More than a simple wrapper however, the JavaScript has
been architected to be easy to use, making use of:
Promise objects : Promises/A+ specification-compliant implementation
Observable Properties : which contain standardized and dependable events such as
“changed”, “when”, “then” you can use to react to change events
Lazy Collections : with .get and .subscribe functions to load data lazily and only retrieve
those parts of data that are needed
It works best in a MVVM (Model-View-ViewModel) environment, where it represents the model
layer. It can be integrated with frameworks such as Angular and used in SPA (single page application)
solutions.
Learn Skype Web SDK in 30 Days 11 Tom Morgan | thoughtstuff.co.uk
What can it do? Here’s a small subset of available functionality which you’ll be able to achieve with the new SDK:
Get & Change presence. Subscribe to user presence. See Contact information, including
photos.
Search for Contacts & Groups. Manage Contact list.
Start or receive Instant Message conversations
Start or receive Audio Video conversations. Mute/Hold audio. Send DTMF tones. Display
video in browser!
Display multiple video feeds. Enumerate and change devices.
Join Conferences anonymously
Note that audio/video functionality is provided by the same plugin used to deliver Skype for Business
Web Access (Lync Web Access) functionality. There is an updated version for use with the Skype
Web SDK – this is shipped with the SDK but will also become the mainstream version of the plugin,
replacing the existing one. Therefore, Web Access users will receive it the next time they join a Web
Access meeting and it will also be rolled out via Windows Update.
Where can I get it? The MSDN landing page for the Skype Web SDK is: https://msdn.microsoft.com/en-
us/library/dn962133(v=office.16).aspx. This page contains links to download the SDK as well as
online samples and general reference information.
You can also download the Skype Web SDK JavaScript file from:
https://swx.cdn.skype.com/shared/v/1.1.23.0/SkypeBootstrap.min.js. This is pre-release software
download, so you should read and agree to the Terms of Service that accompany it.
There is also a dedicated MSDN Forum for Skype Web SDK at:
https://social.msdn.microsoft.com/Forums/en-US/home?forum=SkypeWebSDK.
The Skype for Business Web App Plug-in can be downloaded from MSDN:
https://msdn.microsoft.com/en-us/library/dn986863(v=office.16).aspx.
Learn Skype Web SDK in 30 Days 12 Tom Morgan | thoughtstuff.co.uk
Chapter 2 - Getting Connected Days 1 & 2
Day 1: Logging In
Getting signed in using Skype Web SDK’s predecessor UCWA, used to be a complicated process
involving trying different URLs, passing around tokens and generally trying to convince the server to
let you in. One of the real benefits of the Skype Web SDK is that it’s greatly simplified this process
into a single JavaScript call.
The starting point for using the Skype Web SDK is the Application object. This is actually the only
object in the SDK which you construct yourself. Everything else hangs off this Application object. An
Application object represents an endpoint which you can sign in and do things with. You can create
multiple Application objects and have each one sign in as a different user if you need to.
The signInManager object is responsible for navigating all the different types of authentication and
getting you logged in. There are just two commands: signIn and signOut.
Due to the SDK being so new we’re still understanding how everything works, where all the bits are,
and what does what. At first glance, it looks like the actual JavaScript code that is the SDK is being
presenting using almond, an AMD loader. This could be done for speed or ease of updating.
Whatever the reason – we can’t just add a script tag and get coding. We need to load in the script.
This is done like this:
Learn Skype Web SDK in 30 Days 13 Tom Morgan | thoughtstuff.co.uk
var client;
$(function () {
'use strict';
Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();
}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});
....
});
There are different types of credentials you can supply when logging in. This example is going to look
at basic authentication: where a Skype for Business username and password are supplied. However,
logging in via Windows Authentication and OAuth are also supported.
To sign in using basic authentication, call the signIn method passing two values: username and
password:
var client = new Skype.Web.Model.Application;
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
}, function (error) {
//Something went wrong.
alert(error);
});
The method returns a promise, so you can react to either a successful login or a failure.
Learn Skype Web SDK in 30 Days 14 Tom Morgan | thoughtstuff.co.uk
It’s useful to be able to know the current logged-in state, and the signInManager can help with that
too. It exposes a property: state, which gives you the current logged-in state. Valid states are:
SignedOut
SignedIn
SigningIn
SigningOut
The example for this day shows a webpage with a username and password button, and a Sign In
button, which performs a sign-in to Skype for Business.
Try this out: http://code.skypewebsdk.com/Login/Getting%20Logged%20In/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Login/Getting%20Logged%20In/index.htm
Day 2: Logging Out
Last time we talked about getting logged in, and looking at the current signed-in state.
Equally important is getting logged out. If you only ever log in using the Skype Web SDK and don’t
log out, just close the browser instead or navigate away, then the user you have signed in as will
continue to show as signed in for a period of time afterwards. This can be confusing for people who
try and send the user messages etc. Therefore, wherever possible you should try and ensure that a
log-out takes place when the user has finished.
To sign out, call signOut on the signInManager object. The method doesn’t take any parameters,
and returns a promise so you can react to a successful or unsuccessful sign out:
Learn Skype Web SDK in 30 Days 15 Tom Morgan | thoughtstuff.co.uk
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
}, function (error) {
//Something went wrong.
alert(error);
});
Previously, we talked about the state property of the signInManager. Whilst you can always use
that to retrieve the current sign-in status of the user, you might want to make your application more
responsive.
You can react to changes in state by coding against the state.changed event:
client.signInManager.state.changed(function (state) {
//do something, the state has changed.
});
The new value of state is available in the state parameter.
Alternatively, you can react conditionally according to specific states. For instance, to do something
only if the state has just changed to SignedIn:
client.signInManager.state.when('SignedIn', function () {
//do something, state is SignedIn
});
The example for this day takes the log-in example from before, adds a Log Out button, and adds a
log-in state indicator.
Try this out: http://code.skypewebsdk.com/Login/Logging%20out/index.htm Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Login/Logging%20out/index.htm
Learn Skype Web SDK in 30 Days 16 Tom Morgan | thoughtstuff.co.uk
Chapter 3 – Presence Days 3 to 9
Day 3: Getting Your Own Presence
Once you’ve logged in you can start to access information about users, including yourself.
Skype Web SDK makes it easy to get to your own information, with the mePerson object. You can
access this from the Application object once you’re signed in.
From the mePerson object, the state object gives you your current presence state (but this isn’t the
best way, see below).
var client = = new Skype.Web.Model.Application;
// do sign-in process here
var presenceState = client.personsAndGroupsManager.mePerson.status;
The return object is a Status property with a value which represents the presence state. Valid
presence states (that I’ve found) are:
Online
Busy
DoNotDisturb
BeRightBack
Away
However, just getting the state by referencing the property isn’t the best approach because there’s
no guarantee that the property will be populated. If you read the property really soon after logging
in, you may find that it’s null because it’s not been filled in yet by the server.
That’s why, for all properties, you should always register a changed listener for properties. That way
your code will never end up with a null value, it will wait (asynchronously and nicely) until the
property is ready, then carry on.
A better way of doing the above would be:
Learn Skype Web SDK in 30 Days 17 Tom Morgan | thoughtstuff.co.uk
var client;
// do sign-in process here to instantiate the client object
client.personsAndGroupsManager.mePerson.status.get().then(function (presenceState ) {
// do something with the presence value
});
A more robust way of getting the presence is to set up an event when it changes. This will be
covered in the next day.
Try this out: http://code.skypewebsdk.com/Presence/1-GettingOwnPresence/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Presence/1-GettingOwnPresence/index.htm
Day 4: Getting Your Own Information
We’ve already covered how to get and subscribe to presence information but Skype for Business
contains a lot more information about the logged-in user, which we can get at and display.
You’ve already met the mePerson object when getting presence but there’s other information there
as well. In this code example, I load the Display Name, Job Title and Department information and
display them. These attributes are available to you once you’ve logged in.
Whilst most of the properties are basic types like strings and can just be read normally, the Note
property is a complex type. It has two properties: text and note. This is because it’s used to show
both Personal Note (sometimes called the Message of the Day, the thing at the top of the Skype for
Business desktop client that lets you tell people what you’re up to), and also Out of Office messages.
For Out of Office messages the type property will be OutOfOffice and for personal notes it will be
Personal. The text property will be the actual text of the Out of Office / Note.
Try this out: http://code.skypewebsdk.com/Presence/2-GettingOwnInfo Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/edit/gh-pages/Presence/2-GettingOwnInfo/index.htm
Learn Skype Web SDK in 30 Days 18 Tom Morgan | thoughtstuff.co.uk
Day 5: Subscribe to Changes in your own Presence /
Information
In the last post we covered getting your own presence by reading the state of the mePerson object.
However, as I mentioned, because of the asynchronous way that the Skype Web SDK works,
sometimes you might read that property and find that’s it’s empty (or Undefined).
You may also want to react in your application when your state changes, such as changing the colour
of a presence bar or just updating a “Presence State” label.
The Skype Web SDK allows you to code against the presence state changing. You do this by
registering an event listening for the changed() event of the state and then calling subscribe() on
the object to begin the subscription process:
var client;
<!-- create client object and do sign-in process here -->
client.personsAndGroupsManager.mePerson.status.changed(function(newStatus) {
<!-- The presence status has changed. The new presence value is in newStatus. -->
alert('Status Changed to: ' + newStatus);
});
client.personsAndGroupsManager.mePerson.subscribe();
In practice I’ve found that it’s not actually necessary to call subscribe() on the mePerson object –
you’ll get the changed events even if you don’t do this. However this isn’t documented behaviour
and could change in a future update so it’s best to keep it in.
Alongside presence the activity field is used to provide additional information. For instance, when
you make a phone call your presence state changes to Busy. Your activity field also changes to a
special activity on-the-phone. This is why in the Skype for Business Client, you see “In a Call” rather
than just Busy.
You subscribe to activity changes in exactly the same way:
Learn Skype Web SDK in 30 Days 19 Tom Morgan | thoughtstuff.co.uk
<!-- do sign-in process here -->
client.personsAndGroupsManager.mePerson.activity.changed(function(newActivity) {
<!-- The activity has changed. The new activity value is in newActivity. -->
alert('Activity Changed to: ' + newActivity);
});
client.personsAndGroupsManager.mePerson.subscribe();
In the example I’ve used two span labels to show both the Presence and the Activity. You can try
signing in with a Skype for Business desktop client (as the same user) and placing audio calls to see
the presence and activity statuses change.
When you’re done with a subscription you should unsubscribe it, to converse resources. If you don’t,
the server will continue to send you notifications about presence changes – you just won’t be
handling them. Being a good developer and cancelling presence subscriptions you don’t need can
make your application more responsive and make your users happier.
To unsubscribe, call dispose() instead of subscribe(). So to unsubscribe from your own
subscriptions call:
client.personsAndGroupsManager.mePerson.dispose();
The code sample for this day shows all of these separate functions in use together.
Try this out: http://code.skypewebsdk.com/Presence/3-SubscribingToOwnPresenceAndActivities Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Presence/3-SubscribingToOwnPresenceAndActivities/index.htm
Day 6: Getting & Subscribing to Other People’s Presence
We’ve already seen how to get and subscribe to our own presence but you’ll probably also want to
be able to subscribe to other people’s presence as well.
If you think about it you probably won’t have a list of SIP addresses hardcoded in your application
which you want to subscribe to. Instead, that list of people will come from the server, either from a
user’s contact list or search results etc. You do have to use a person object though – you can’t just
supply a SIP address like you can in some other APIs.
We’re going to use a simple search to find a user. We’re going to assume that only one record is ever
returned. The personsAndGroupsManager object contains a way of searching for people easily by
Learn Skype Web SDK in 30 Days 20 Tom Morgan | thoughtstuff.co.uk
providing a string which could be their name or SIP address (similar to how you would search for
someone using the desktop client).
var query = client.personsAndGroupsManager.createPersonSearchQuery();
query.text(searchString);
query.limit(1);
query.getMore().then(function (results) {
results.forEach(function (result) {
// do something with the user(s) here
});
In this example I’ve limited the possible number of results returned to 1, but you can also use this to
implement a user search listing out search results.
The results contain a list of person objects which you can then use for presence (or anything else).
To just grab the presence once you can just read the value of the status:
person.status.get().then(function(presence) {
// do something with the presence
});
You could also subscribe to updates in exactly the same way as you did for subscribing to your own
presence updates:
person.status.changed(function(newStatus) {
// The presence status has changed. The new presence value is in newStatus.
alert('Status Changed to: ' + newStatus);
});
Be aware of doing this subscription inside the for-loop of the results though. If you do, the person
object reference will be lost when the loop finished executing and your events will be lost with it. If
you want to maintain a presence subscription for a user you’ll need to copy the person object to a
longer-lived variable before hooking up to the events.
When you’re done with a subscription you should unsubscribe it to converse resources, in the same
way that you would for subscriptions to your own presence, by calling dispose() on the
subscription.
In the code example for this day I’m only getting the presence once. Adding a simple subscription to
also receive updates is left as an exercise for the reader!
Learn Skype Web SDK in 30 Days 21 Tom Morgan | thoughtstuff.co.uk
Try this out: http://code.skypewebsdk.com/Presence/4-GettingAndSubscribingToOtherPeoplesPresence Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Presence/4-GettingAndSubscribingToOtherPeoplesPresence/index.htm
Day 7: Setting Your Own Presence
We know how to get our own presence but what about setting it? It’s easy!
We can use the same mePerson object that we used to get presence, by passing the new presence
state to the state() method, shown in this example where we set the presence to Do Not Disturb:
var client;
<!-- do sign-in process here -->
client.personsAndGroupsManager.mePerson.state('DoNotDisturb');
You can pass the following presence states. Be aware that they must be typed exactly:
Online
Busy
DoNotDisturb
BeRightBack
Away
OffWork*
*The OffWork state is a slightly odd one because although you can set it, you never see it coming
back as a presence state. When you set it, you see a presence state of Away and an activity status of
off-work.
In the example code for this day I’ve expanded the code from the Get Presence example and added
a drop-down box to allow the setting of presence.
Try this out: http://code.skypewebsdk.com/Presence/5-SettingOwnPresence Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Presence/5-SettingOwnPresence/index.htm
Learn Skype Web SDK in 30 Days 22 Tom Morgan | thoughtstuff.co.uk
Day 8: Setting Your Own Information
As you know it’s not just the presence information you can change in Skype for Business. Some of
the properties in the mePerson object can be set as well as read. These include the Location field and
Note field – sometimes also called the Message of the Day – which is displayed at the top of the
Skype for Business desktop client.
You can set these properties by passing the new value into them:
var me = client.personsAndGroupsManager.mePerson;
me.location("new location");
me.note.text("new note");
Notice how the format for setting the note is slightly different. This is because it’s also used to store
Out of Office notes. See the lesson on Getting Info for more details on this.
In this example, once logged in the Note and Location information is displayed in text boxes which
can also be modified to update Skype for Business. The maximum length of a Personal Note is 500
characters.
If you’re using the Skype for Business client to see these changes it’s best to log in as another user
and then view the contact card of the user you are changing. If you sign in as the same user you
won’t see the Location field updated. This is because location (like presence) is aggregated. You
might be signed into Skype for Business in several places so the server won’t automatically reset
your location everywhere just because you set it in one place.
The code sample for this day demonstrates these functions.
Try this out: http://code.skypewebsdk.com/Presence/6-SettingOwnInfo Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Presence/6-SettingOwnInfo/index.htm
Day 9: Getting & Displaying Contact Photos
In Skype for Business people have photos associated with them so that they can easily be identified.
Often these are administered in Active Directory alongside other information such as job title,
department etc.
In the Skype Web SDK these photos can be accessed. They are a property of the person object which
means they can get accessed with a get() command. The property name is avatarURL. To get the
Learn Skype Web SDK in 30 Days 23 Tom Morgan | thoughtstuff.co.uk
value you would first get a handle to the person object (which can be yourself or another contact)
and then call get() on the property:
person.avatarUrl.get().then(function(value) {
//do something with the photo
});
The return object isn’t the actual photo – it’s a URL describing the photo. For instance, you might get
back this URL:
https://lyncweb.thoughtstuff.co.uk/ucwa/oauth/v1/applications/114079659624/photos/[email protected]
This URL has been crafted together for us by Skype Web SDK (well, actually UCWA but it doesn’t
matter) and if you were to load that in a browser you’d see the image.
This means that you can provide the URL as the source attribute to a HTTP image container you have
created or do something else with it in JavaScript etc. To set it as the source for an image you might
do this:
$('#imgContactPhoto').attr("src",value);
The code sample for this day demonstrates these functions.
Try this out: http://code.skypewebsdk.com/Presence/7-ContactPhotos Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Presence/7-ContactPhotos/index.htm
Learn Skype Web SDK in 30 Days 24 Tom Morgan | thoughtstuff.co.uk
Chapter 4 – Contacts Days 10 to 12
Day 10: Getting the Contact List
One of the things which the personsAndGroupsManager gives us is a full list of all contacts in the
signed-in user’s contact list. This can be useful if you need to represent the contact list on screen, or
want to use it for IntelliSense style searches.
The personsAndGroupsManager has a full list of both groups and users in a user’s contact list,
however, neither will be populated unless you subscribe to the information. To do this register an
event listener for the .added function and then call subscribe(). The listener will be called for each
person that’s added to the collection. For instance, to get a full list of users, this is how you would
register the event listener for when users are added:
Application.personsAndGroupsManager.all.persons.added(function (newUser) {
//do something with the new user here
});
Once you have registered the listener you can then call subscribe():
Application.personsAndGroupsManager.all.persons.subscribe();
You can use exactly the same approach to retrieve a list of groups, by using the groups object
instead of the persons object:
Application.personsAndGroupsManager.all.groups.added(function (newGroup) {
//do something with the new group here
});
Application.personsAndGroupsManager.all.groups.subscribe();
In the code sample for this day the user’s list of contacts and groups are displayed.
Learn Skype Web SDK in 30 Days 25 Tom Morgan | thoughtstuff.co.uk
Try this out: http://code.skypewebsdk.com/Contacts/1-GetContactList Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Contacts/1-GetContactList/index.htm
Day 11: Searching for Users & Groups
The Skype Web SDK provides a means for you to query a user’s contact list for specific contacts or
groups rather than requiring you to download the entire list and then parse it on the front-end. This
means that your application can select individual contacts much easier. For instance, if you’re
writing an application in which you want to display the presence information of a specific contact
(either hard-coded, stored in a database, or entered by the user at run-time) you can pick out just
that single contact and subscribe to their presence.
Searching for contacts and groups is very similar. Both searches require you to specify a maximum
number of return records and a simple text search term, which can be the full or part name of a
contact or group. They both return their results in an asynchronous promise function, getMore().
Both searches are instantiated via the personsAndGroupsManager object. To create a contact query,
create the search object with:
var contactSearch = application.personsAndGroupsManager.createPersonSearchQuery();
for groups it’s:
var groupSearch = application.personsAndGroupsManager.createGroupSearchQuery();
Both of these functions will only work once you’ve completed the login process.
To set up the return limit and search text, for both objects it’s the same (using contact search in
these examples, but swap the contactSearch object for groupSearch for a group search):
contactSearch.limit(10); //only return 10 results
contactSearch.text('bob') //the search term
To actually execute the search, call getMore and then access the results in the return method:
Learn Skype Web SDK in 30 Days 26 Tom Morgan | thoughtstuff.co.uk
contactSearch.getMore(function (searchResults) {
searchResults.forEach(function (item) {
var contact = item.result; //for contacts
var group = item.result; //for groups;
});
});
The code sample for this day shows this in action.
Try this out: http://code.skypewebsdk.com/Contacts/2-SearchingForContactsAndGroups/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Contacts/2-SearchingForContactsAndGroups/index.htm
Day 12: Getting Users in Groups
In the last few sections we’ve looked at how to get lists of contacts and groups. However, sometimes
it’s the structuring of contacts within groups which is important and which you want to display in
your application.
Once you have retrieved a particular group or groups you can then query that group for its
members, using the property persons. This collection isn’t immediately filled however (for
performance reasons) so you can subscribe to items being added to it:
group.persons.added(function (person) {
//do something with the person object
});
It’s worth nothing that if you do this for all groups you may get the same person object returned
multiple times – one for each group that the user is in.
In the code sample below all groups and their users are collated and displayed on the screen. Notice
how relatively slow this action is compared to some of the other functions in the Skype Web SDK.
This is why the SDK is structured to only load the data you need when you ask for it.
Learn Skype Web SDK in 30 Days 27 Tom Morgan | thoughtstuff.co.uk
Try this out: http://code.skypewebsdk.com/Contacts/3-GettingUsersInGroups/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Contacts/3-GettingUsersInGroups/index.htm
Learn Skype Web SDK in 30 Days 28 Tom Morgan | thoughtstuff.co.uk
Chapter 5 - Instant Messaging Days 13 to 19
Day 13: Starting a New IM Conversation
We can use Skype Web SDK to start a new IM conversation with someone. In order to do this, we
need at least one person object representing the person we want to start a conversation with. If you
want to start a group conversation with more than one person then you will need to have multiple
person objects to represent these people. Once we have this we are ready to create the
conversation.
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 Web SDK 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.
Step 1 – Create the conversation Like the rest of Skype Web SDK 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;
//do sign-in process to instantiate application object
var conversation = application.conversationsManager.createConversation();
Step 2 – Add 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 new 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 conversation. Unlike the Skype for Business desktop client you don’t
actually need to send an initial message when beginning a new conversation:
Learn Skype Web SDK in 30 Days 29 Tom Morgan | thoughtstuff.co.uk
conversation.chatService.start();
You won’t see anything happening but the participant should receive an incoming IM popup.
Assuming they accept the popup, the conversation has now started.
Try this out: http://code.skypewebsdk.com/IM/1-StartingConversation/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/1-StartingConversation/index.htm
Day 14: Sending Instant Messages
Once you’ve found the person you want to start a conversation with and set up and started the
conversation – actually sending messages is a one-liner. However the reason that it’s got its own
section is because you can’t just send messages into a conversation once you’ve started it.
A newly created conversation will start Disconnected. When you call start() it will change to
Created briefly before changing to Connecting. Once it’s been accepted by the other party it will
change to Connected. Once one side closes the conversation its state will change back to
Disconnected. You can only send IMs whilst the state is Connected, so you need to monitor this
state.
To monitor the state, register a listener on the state property of the chatService, which is a
member of the conversation object. Do this before you call start() otherwise you’ll miss vital
states:
var application = new Skype.Web.Model.Application;
//do sign-in process
var conversation = application.conversationsManager.createConversation();
//set up the conversation, add participants etc.
conversation.chatService.state.changed(function(newState) {
//evaluate the new state
});
//...
conversation.chatService.start();
Once the state has changed to Connected you can then send messages using this one-liner:
Learn Skype Web SDK in 30 Days 30 Tom Morgan | thoughtstuff.co.uk
conversation.chatService.sendMessage('message to send');
In the code sample for this day, once the user is signed in they can send instant messages to another
user.
Try this out: http://code.skypewebsdk.com/IM/2-SendingIMs/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/2-SendingIMs/index.htm
Day 15: Receiving Instant Messages
Once you’ve created and started a conversation using Skype Web SDK you actually don’t need to
worry about how you’re going to receive IM messages. The SDK will make sure that you receive
messages sent to the conversation. The issue instead becomes one of “how do I found out when
that’s happened?”.
Each conversation has a historyService object. This provides a collection of all messages in the
conversation: incoming, outgoing, joining, leaving. IM messages have a specific type of message
called a TextMessage. By listening for messages of type TextMessage we can pull out instant
messages being sent in both directions.
Of course, you probably already know when you’re sending messages to the conversation, but
having them in the historyService object means that you have one centralised place to watch to
track the conversation. If you’re writing a user interface for an IM conversation it’s much easier to
use the historyService object where messages are delivered in the order in which they happen,
than it is to fake the history when sending, which risks getting the timing wrong.
The historyService contains some useful members to make retrieving and staying up to date with
the conversation easier. The activityItems collection is the actual list of conversation history
items. To react every time something is added to this collection register a listener on
activityItems.added:
conversation.historyService.activityItems.added(function (newMsg) {
//do something with newMsg
});
Objects in the activityItems collection have the following members and methods describing the
conversation item (there are others, but I’ve pulled out the interesting ones):
newMsg.key – a unique GUID which you can use to identify the message
Learn Skype Web SDK in 30 Days 31 Tom Morgan | thoughtstuff.co.uk
newMsg.isRead – a Boolean value. Set to false initially, but you can mark messages as read
to make parsing for new messages easier if needed.
newMsg.direction() – either ‘Incoming’ or ‘Outgoing’ depending on the direction the
message is travelling in
newMsg.text() – the plaintext version of the message
newMsg.html() – an HTML formatted version of the message, in a span tag
newMsg.timestamp() – timestamp of the message
newMsg.sender.uri() – the SIP address of the sender
newMsg.sender.person.displayName() – the display name of the sender, if it’s known. If
not, the URI is shown instead.
You also have access to the entire person object (newMsg.sender.person) which you can use to
subscribe to presence, get more information etc.
In the code sample for this day the signed in user can send and receive instant messages with
another user.
Try this out: http://code.skypewebsdk.com/IM/3-ReceivingIMs/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/3-ReceivingIMs/index.htm
Day 16: Doing More with History Service
If you’ve registered a listener on new activityItems being added then you probably won’t need
anything else but the historyService object also has an unreadActivityItemCount property and a
markAllAsRead() method which you can use to poll for unread messages.
You can also use the historyService to provide rock-solid delivery notification and feedback for a
great user experience when sending messages. When you send a message it goes into the
activityItems collection immediately (with the direction of Outgoing). There is a status property
you can monitor for the outcome of delivery of that message. Initially the status will change to
Pending. Once the message has been delivered it will change to Succeeded, if it can’t be sent it will
change to Failed. There is also a changed() event you can listen on.
We can add this event when evaluating new items being added to the historyService object:
Learn Skype Web SDK in 30 Days 32 Tom Morgan | thoughtstuff.co.uk
conversation.historyService.activityItems.added(function (newMsg){
if (newMsg.type() == 'TextMessage')
{
var direction;
if (newMsg.direction() == 'Incoming')
direction = "<--";
else
{
direction = "-->";
newMsg.status.changed(function (newStatus) {
//do something with newStatus
});
}
}
In this code snippet we’re first checking that the new entry in the historyService is a
TextMessage. After that we evaluate the direction the message is moving in and populate a variable
with an arrow signifying the direction. In a real project you would use this variable to make a
decision about how to display the message, such as a different coloured bubble or different
alignment etc.
For outgoing messages (in the example, messages which do not have a direction of Incoming) we
also register for the changed event on the status of the message. We can use this to provide
feedback to the user about what’s happening with their message.
Try this out: http://code.skypewebsdk.com/IM/4-DoingMoreWithhistoryService/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/4-DoingMoreWithhistoryService/index.htm
Day 17: Sending & Receiving “Is Typing” Notifications
One of the surprisingly useful features of Skype for Business that I found when I started using it is
the “is typing” messages. When the person you’re in a conversation with is typing a message, you
get notification of that in the client. It’s a great way to know that the person is constructing their
answer rather than ignoring you.
Learn Skype Web SDK in 30 Days 33 Tom Morgan | thoughtstuff.co.uk
If you’ve been using the Skype Web SDK and created something which can send and receive
messages you’ll notice the lack of this feature even more. Wouldn’t it be nice if there was an easy
way to include this into your Skype Web SDK projects? Well there is!
The isTyping feature consists of two parts: you sending notification that you’re typing, and reacting
to receiving messages that the remote party is typing. You don’t need to worry about “not typing
anymore” messages: when you send a isTyping message it lasts 5 seconds, the server will
automatically send a “stopped typing” message unless you continue to send isTyping messages.
Stage 1 – sending isTyping messages You need some trigger to start sending the messages. In JQuery, a good starting place would be the
keyup() on a text input box. Assuming you already have a conversation set up, sending the
isTyping notification is as simple as:
$('#someinputbox').keyup(function (){
conversation.chatService.sendIsTyping();
})
That’s it! By binding the call to the keyup() function you’ll ensure that the message is sent each time
a character is pressed, which should be enough to keep the messages reflecting reality.
Stage 2 – receiving isTyping messages This is a little more complicated, but only because the messages are hidden in a hard-to-find place.
The reason for this is that although in our examples we’re only going to be looking at a conversation
between two people, it’s possible to have group conversations and conferences, and the SDK needs
to be able to cope with all scenarios. Therefore, it doesn’t make any sense to have a isTyping
member on the conversation itself, it needs to be on every participant in the conversation.
Previously we saw how to set up a new conversation. Part of that process involved creating a
ConversationParticipant which we then added to the conversation. It’s this participant object
which contains our isTyping message. Luckily there’s a changed() event here as well, making it
fairly easy to react to changes in typing messages. Assuming you’ve already created a participant:
convParticipant.chat.isTyping.changed(function (newState) {
//do something with newState
});
newState is a Boolean signifying whether or not the participant is typing. In designing a user
interface a common approach is to show a message (such as ‘Bob is typing…’) if the value is true, and
to simply hide the message if it’s false.
The code sample for this day is a full example showing this in action.
Learn Skype Web SDK in 30 Days 34 Tom Morgan | thoughtstuff.co.uk
Try this out: http://code.skypewebsdk.com/IM/5-SendingAndReceivingIsTypingMessages/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/5-SendingAndReceivingIsTypingMessages/index.htm
Day 18: Terminating a Conversation
Be a good Skype Web SDK citizen! When your user is done with a conversation, don’t just leave it
open – close it! Open conversations are confusing to the other party, consume server resources and
local resources and will slow down your application. Besides, it’s one of the easiest things you can
do!
If you think back to starting a conversation you’ll recall that having set up a conversation we then
used the chatService member and invoked the start() method. You might have noticed that
there is also a stop() method and assumed that this is how you’d end the conversation.
However, there’s a really important distinction to be made here. Understanding this will really help
you become a better Skype Web SDK developer, especially as you progress to adding voice, video
and desktop sharing.
A Skype for Business conversation is defined as two or more users being connected together so that
they can communicate. However, within that, there are different ways in which they might be
communicating. It might be Instant Messaging (IM), it might be voice, it might be desktop sharing. It
might be a combination of those, or all three of them. These different methods of communication
are called modalities. A conversation is a container for multiple modalities – a conversation might
have one or more modalities, but a modality cannot exist without being in a conversation.
When we call stop() on the chatService, what we’re doing is ending the IM modality, but we’re
not ending the conversation. The conversation is still there, just without the modality. Skype for
Business is deliberately designed this way – so that you can start a conversation using IM, then add
video halfway through, then add desktop sharing, then stop video, then start it again. You don’t have
to start a new conversation each time you want to add a modality: it all happens within the same
one.
If ending the IM modality whilst keeping the conversation open is what you want to do then
chatService.stop() is the right method for you. However if what you really want to do is end the
conversation, there’s another method to use:
conversation.leave();
This will close all modalities in the conversation and correctly terminate the conversation with Skype
for Business. If you’re monitoring the list of conversations handled by the conversationsManager
then you’ll notice that the conversation gets removed from its list using this method (and doesn’t if
you just stop the chatService). This is how you should fully terminate conversations.
Learn Skype Web SDK in 30 Days 35 Tom Morgan | thoughtstuff.co.uk
Remember as well, after a period of inactivity Skype for Business will automatically close down a
conversation. Your application should watch for this (check the conversation state: it will change to
Disconnected) and respond appropriately. Otherwise your user may think the conversation is still
active and continue to send messages which won’t go anywhere. Skype for Business won’t magically
re-open the conversation if you send more messages.
Try this out: http://code.skypewebsdk.com/IM/6-TerminatingAConversation/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/6-TerminatingAConversation/index.htm
Day 19: Receiving a New Conversation
Depending on the Skype Web SDK application you’re building you may need to deal with new
incoming messages. Once you’ve signed in as a Skype for Business user your presence will show as
Available to everyone else and they may decide to IM you. It’s not obvious from the Skype for
Business desktop client that a user has signed in over the web so people may just think that you
have the full capabilities of the Skype for Business client.
Of course, you can just ignore this possibility entirely in which case anyone sending an IM will
receive a timeout message. However, a nicer user experience - even if you don’t intend on handling
incoming messages - is to code for it and reject them; this will give a better experience to the person
sending the message rather than letting it just time out.
When a new conversation request is received by the Skype Web SDK, it is added to the list of
conversations managed by the conversationsManager. By monitoring new conversations being
added here you can then take action when they appear.
You can register an event listener for new conversations being added with the event listener:
var client = new Skype.Web.Model.Application;
//perform sign in
client.conversationsManager.conversations.added(function (newConversation) {
//do something with newConversation
});
Obviously there is only one conversationsManager and if you’re starting your own conversations as
well then conversations will be added and removed from this fairly regularly. There are two
important things you should check for to know whether or not this is an incoming conversation you
need to act on. You should check that you are able to accept the conversation and that the
conversation is in the right state to be accepted.
Learn Skype Web SDK in 30 Days 36 Tom Morgan | thoughtstuff.co.uk
Checking to see whether you are able to accept the conversation is in fact checking the specific
modality you are interested in, to see if it is supported. IM should always be supported, but it’s good
practice to make sure. You do this by checking the value of:
newConversation.chatService.accept.enabled()
Secondly, you should evaluate the state of the conversation. A conversation moves through various
states during its lifetime and checking the current state will make sure you don’t try and accept or
reject a conversation that isn’t ready for it. If the conversation state is Notified then it means that
the conversation is waiting for an invitation decision to be made: i.e. it’s ready to be accepted or
declined:
newConversation.chatService.state() == 'Notified'
Putting the two together gives you:
var client;
//code to instantiate client and perform sign in
client.conversationsManager.conversations.added(function (newConversation) {
if (newConversation.chatService.accept.enabled() && newConversation.chatService.state() == 'Notified')
{
//accept or reject invite
}
});
Actually accepting or rejecting the conversation invitation is easy:
newConversation.chatService.accept();
or
newConversation.chatService.reject();
Of course, in a real-life scenario you might want to display a notification about the new conversation
to the user and let them make the decision to accept or reject. With the event listener shown above
the newConversation object has full information about who is calling (by checking the
participants() object for a list of participants you can easily pull out the caller’s name and photo).
You might also look at JavaScript libraries such as toast.js to provide a familiar toast popup.
The code sample for this day will respond to an incoming IM conversation, allowing it to be accepted
or declined.
Learn Skype Web SDK in 30 Days 37 Tom Morgan | thoughtstuff.co.uk
Try this out: http://code.skypewebsdk.com/IM/7-ReceivingAConversation/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/IM/7-ReceivingAConversation/index.htm
Learn Skype Web SDK in 30 Days 38 Tom Morgan | thoughtstuff.co.uk
Chapter 6 - Audio / Video Days 20 to 25
Day 20: Starting a New Audio Conversation
Starting an audio call using the Skype Web SDK 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 the Skype Web SDK 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 Skype for Business Web
App Plug-in is installed. There are versions available for both Windows and Mac
machines. You can download the plug-in from MSDN at:
https://msdn.microsoft.com/en-us/library/dn986863(v=office.16).aspx.
Step 1 – Create the conversation Like the rest of Skype Web SDK 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 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 new conversation Before you start the conversation you need to tell the conversationsManager about it by adding it
into its list of conversations:
Learn Skype Web SDK in 30 Days 39 Tom Morgan | thoughtstuff.co.uk
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 find this by
subscribing to state change events on the local participant’s 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 straight 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
PluginManager::init - id = __mainPluginManager_e51d94cc_cd85_4263_ab0f_2e7cad9c819b
PluginManager::onPluginObjectState None
PluginManager::init - creating inner object
PluginObject::createInnerObject __mainPluginManager_e51d94cc_cd85_4263_ab0f_2e7cad9c819b_0
PluginManager::onPluginObjectState NotInstalled
PluginManager::cleanupPluginObject
PluginObject::destroyInnerObject __mainPluginManager_e51d94cc_cd85_4263_ab0f_2e7cad9c819b_0
PluginObject::cleanup __mainPluginManager_e51d94cc_cd85_4263_ab0f_2e7cad9c819b_0
AudioVideoSession(cc2e6069-6bb8-46ea-be68-8fa83373942a) State: Connecting -> Disconnected
AudioVideoModality(a5df8786)::state: Connecting -> Disconnected Reason: undefined
Here it’s pretty easy to see that the Plugin isn’t installed.
Learn Skype Web SDK in 30 Days 40 Tom Morgan | thoughtstuff.co.uk
The sample code for this day shows how to start an audio conversation using Skype Web SDK.
Try this out: http://code.skypewebsdk.com/AV/1-StartingAudioConversation/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/AV/1-StartingAudioConversation/index.htm
Day 21: Up-scaling to an Audio Call
Adding audio to an existing call isn’t as hard as it sounds. With Skype Web SDK each modality
(method of communication) is handled separately. Therefore, if you have already set up an Instant
Message conversation you can easily add Audio to the mix by finding the Audio Service (which is part
of the conversation) and starting it. Likewise, you can safely stop it later without worrying about
impacting any other modalities which may be active, such as Instant Messaging.
It really is as simple as:
conversation.audioService.start();
and:
conversation.audioService.stop();
In the example code for this post you start by creating an Instant Messaging conversation. Once that
is established you can start and stop the audio service repeatedly.
Of course, it might be you (or your user) which initiates the audio. Your application needs to be able
to respond to incoming audio requests. Provided you are subscribing to state change events on the
audio of the selfParticipant (which you tend to do anyway to know whether the call has
connected or is disconnected etc) you can do this.
For incoming call requests on an existing conversation the state will change to “Notified”. This
indicates an incoming call request. You can then accept this request to start the audio call, or choose
to reject it:
Learn Skype Web SDK in 30 Days 41 Tom Morgan | thoughtstuff.co.uk
conversation.selfParticipant.audio.state.changed(function (newState) {
if (newState == 'Notified')
{
//either
conversation.audioService.accept();
//or
conversation.audioService.reject();
}
In the code for this day, once the Instant Message conversation has been created, incoming requests
to upscale to audio will show an Accept and Reject button.
Try this out: http://code.skypewebsdk.com/AV/2-UpscalingAnIMConversation/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/AV/2-UpscalingAnIMConversation/index.htm
Day 22: Receiving an Incoming Audio Call
We’ve previously covered how to identify and respond to incoming Instant Message conversations.
Doing the same thing for Audio calls is fairly similar – the only real difference is that instead of using
chatService, instead it’s audioService.
When a new conversation request is received by the Skype Web SDK it is added to the list of
conversations managed by the conversationsManager. By monitoring new conversations being
added here you can then take actions when they appear.
You can register an event listener for new conversations being added with the event listener:
Learn Skype Web SDK in 30 Days 42 Tom Morgan | thoughtstuff.co.uk
var client = new Skype.Web.Model.Application;
//perform sign in
client.conversationsManager.conversations.added(function (newConversation) {
//do something with newConversation
});
Obviously there is only one conversationsManager and if you’re starting your own conversations as
well then conversations will be being added and removed from this fairly regularly. There are two
important things you should check for to know whether this is an incoming conversation you need to
act on. You should check that you are able to accept the conversation and that the conversation is in
the right state to be accepted.
The first thing you need to do is check to see whether this is an audio call which you are able to
accept by evaluating:
newConversation.audioService.accept.enabled()
Secondly, you should evaluate the state of the conversation. A conversation moves through various
states during its lifetime and checking the current state will make sure you don’t try and accept or
reject a conversation that isn’t ready for it. If the conversation state is Notified then it means that
the conversation is waiting for an invitation decision to be made: i.e. it’s ready to be accepted or
declined:
newConversation.audioService.state() == 'Notified'
Putting the two together gives you:
var client;
//instantiate client object and perform sign in
client.conversationsManager.conversations.added(function (newConversation) {
if (newConversation.audioService.accept.enabled() && newConversation.audioService.state() == 'Notified')
{
//accept or reject invite
}
});
Actually accepting or rejecting the conversation invitation is easy:
Learn Skype Web SDK in 30 Days 43 Tom Morgan | thoughtstuff.co.uk
newConversation.audioService.accept();
or
newConversation.audioService.reject();
Because we’ve already done something pretty similar for Instant Messaging I thought this time it
would be more fun to use toastr.js to actually display the incoming alert. This was actually pretty
easy:
var msg = '<div>Incoming Call from ' + conversation.participants()[0].name() + '<br/><button id="btnAccept" class="btn btn-success">Accept</button><button id="btnReject" class="btn btn-danger">Reject</button>';
var $toast = toastr["info"](msg, "Accept");
if ($toast.find('#btnAccept').length) {
$toast.delegate('#btnAccept', 'click', function () {
AcceptConversation();
$toast.remove();
});
}
if ($toast.find('#btnReject').length) {
$toast.delegate('#btnReject', 'click', function () {
RejectConversation();
$toast.remove();
});
}
First I build up the content of toast, containing the name of the caller, and two buttons to accept or
reject the call. Then I call toastr and get a handle to the actual toast object. This causes the toast to
be displayed. Finally, I add the functions for the button clicks to accept or reject the conversation.
Have a look at the example code for this day to see this, including the extra initialising stuff to set
the style etc.
Learn Skype Web SDK in 30 Days 44 Tom Morgan | thoughtstuff.co.uk
Try this out: http://code.skypewebsdk.com/AV/3-ReceivingNewAudioConversation/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/AV/3-ReceivingNewAudioConversation/index.htm
Day 23: Mute, Hold and DTMF Tones
Last time we looked at how to receive incoming audio calls, meaning you can make and receive
audio calls using Skype Web SDK in your browser. Whilst that pretty much is the definition of
nirvana, there is in fact even more you can do with audio.
Looking to the standard Skype for Business client for a moment you’ll notice some features that you
probably use every day without even thinking about it. Muting your microphone for example. Or
putting the call on hold. Or sending DTMF tones to navigate through IVR systems.
The great news is that the Skype Web SDK supports all three of these scenarios and that’s the focus
of today’s section. Why three new features in one section? Because they’re super-easy to pick up!
DTMF (Dual-Tone Multi Frequency) is the noise you hear when you press a keypad
on a phone whilst in a call, and is used to navigate IVR systems, vote in phone
surveys, and even by Skype for Business when dialling in to join a meeting.
According to Wikipedia, DTMF is “an in-band telecommunication signalling
system using the voice-frequency band over telephone lines between telephone
equipment and other communications devices and switching centers. DTMF was
first developed in the Bell System in the United States, and became known under
the trademark Touch-Tone for use in push-button telephones supplied to
telephone customers, starting in 1963.” So, now you know.
Muting To provide a mute button for your users so they can sound off about their customers in private,
simply set the isMuted property of the selfParticipant‘s audio object:
conversation.selfParticipant.audio.isMuted.set(!conversation.selfParticipant.audio.isMuted());
On Hold For longer breaks or to make another call, you can place the current call on hold by setting the
onHold property of the selfParticipant‘s audio:
conversation.selfParticipant.audio.isOnHold.set(!conversation.selfParticipant.audio.isOnHold());
DTMF To send DTMF tones there’s a special method, sendDTMF, which takes the number you want to send:
Learn Skype Web SDK in 30 Days 45 Tom Morgan | thoughtstuff.co.uk
conversation.audioService.sendDtmf("1");
Try this out: http://code.skypewebsdk.com/AV/4-MuteHoldAndDTMF/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/AV/4-MuteHoldAndDTMF/index.htm
Day 24: Starting a New Video Conversation
One step on from Instant Message and Audio calls is Video calling. This allows you to make a real
connection with your end user for offering advice, assistance or just collaborating on a project.
Although at first glance using the videoService seems very similar to the audioService used to
place audio calls there is one important thing to be aware of. With an audio call, once it’s accepted
you know that both sides of the conversation have enabled audio, and so you can plan accordingly.
However, with video it’s possible for one side to start their video, but the other side to choose not
to, and remain as an audio-only caller. Therefore, you cannot blindly assume that just because you
started a video call that the remote participant will have their video enabled. Instead, you can start
your video, and listen for an event for when the remote caller’s video is connected – and then you
can connect to their video stream.
Once you have their video stream you can easily render it on the screen by specifying the div in
which it should appear. The video will resize to fit the div.
In order to make video calls, you need to make sure the Skype for Business Web
App Plug-in is installed. There are versions available for both Windows and Mac
machines. You can download the plug-in from MSDN at:
https://msdn.microsoft.com/en-us/library/dn986863(v=office.16).aspx.
Step 1 – Create the conversation Like the rest of Skype Web SDK 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:
Learn Skype Web SDK in 30 Days 46 Tom Morgan | thoughtstuff.co.uk
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 conversations:
application.conversationsManager.conversations.add(conversation);
Step 4 – Start the conversation You’re now ready to begin the Video Service. Doing this will start your video automatically, which
means that once the call has started you can connect to your video stream and display it in a div of
your choosing:
conversation.videoService.start().then(function () {
//at this point, we know our video is working, so show it in the div
conversation.selfParticipant.video.channels(0).stream.source.sink.container(document.getElementById("divSelfVideoWindow"));
});
Step 5 – Listen for state You want to listen for an event which tells you that the remote participant has also started their
video. You can do this by listening to the stateChanged event on the participant’s video.state:
Learn Skype Web SDK in 30 Days 47 Tom Morgan | thoughtstuff.co.uk
//watch the state of the remote participants video. When it's connected, show it in the div
convParticipant.video.state.changed(function(state) {
if (state == 'Connected')
convParticipant.video.channels(0).stream.source.sink.container(document.getElementById("divRemoteVideoWindow"));
});
As you can see, once the video state is ‘Connected’ you can then connect to the remote video
stream and display it in another div.
Try this out: http://code.skypewebsdk.com/AV/5-MakingVideoCalls/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/tree/gh-pages/AV/5-MakingVideoCalls
Day 25: Listing & Changing Devices
You can make or receive audio and video calls with Skype Web SDK without ever worrying about
what devices are going to be used – by default Skype Web SDK will choose some sensible defaults
for you. However, eventually your users might wonder why they can’t select a different webcam or
you may want to offer them the option of switching between devices.
Preview Code Alert! – At the time of writing, the code on this page didn’t appear
to work with Google Chrome. In addition, when used in Internet Explorer, some
inconsistencies were seen with the list of speakers, with some devices being listed
twice. Expect this to be resolved when the SDK goes to GA – but for now it’s
something you’ll want to be aware of.
The chosen camera, microphone and speaker are managed in Skype Web SDK by the
devicesManager. This object is accessible from the top-level application object, and lets you see:
a list of all cameras, microphones & speakers available to Skype Web SDK
the currently selected camera, microphone & speaker
events when cameras, microphones or speakers are added, removed, or the select device is
changed
the ability to change the selected device
Learn Skype Web SDK in 30 Days 48 Tom Morgan | thoughtstuff.co.uk
Like the rest of the SDK this information is only surfaced when you ask for it and arrives
asynchronously. Therefore, to build up a list of available cameras, you would first listen for the
cameras.added event, then subscribe to the cameras collection:
client.devicesManager.cameras.added(function (newCamera) {
$('#cameras')
.append($("<option></option>")
.attr("value",newCamera.id())
.text(newCamera.id()));
});
client.devicesManager.cameras.subscribe();
You can listen for selectedCamera in exactly the same way. The call to cameras.subscribe will
ensure that the selectedCamera.changed event is also fired.
You can also subscribe to the cameras.removed event to receive notification of when the camera is
no longer available (maybe it’s been pulled out or turned off!). If you’re maintaining a list of devices
in your Skype Web SDK application this information will likely be useful.
To change the current camera you just set the selectedCamera object with the camera object you
want to switch to. It’s that simple!
Listing and Changing using the microphones and speakers objects are done in exactly the same way
with the selectedMicrophone and selectedSpeaker objects.
The code sample for this day lists the currently selected camera, microphone and speaker. All
available devices are also listed in drop-downs and choosing a different device will make that device
the selected device. For simplicity devices being removed isn’t supported in the example (but could
be easily added).
Try this out: http://code.skypewebsdk.com/AV/6-ChoosingDifferentDevices/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/AV/6-ChoosingDifferentDevices/index.htm
Learn Skype Web SDK in 30 Days 49 Tom Morgan | thoughtstuff.co.uk
Chapter 7 – Conferencing Days 26 to 29
Day 26: Creating a Conference
A conference is nothing more than a conversation with more than one person. This is an
oversimplification of course, but it can help to think like this when using Skype Web SDK, because
that is the abstraction it provides.
When using the SDK you can create a conference simply by creating a conversation exactly as you
normally would but then 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 SDK 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 Skype for Business users can use to access the conference. Again, this has a changed
event:
Learn Skype Web SDK in 30 Days 50 Tom Morgan | thoughtstuff.co.uk
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 day, 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 for this day, the user’s list of contacts and groups is displayed.
Try this out: http://code.skypewebsdk.com/Conferencing/1-CreatingAConference/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Conferencing/1-CreatingAConference/index.htm
Day 27: Joining a Conference via URI
You can use Skype Web SDK 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 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 simply call:
conversation.chatService.start();
to join with IM, and/or:
Learn Skype Web SDK in 30 Days 51 Tom Morgan | thoughtstuff.co.uk
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 day for
more information on doing that.
Try this out: http://code.skypewebsdk.com/Conferencing/2-JoiningConferenceByURI/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Conferencing/2-JoiningConferenceByURI/index.htm
Day 28: Listing Participants in a Conference
There are two ways to find out about who is in a conference which you have just joined. The first is
to get a snapshot of the participant list. This can be useful if you need to quickly build up a picture of
who is in the conference, perhaps to build a UI control showing the participants. You can do this by
calling:
conversation.participants
which is a collection of the different participants. For instance,
conversation.participants.size() will tell you how many participants are in the conference.
You can also iterate through each item in the collection and refer to the .person object of each one.
However, to truly make an interactive display you need to know when people join and leave. There
are .added and .removed events which you can subscribe to on the participants object. You should
do this before you join the conference (i.e. before you call start on whatever service you’re using). In
this example I’m using the chatService:
Learn Skype Web SDK in 30 Days 52 Tom Morgan | thoughtstuff.co.uk
conversation.participants.added(function (participant){
$("#lblPartitcipants").append('<li><b>' + "Joined:" + '</b>&nbsp; ' + participant.person.displayName() + '</li>');
});
conversation.participants.removed(function (participant){
$("#lblPartitcipants").append('<li><b>' + "Left:" + '</b>&nbsp; ' + participant.person.displayName() + '</li>');
});
conversation.chatService.start();
For each participant you can also subscribe to their state. Valid values are “Disconnected”,
“Connecting”, “InLobby”, “Connected”, “Disconnected”, “Disconnecting”. You can also read whether
or not they have joined as an anonymous user by using the isAnonymous flag and see their role in
the conference. The role object (valid values are “Attendee”, “Leader”) is settable as well as gettable
– so you can use this to promote or demote attendees, provided you are a presenter in the meeting.
The code sample for this day covers both of these approaches, by giving you an initial count of the
number of participants, then notifying you of each joiner and leaver.
Try this out: http://code.skypewebsdk.com/Conferencing/3-ListingParticipantsInAConference/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Conferencing/3-ListingParticipantsInAConference/index.htm
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 SDK and for lots
of scenarios that makes sense. However for a lot of people the Skype Web SDK 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:
Learn Skype Web SDK in 30 Days 53 Tom Morgan | thoughtstuff.co.uk
This functionality is also possible in Skype Web SDK. 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 successful sign-in (or unsuccessful
error).
Learn Skype Web SDK in 30 Days 54 Tom Morgan | thoughtstuff.co.uk
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 for this day you can join a meeting anonymously and send messages. You
should use this with the example from Day 27 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.
Try this out: http://code.skypewebsdk.com/Conferencing/4-JoiningConferenceAnonymously/ Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Conferencing/4-JoiningConferenceAnonymously/index.htm
Learn Skype Web SDK in 30 Days 55 Tom Morgan | thoughtstuff.co.uk
Chapter 8 – Ready to Go! Day 30 & Extras
Day 30: Putting it all together – where you come in
As we come to the end of this book, I want to take a moment to look back across the different
sections and consider all the great things we’ve been able to accomplish with the new Skype Web
SDK. Although it’s still only in preview we’ve been able to write webpages which allow users to log in
and out, keep their information up to date, manage their contacts, create, host and join conferences
and make and receive both audio and video calls. For an initial release that’s quite a powerful set of
functionality and I think having such a breadth of features will mean that this new SDK enjoys a good
take-up amongst developers.
Of course, in this series we’ve only really been playing about, using each feature in isolation and not
putting them together to form interesting, useful applications. But that’s where you come in – Skype
for Business developers! Now that you’re at the end of these 30 lessons you know about the same as
I do about the Skype Web SDK and you’re in the best position possible to develop something
amazing for the community.
I’m sure you’ll still have questions (I do!) and the SDK is going to evolve as some of features we’ve
been promised (WebRTC support, Sharing support etc.) are added. Of course, I’ll do my best to try
and keep you as up to date as possible, but if you have any questions don’t forget about the MSDN
forums. There is a dedicated forum for this SDK – the MSDN Skype Web SDK forum. That’s a good
place to post your questions but also comments and feature requests.
There are (I think) plenty of good Skype Web SDK applications out there waiting to be written. It’s
my intention to write some more and publish the source code on my blog (thoughtstuff.co.uk) in the
future. However, that won’t be for a little while so I want you to take the lessons, ideas and code
from here today and Go Build! And, if you build something and want to share it with me, I’d be more
than happy to feature it as a blog post or mention it in a future version of this book. Anything that
can help spread the word about Skype for Business Development is good with me, so let me know
what you’re working on!
Good Luck with your next Skype Web SDK project! Let me know how it goes.
Bonus Day - How to: Skype Web SDK Development without
having all the server pre-requisites in place
When I originally released the Learn Skype Web SDK series via my blog there was a common
feedback comment that came up time and again. It went something like this:
Learn Skype Web SDK in 30 Days 56 Tom Morgan | thoughtstuff.co.uk
“Hi. I’d really like to try out this new SDK but I don’t have a lab environment
where I can run Skype for Business and my company won’t upgrade our
production environment, and won’t add my localhost to their allowed domain list,
so I don’t have an environment to use, and well… it’s just not FAIR!”
Well, you’re in luck. What if I told you that Microsoft has built a sandbox environment designed for
developers which you can access from your localhost and use with Skype Web SDK. Interested?
Good, read on…
Using the Sandbox The Sandbox is the same one that was built out for UCWA. You get three user accounts in the same
environment so you can make conversations between those three users.
To get started go to ucwa.skype.com and click Code from the menu at the top. Look for the
Credentials section. You may need to log in if you don’t see any credentials listed. You’re looking for
something like this:
Keep hold of this information for use in a moment. Notice as well that the tokens expire and need to
be regularly renewed.
Using with the Learn Skype Web SDK Samples You can use these credentials with the Learn Skype Web SDK samples in this book, with a small
amount of modification. If you look at any of the code samples from the series you’ll notice the same
HTML code to collect usernames and passwords:
Learn Skype Web SDK in 30 Days 57 Tom Morgan | thoughtstuff.co.uk
<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>
Also, you’ll see the same JavaScript code to sign-in in every sample:
$('#btnLogIn').click(function () {
// start signing in
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
}, function (error) {
//Something went wrong.
alert(error);
});
});
Firstly, let’s replace the HTML with something that collects the domain tokens instead of usernames
and passwords:
Learn Skype Web SDK in 30 Days 58 Tom Morgan | thoughtstuff.co.uk
<div class="form-group">
<label for="domain" class="col-sm-2 control-label">Domain</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="domain" placeholder="metio.net">
</div>
</div>
<div class="form-group">
<label for="token" class="col-sm-2 control-label">Token</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="token" placeholder="Bearer cwt=ABCDE">
</div>
</div>
Now we can modify the JavaScript. The Skype Web SDK SignIn method allows passing of domain
tokens as well as normal usernames and passwords. It does this by using an options collection which
you can use to provide the bearer token as authorisation:
Learn Skype Web SDK in 30 Days 59 Tom Morgan | thoughtstuff.co.uk
$('#btnLogIn').click(function () {
// start signing in
var domain = $("#domain").val();
var access_token = $("#token").val();
var options = {
auth: function (req, send) {
req.headers['Authorization'] = access_token.trim();
return send(req);
},
domain: domain
};
client.signInManager.signIn(options).then(function () {
//log in worked!
alert('Logged in!');
}, function (error) {
//Something went wrong.
alert(error);
});
});
Save and refresh, and the sample should show this instead. (Here I’m using the code from Day 1):
The Domain when using the sandbox is metio.net.
The Token is the full string that you were given in the Credentials section, including the section at
the front which starts “Bearer cwt=”. So, a valid token would be:
Bearer cwt=AAEBHAEFAAAAA...YfFXYIYIdVX1isqD0ggNEPafGCkKskFVn6NvOvBYlbY
Learn Skype Web SDK in 30 Days 60 Tom Morgan | thoughtstuff.co.uk
All being well, you should then be able to log in.
Use with localhost only One thing I’ve found – if you look at normal server pre-requisites for using Skype Web SDK you’ll see
that you have to explicitly list all domains that will connect to the server. The metio.net server has
been set to accept localhost only – so you can’t run it from your custom domain. You can’t use a
custom port (e.g. localhost:8080) either – it has to be port 80. It does look like you can use either
http or https though, which is good.
Try this out: http://code.skypewebsdk.com/Login/Logging%20In%20With%20Bearer%20Token/1 Download the sample code: https://github.com/tomorgan/SkypeWebSDKSamples/blob/gh-pages/Login/Logging%20In%20With%20Bearer%20Token/index.htm
1 This code sample will never work correctly online, because metio.net isn’t configured to allow skypewebsdk.com as an allowed domain. You should download the code and host it locally to use.