Open Source on GitHub

Screensharing with SkylinkJS

by Thomas Gorissen

SkylinkJS makes sharing your screen with others during a WebRTC conference or call incredibly easy to implement for web developers. Here is a little demo.


Works in Chrome 34+, Firefox 33+ and with a commercial version of our Temasys WebRTC Plugin in IE10+ and Safari 7.1+

Let's run through and build a simple screensharing enabled conferencing website to show how easy it is.

Step 1: Include SkylinkJS into your website

<html>
<head>
  <title>WebRTC screensharing with SkylinkJS</title>



  <script src="//cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.js"></script>
</head>
<body>



  <button onclick="start()">Share screen</button><br/>
  <video id="myscreen" autoplay muted></video>



</body>
</html>

We're reusing a slightly modified version of our earlier Getting Started tutorial to show you how to get it to share your desktop. In case you want to understand it fully, find this previous article here.

Step 2: Instantiate Skylink and subscribe events, initialize

var skylink = new Skylink();

As in the tutorial before, create a new Skylink object and subscribe the necessary events using the on() function. Then introduce yourself to Skylink with your App key and pick the room ID of your call or conferencing session.

skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
  if(isSelf) return; // We already have a video element for our video and don't need to create a new one.
  var vid = document.createElement('video');
  vid.autoplay = true;
  vid.muted = true; // Added to avoid feedback when testing locally
  vid.id = peerId;
  document.body.appendChild(vid);
});



skylink.on('incomingStream', function(peerId, stream, isSelf) {
  if(isSelf) return;
  var vid = document.getElementById(peerId);
  attachMediaStream(vid, stream);
});



skylink.on('peerLeft', function(peerId, peerInfo, isSelf) {
  var vid = document.getElementById(peerId);
  document.body.removeChild(vid);
});



skylink.on('mediaAccessSuccess', function(stream) {
  var vid = document.getElementById('myscreen');
  attachMediaStream(vid, stream);
});



skylink.init({
  apiKey: 'Your App key',
  defaultRoom: 'Pick a room name'
});

Step 3: Share your screen

function start() {
  skylink.shareScreen();
  skylink.joinRoom();
}

shareScreen Is the one simple function that will start the process to ask the user which window he wants to share. In this case we call it before we join the room, but it is possible to call it at anytime during the session and it will replace an existing camera stream with the video of your shared window while maintaining the audio.

It uses our AdapterJS shim to guide the user through the required process of installing whatever extension, plugin or addon is required for his specific browser to enable access to his desktop. In case a user does not have the required extension, he'll see a bar like the one below to walk him through the installation process. He'll have to refresh the page once, but not the entire browser.

Please note: The screensharing feature requires your website to run on HTTPS!

Play around with it and leave us your feedback in our developer chat! We'd love to hear from you. If you don't have one yet, you can register and get your own App key using our Developer Console.

Resources