WebRTC Screensharing with the Temasys Web SDK (SkylinkJS)

The Temasys SDK for the Web (SkylinkJS) makes sharing your screen with others during a WebRTC video or audio call incredibly simple, fast, and easy to implement. We created a little demo for you to try WebRTC screensharing (or WebRTC Co-browsing) with the Temasys SDK for the Web (SkylinkJS).

Let’s build a simple screensharing-enabled video chat website. Follow the steps below and find out how easy it can be!

Step 1: Include Temasys SkylinkJS inside the <head> of your web page

<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 My Screen</button><br/>
  <video id="myscreen" autoplay muted></video>
</body>
</html>

We are reusing a slightly modified version of our earlier Getting Started Guide example, in order to show you how to share your screen. You can get the full tutorial here.

Step 2: Instantiate Skylink, Subscribe to Events and Initialize

var skylink = new Skylink();

As in earlier tutorial, you need to create a new Skylink object, and subscribe to the necessary events using the on()function.

Once that’s done, you introduce yourself to Skylink with your Application Key, and get the room ID for the new video or audio conference 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 a single function that asks the user which of the open windows on his screen they wish to share. In this case, we call we call shareScreen before we join the room. It is possible to call it anytime during the session, and it will replace an existing camera stream with a stream containing the your shared window, while maintaining the audio stream to go with it.

shareScreen uses the Temasys AdapterJS shim to provide user prompts where it may be necessary to install an extension, plugin or addon, to support screen sharing or when users want to use a WebRTC application using Microsoft Internet Explorer or Apple Safari. When a user does not have the required extension, he’ll see a bar like the one below. This will direct the user to begin the installation process. He’ll have to refresh the page once, but not the entire browser.

Once the installation is complete, the user will need to refresh the web page for things to work properly.

extension installation process
This image illustrates the extension installation process.

Take Note: The screen sharing feature requires the website to run using HTTPS!

There you have it. Try out the code for yourself, and leave us any feedback you might have by going to our community and support portal at https://support.temasys.io.If you don’t have one yet, you can register and get your own App key using our

Need to get your own Temasys Application Key? Log in or Sign up for an account and get started today!

Leave a Reply

Your email address will not be published. Required fields are marked *