Skype Web SDK - Part VII

What is the Skype Web SDK?

The Skype Developer Platform for Web ("Skype Web SDK") is a set of JavaScript Web APIs and HTML controls that enable you to build web experiences that seamlessly integrate a wide variety of real-time collaboration models leveraging Skype for Business services and the larger Skype network. It provides support for multiple core collaboration services like presence, chat, audio, and video, enabling web experiences across a broad spectrum of users, platforms, and devices.



Today's Topic : The AudioService Extending with Video

As we continue to learn how to use the features of the AudioService, this week we'll examine how to enable video on our conversation.  Let's examine how we would do it in an outbound call.  There are 3 steps we will use today to accomplish this.

1.  Establish and outgoing audio conversation

var conversationsManager = application.conversationsManager; conversation = conversationsManager.getConversation('sip:xxx'); conversation.selfParticipant.audio.state.when('Connected', function () { // Connected to Audio }); conversation.participants.added(function (person) { // person.displayName() has joined the conversation }); conversation.state.changed(function (newValue, reason, oldValue) { if (newValue === 'Disconnected' && (oldValue === 'Connected' || oldValue === 'Connecting')) { // conversation ended } }); conversation.audioService.start().then(null, function (error) { // handle error });

2. Add Video to Our Conversation

conversation.selfParticipant.video.state.when('Connected', function () { // set up self video container conversation.selfParticipant.video.channels(0).stream.source.sink.format('Stretch'); conversation.selfParticipant.video.channels(0).stream.source.sink.container(/* DOM node */); // connected to video }); conversation.participants.added(function (person) { person.video.state.when('Connected', function () { // set up remote video container person.video.channels(0).stream.source.sink.format('Stretch'); person.video.channels(0).stream.source.sink.container(/* DOM node */); }); }); conversation.videoService.start(null, function (error) { // handle error });

The thing to note here is the /* DOM node /* area.  This is where we would like the video to display on our source html page.  Make a <DIV> tag with an ID, and this ID is what you put there.  The cool part is with stretch format we are basically filling the video into whatever size DIV we want, which gives us an enormous amount of control as to how the video will look in our page.

If we wanted to show our video as well that can be done in a similar manor;

conversation.selfParticipant.video.state.when('Connected', function () { // set up self video container conversation.selfParticipant.video.channels(0).stream.source.sink.format('Stretch'); conversation.selfParticipant.video.channels(0).stream.source.sink.container(/* DOM node */); });

3. End the Conversation

conversation.leave().then(function () { // conversation ended }, function (error) { // handle error }).then(function () { // clean up operations });

Next week we will examine what to do if we receive an incoming video call.

Doug Routledge, C# Lync, Skype for Business, SQL, Exchange, UC, Full Stack Developer  BridgeOC Bridge Operator Console Twitter - @droutledge @ndbridge