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 tom@thoughtstuff.co.uk 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/tom@thoughtstuff.co.uk

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:tom@thoughtstuff.co.uk;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>&amp;nbsp; ' + participant.person.displayName() + '</li>');

});

conversation.participants.removed(function (participant){

$("#lblPartitcipants").append('<li><b>' + "Left:" + '</b>&amp;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:tom@thoughtstuff.co.uk;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.