Getting Started with the Temasys SDK for Web

A step-by-step guide to embedding Real-Time Communication features into your webapp or website

This document is designed to help developers get started using the Temasys SDK for the Web to add video & voice calling, secure messaging, file sharing and screen sharing features to any website.

Step 1: Create an Account on the Temasys Console and Generate an App Key

Here are instructions for creating an account and generating an App Key. 

Step 2: Include Temasys SkylinkJS  code into your website

    <title>WebRTC with Temasys SkylinkJS</title>
    <script src="//"></script>
    <video id="myvideo" style="transform: rotateY(-180deg);" autoplay muted></video>

Here you have a choice to make.  Use our “Complete” SDK, with all dependencies included, or use the “Library” version if you would like to manage dependencies yourself, with client-side package managers (RequireJS for example). Here is an overview of these files.

In our simple example above, we take the first option and include the complete version in a script tag in the header. The body contains only a video tag, to show your own camera picture later. We used a CSS transform call to mirror the image, so it looks and feels more natural. We muted the audio, so you don’t hear yourself speaking. The autoplay attribute is needed in some browsers where you’d otherwise only see a picture of yourself.

Step 3: Instantiate and subscribe events

Create a new Skylink object and subscribe events using the on() function. Here are the most basic ones you’ll need for a simple audio/video conference.

var skylink = new Skylink();

peerJoined: informs you that a peer has joined the room and shares their peerID and peerInfo with you. In this example, we create a new video element for this peer and use the peerId to identify this element in the DOM of our website.

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 = peerId;

incomingStream: This event is fired after peerJoined when Temasys SkylinkJS begins to receive the audio and video streams from that peer. This peer could also be yourself (the local user) – in which case the event is fired when the user grants access to his microphone and/or camera and joins a room successfully. In this example, we use the attachMediaStream() function of our enhanced AdapterJS library to feed this stream into our previously created video tag in Step 5. Why do we use this function? The different browser vendors have slightly different ways to do this and attachMediaStream() enables us to abstract this.

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

peerLeft: informs you that a peer has left the room. In our example, we look in the DOM for the video element with the events peerId and remove it.

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

mediaAccessSuccess: The user needs to authorize his browser to allow your website access to their camera, microphone or both. Once the user clicks “Allow” in his browser, this event fires and gives us access to the audio/video stream. As you’d guess, mediaAccessError will be triggered if the user declines.

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

Step 4: Initialization and joinRoom

  apiKey: 'Your App key',
  defaultRoom: 'Pick a room name'
  }, function() {
    audio: true,
    video: true

By calling init, SkylinkJS starts establishing a signaling connection with our servers and requires your App key as a parameter. This connection introduces new peers and sends control messages as required for the connection and handshake process between peers. You can also pass a defaultRoom parameter.
joinRoom then tells our servers that you now want to inform the other peers in the room, that you’re joining and you are able to specify the features that you want to have enabled. In this case, we establish both audio and video streams. You don’t need to pass anything if you just want to send chat messages or data streams.

Step 5: Get ready to impress!

You’ve created a simple video conference app. Easy, right? Now explore all the ways that you can real-time interactions to your website. You can find an overview of all the methods and events Skylink offers (like lockRoom, disableAudio or disableVideo) in the API documentation.

Here is another example Codepen that we’ve created that shows how you can create a very simple audio/video conference with JavaScript client-side code, with no additional server code required

See the Pen WebRTC Audio/Video conference demo with Temasys SkylinkJS by Temasys (@temasys) on CodePen.

To further demonstrate the possibilities and flexibility of Temasys SkylinkJS, we have also created a more elaborate demo created with the help of Facebook’s React at Check it out, share it, and use it if you like it.

We hope you’ve enjoyed getting started with the Temasys Web SDK!   Have fun, share this and let us know if you run into any issues!


Leave a Reply

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


No comments yet.