Learn Skype Web SDK Day 9 : Getting & Displaying Contact Photos
This is one post in a series of more than 30, devoted to helping you get up to speed quickly with the new Skype Web SDK. Each lesson comes with source code (in GitHub) and a working demo page so you can see what it does. Check out the full list of posts on the Skype Web SDK page.
View Demo
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 Skype for Web API these photos can be accessed. They are a property of the person object, which means they can get accessed with a get() comamnd. The property name is avatarURL. To get the value you would first get a handle to the person object (which can be yourself, or another contact) and then call get() on the property:
person.avatarUrl.get().then(function(value) {
//do something with the photo
});
The return object isn’t the actual photo – it’s a URL describing the photo. For instance, you might get back this URL:
https://lyncweb.thoughtstuff.co.uk/ucwa/oauth/v1/applications/114079659624/photos/[email protected]
This URL has been crafted together for us by Skype for Web API (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);
Here’s a full code sample which demonstrates these functions:
<div class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="username" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogIn">Log in</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogOut">Log out</button>
</div>
</div>
</div>
<div>
<span id="loginStatus"></span>
</div>
<hr/>
<div>
Your Photo: <img id="imgPhoto"></img>
</div>
<hr/>
<div class="form-horizontal">
<div class="form-group">
<label for="contact" class="col-sm-2 control-label">Show Photo for:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="contact" placeholder="Contact SIP Address">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnChangeContactPhoto">Show</button>
</div>
</div>
<div>
<img id="imgContactPhoto"></img>
<script type="text/javascript">
var client;
$(function () {
'use strict';
Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();
// whenever client.state changes, display its value
client.signInManager.state.changed(function (state) {
$('#loginStatus').text("Login State: " + state);
});
}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});
$('#btnLogIn').click(function () {
// start signing in
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
GetOwnPhoto();
}, function (error) {
//Something went wrong.
alert(error);
});
});
$('#btnLogOut').click(function () {
// start signing out
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
}, function (error) {
//Something went wrong.
alert(error);
});
});
$('#btnChangeContactPhoto').click(function () {
GetContactPhoto($('#contact').val());
});
function GetOwnPhoto()
{
var me = client.personsAndGroupsManager.mePerson;
me.avatarUrl.get().then(function (value) {
$('#imgPhoto').attr("src", value);
});
}
function GetContactPhoto (contactSIP) {
var query = client.personsAndGroupsManager.createPersonSearchQuery();
query.text(contactSIP);
query.limit(1);
query.getMore().then(function (results) {
results.forEach(function (result) {
var person = result.result;
person.avatarUrl.get().then(function(value) {
$('#imgContactPhoto').attr("src",value);
});
});
})
}
});
</script>
Demo Online
You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.
Good to Know
- Before you can run this code, make sure you've read my post on all the prerequisites you need to have in place.
- You don't have to copy the code from here - it's all on GitHub!
- If you liked this post, there are more! Check out the dedicated Skype for Web SDK Collection page, or signup to the newsletter
- Need a Skype for Web SDK solution, but not in a position to build yourself? Hire me!
Written by Tom Morgan
Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.
