Skype Web SDK - Part XIV

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 : Let's Add Video

Video calls have slowly been gaining popularity, and have gone from a novelty to an essential part of some business meetings.  Today's we'll examine how to add the video modality to a P2P call in the Skype Web SDK.

Step 1.  Start with Audio

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 });

As you can see the first 2 lines of code really handle the entire setup of the audio portion.  The rest of the code is there to handle events like the conversation failing to start the audio service, or the conversation being disconnect either by design, or if something went wrong.

Step 2.  Add Video

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 });

Adding video can be done a couple of different ways.  One which I will deal with in a later post, is using the UI controls that are part of the SDK.  The other which is shown above renders the video stream source sink container.

When the conversation has active audio and you are ready to add video you simply start the videoService.  It is a conversation component that is similar to the chatService and audioService, think of each of them as a leg on the chair of your conversation.

Step 3.  End the Conversation

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

When you are done, you can end the conversation.  You can also stop any of the conversation pieces, for example you could stop the videoService, then stop the audioService, which would leave the conversation in IM only mode.

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