A step-by-step guide to embedding Real-Time Communication features into your 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 (Skip to Step 5 if you have already created an account and generated an App key)
    The Temasys Console is where you’ll be able to create an App Profile and get an App Key.Once you create an account, you will receive a verification email.
    Click the link in the verification email, and then log into the Temasys Console to let the fun begin.
Step 2: Create an App Profile
    Once you’ve logged into the Temasys Console, choose Manage Apps.
    Here you will see the Create App form where you can create your App Profile.
    Add your Application’s name, brief description, related website, the category and how many users you expect to be using your app.
    Click Create.
Step 3: Select the Free Billing Option
    You’ll see a Billing screen with a variety of options, but you don’t need to worry about that right now.
    You can select the Free option while you’re creating and testing your app.
    The Free option, lets you test your code with up to 10 concurrent users and generate 3 associated keys at no charge.
    Click Continue to confirm the Free option.
    Once you’re ready to roll-out your app, you will want to come back to this screen and select the option that best fits your needs.
Step 4: Get an App Key
    Now you’re ready to generate up to 3 App keys.
    Every App key for the Web platform will only work on your specified CORS domain name.
    If you want to have different websites or applications on different platforms (such as Android and iOS) access the same realm and therefore the same rooms, you can create multiple keys under the same application – one for each platform. This extends the scope of the realm to other domains or applications.
Step 5: Include Temasys SkylinkJS  code into your website
<html>
<head>
    <title>WebRTC with Temasys SkylinkJS</title>
    <script src="//cdn.temasys.io/skylink/skylinkjs/0.6.x/skylink.complete.min.js"></script>
</head>
<body>
  <video id="myvideo" style="transform: rotateY(-180deg);" autoplay muted></video>
</body>
</html>

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 6: 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
  vid.id = peerId;
  document.body.appendChild(vid);
});

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);
  document.body.removeChild(vid);
});

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 7: Initialize and joinRoom
skylink.init({
  apiKey: 'Your App key',
  defaultRoom: 'Pick a room name'
}, function() {
  skylink.joinRoom({
    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 8: 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 http://getaroom.io. 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!

ADDITIONAL RESOURCES

 

Share:
Facebook
Facebook
LinkedIn
RSS