Posted by: Tim Bell Comments: 0

Getting Started with the Temasys SDK for Web

Reading Time: 7 minutes

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

Include Video and Audio Elements in HTML file



WebRTC with Temasys SkylinkJS

Obtain socket.io.js code here. Check that the version is 2.2.0.

Step 4: Import the SDK

i) Import from a path

import Skylink, { SkylinkEventManager, SkylinkLogger, SkylinkConstants } from './path/to/skylink.complete.js'

Obtain the latest Skylink code here.

ii) Include as a script tag with type  as Module

Step 5: Initialise and then listen for events

Instantiate Skylink and init with config

For appKey: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX', use the appKey you generated in the Temasys Console.

Full list of init configuration options here: initOptions

const config = {
appKey: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX',
defaultRoom: 'skylinkRoom',
};

skylink = new Skylink(config);

Declare  joinRoomOptions and pass as argument in joinRoom method. MediaStreams  can be obtained from the resolved Promise

Configure by setting audio: true and video: true to access camera and microphone.

Full list of joinRoom config options here: joinRoomOptions

const joinRoomOptions = { audio: true, video: true, };

skylink.joinRoom(joinRoomOptions)
.then((streams) => {
// if there is an audio stream
if (streams[0]) {
window.attachMediaStream(audioEl, streams[0]);
}

// if there is a video stream
if (streams[1]) {
window.attachMediaStream(videoEl, streams[1]);
}
})
.catch();

Step 5: Subscribing and Unsubscribing to an event

Listen on 'peerJoined' event with isSelf=true for self join room success outcome

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.

SkylinkEventManager.addEventListener(SkylinkConstants.EVENTS.PEER_JOINED, (evt) => {
const { isSelf, peerId, peerInfo } = evt.detail;
if (isSelf) {
// We already have a local video and audio element.
return;
}

const vid = document.createElement('video');
vid.autoplay = true;
vid.id = `${peerId_video}`;
vid.setAttribute('playsinline', true);
document.body.appendChild(vid);

const aud = document.createElement('audio');
aud.autoplay = true;
aud.muted = true;
aud.setAttribute('playsinline', true);
aud.id = `${peerId_audio}`;
document.body.appendChild(aud);
});

Listen on 'incomingStream' event with isSelf=true for self MediaStream

Skylink 2.x incoming stream will be either an audio stream or a video stream but not both.

onIncomingStream: 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 peer) – in which case the event is fired when you grants access to your 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 2. We use attachMediaStream() because the different browser vendors have slightly different ways to do this and attachMediaStream() enables us to abstract this.

SkylinkEventManager.addEventListener(SkylinkConstants.EVENTS.ON_INCOMING_STREAM, (evt) => {
const { isSelf, stream, peerInfo, isVideo, isAudio } = evt.detail;
if (isSelf) {
return; // We already attached our local audio and video streams from the resolved promise in joinRoom.
}

if(isAudio) {
const aud = document.getElementById(`${peerId_audio}`);
attachMediaStream(aud, stream);
}
if(isVideo) {
const vid = document.getElementById(`${peerId_audio}`);
attachMediaStream(vid, stream);
}
});

Listen on 'peerLeft' event to handle peers leaving the room

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. Subscribe to the peer joined event with the code below.

SkylinkEventManager.addEventListener(SkylinkConstants.EVENTS.PEER_LEFT, (evt) => {
const { isSelf, peerInfo, peerId } = evt.detail;
const videoElId = isSelf ? 'myvideo' : `${peerId_video}`
const audioElId = isSelf ? 'myaudio' : `${peerId_audio}`
const vid = document.getElementById(videoElId);
const audio = document.getElementById(audioElId);
document.body.removeChild(vid);
document.body.removeChild(aud);
});

Unsubscribing to events

Unsubscribe to the peer joined event with the code below.

SkylinkEventManager.removeEventListener(SkylinkConstants.EVENTS.PEER_JOINED, peerJoinedHandler);

Logging

Toggle console logging on and off with the setLevel method. For more logger options refer to: SkylinkLogger

SkylinkLogger.setLevel(SkylinkLogger.logLevels.DEBUG, storeLogs);

Step 6: 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 an 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.

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!

ADDITIONAL RESOURCES

Leave a Reply

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