Skype Web SDK - Part XVIII

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 : Group Video

Group video in the Skype Web SDK is an interesting topic.  The docs devote an entire section to Google Chrome, which now isn't supported for audio or video.  They also rely heavily on the stream source sink methods we have discussed before.  There really isn't any documentation on it, but using the UI Controls, a topic I will hit later in this series is actually a far easier way to handle it.  So here we go.

The DOM way

var conversation = application.conversationsManager.createConversation();

conversation.selfParticipant.video.state.when('Connected', function () { // video is availabe ... lets assign a container. // formats include: 'Stretch', 'Fit' and 'Crop' conversation.selfParticipant.video.channels(0).stream.source.sink.format('Stretch'); conversation.selfParticipant.video.channels(0).stream.source.sink.container(/* DOM node */); // the video will be rendered automatically });

conversation.participants.add('sip:xxx'); conversation.participants.add('sip:yyy'); // starting the video conference conversation.videoService.start().then(null, function (error) { // handle error });

// listener to notify us when conversation ended conversation.state.changed(function (newValue, reason, oldValue) { if (newValue === 'Disconnected' && (oldValue === 'Connected' || oldValue === 'Connecting')) { // Conversation ended } }) conversation.leave().then(function () { // conversation ended }, function (error) { // handle error }).then(function () { // clean up operations });

The UI Control way

var conversation = application.conversationsManager.createConversation();

conversation.participants.add('sip:xxx'); conversation.participants.add('sip:yyy');

api.renderConversation('#content', options).then(function (conversation) {});

As you can see doing it the UI controls way is far easier, especially if people come and go from the conversation.  The reason is, the UI control does all the work and you don't have to render anything on the changes.  The UI controls are fairly new, and frankly have a ways to go before they are ready to be a main part of any application.  But it's hard to argue with the results.  We did a sample run at Inspire on a surface hub, I apologize but most of this photo needed to be heavily redacted.  This example is running entirely in Microsoft Edge.

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