Introduction to WebRTC Screensharing with the Temasys SDK for the Web (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. To get you started, we created a little demo for you to try WebRTC screensharing with the Temasys SDK for the Web (SkylinkJS).

First, take a look at the CodePen Screensharing with Temasys SkylinkJS, by Temasys (@temasys).

Now you can try it, too. 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 in the <head> of your web page

<html>
<head>
  <title>WebRTC screensharing with the Temasys SDK for the Web (SkylinkJS)</title>

  <script src="//cdn.temasys.io/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 are reusing a slightly modified version of our earlier Getting Started Guide example, in order to show you how you can share your screen. You can review 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 f0r 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

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!

Share:
Facebook
Facebook
LinkedIn
RSS