Building a Snapchat-like app with WebRTC in the browser

Building a Snapchat-like app with WebRTC in the browser

In light of the recent Snapchat IPO I thought it would be interesting to see whether it is possible to build a Snapchat-like app using WebRTC in a browser. The good news is that thanks to some new features in modern browsers (Firefox and Chrome) the answer to that question is yes!

To see a demo of my app running go to http://aullman.github.io/snapchat-killer . You can see the source code at https://github.com/aullman/snapchat-killer

Note: this app only really works properly on Chrome and Firefox for the Desktop.

Read More

Introducing the Windows SDK for the OpenTok Platform

Windows SDK for the OpenTok PlatformToday we’re rolling out our new Windows SDK into public-beta. This means that you can build live video applications and services that work seamlessly across iOS, Android, Web and Windows desktops, laptops, and tablets. With this, TokBox is continuing to broaden our endpoint flexibility for our customers and partners.

SDK Features

The Windows SDK has all the great features that you’ve come to expect from the OpenTok Platform. In addition to being fully interoperable with all our existing client SDKs, it also includes support for:

  • C# API for Windows C# developers
  • .NET 4.6.1
  • OS versions: Windows 7, Windows 8.x and Windows 10
  • x86 and x64 architectures
  • Custom video capturer
Read More

Innovation in the City – Video Hack Day NY 2017

Innovation at Video Hack Day 2017

On Saturday March 11th, TokBox joined Ziggeo to co-host the third annual Video Hack Day at General Assembly in New York City. The one-day hackathon event saw creative web and mobile developers from the New York area and beyond come together and use the latest video technologies to rapidly build innovative and exciting applications.

Successful Innovation

By all accounts, the event was a resounding success, with over 100 ‘hackers’ submitting projects that ranged from highly practical civic solutions to online dance party platforms (which is not to say that dance isn’t practical). With a tight window of around 10 hours to complete a fully demo-able product, the participating teams were pushed to their limit, and the results were more than impressive.

Read More

TokBox Extends Reach of Interactive Broadcast to Millions

OpenTok Interactive Broadcast APILast year TokBox introduced the OpenTok Interactive Broadcast API. Ours became the first platform to marry the real-time capability of WebRTC with the reach of HTTP Live Streaming (HLS). The Interactive Broadcast API is helping our customers build large-scale interactive video experiences including live online auctions, Massive Open Online Courses (MOOCs), webinars, social apps and more.

Over the past 6 months we’ve continued to innovate in the broadcast space, pushing the boundaries of performance while ensuring massive scale. Today we’re proud to announce major enhancements to our Interactive Broadcast API.

Read More

Introducing Video Chat Embed: Easiest Way to Demo the OpenTok Platform

At TokBox we’re always trying to find ways to improve your development experience. We pride ourselves on offering clear documentation, helpful tutorials and tools to accelerate the integration of OpenTok. We don’t plan on stopping there. 

Now, with the Video Chat Embed, you can take your proof of concept from zero to sixty with a simple copy and paste.

Why is this so powerful? As the market and demand for live video communications grows, two trends are emerging. First, developers with varied coding skill levels want to build with WebRTC. Second, developers want to be able to show off a proof of concept quickly. Enter the Video Chat Embed.

To get started simply login to your TokBox account, click “Video Chat Embeds” in the left navigation and “Create New Embed”.

OpenTok Video Chat Embed setupMake a few configuration choices for your Video Chat Embed – specify what size you would like the frame to be and what website your project will be embedded into. We’ll then generate code for you that can be added to your website in a matter of minutes.

 

Read More

What to do with all these (get)Stats?

tokbox-inc_markMany of our partners eventually find themselves asking how to tell whether their users tend to experience good quality while using the OpenTok Platform. As time has taught us, this can be a difficult question to answer. The most common source of complaints stem from underwhelming audio/video (A/V) quality between endpoints. These complaints are nearly always rooted in issues with performance of the endpoint network. The correlation between network performance and A/V quality has been accepted as an industry standard. In fact, we have built tools to expose network performance data, as a proxy indicator of subjective quality. While objective data about a network may be easy to collect, it is much more difficult to assign a number to represent the quality of experience that a user subjectively experiences.

Read More

Introducing Automatic Reconnection on the OpenTok Platform

tokbox-inc_markMobile applications are rapidly becoming the primary channel through which people get things done. At the same time, user experience expectations for mobile applications far exceed expectations for applications delivered through other channels. Users expect value, ease of use and a delightful experience, but too often their expectations are not met.  This is only exasperated in applications with a real-time communication component. Our customers are not immune to this trend; an increasing number of them are building applications with a mobile-first strategy and it is becoming a significant part of the traffic that we see on our platform. In fact, more than 60% of the traffic we see on OpenTok is from customers using our Mobile SDKs.

Read More

New in iOS 10: The Best WebRTC Apps Yet

ios_screenshotToday, it is easier than ever to get involved in real-time communications, using WebRTC. For those considering investing in a mobile strategy, the technology ecosystem has never been more ripe for rapidly integrating WebRTC into your application, or even starting a project afresh. Using existing build tools like Cocoapods to get started quickly with the OpenTok iOS SDK, and the new CallKit framework introduced in iOS 10, now is the best time to jump in and start building.

Read More

JWT – The New Authentication Scheme for OpenTok REST Endpoints

We have been working on a new standards-based alternative to authenticate with the OpenTok REST endpoints. With the release of the latest OpenTok Server SDKs, we will be transitioning to JSON Web Tokens (JWT) to authenticate OpenTok REST endpoints.

Why JWT?

  1. Standards-based encoding, decoding and verification.
  2. They do not expose the private secret of the partner.
  3. They are lightweight and can be attached to HTTP headers easily.
  4. JWT are self-contained,  such that each token is equipped with all the information needed for the authorization process including the expiration time and the issued time of the token.
  5. Since JWT are transferred over JSON you can use them with multiple languages. There are JWT libraries available for most languages, and there are a range of choices.
  6. They are extensible and allows the token to carry new data, making it easier to future-proof.

All of this not only makes authentication more secure, but also simplifies the developer’s workflow.

There are a lot of great resources available to find out more about JWT so we recommend reading more.

JWT in Action

We know there many benefits of using JWTs so now let’s see them in action with OpenTok REST endpoints.

Each request will require a new token. This token should be sent as the value in an HTTP header named “X-OPENTOK-AUTH”.

An encoded JWT is easy to identify. It is three strings separated by a ” . ”

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOjEyMzQ1LCJpc3QiOiJwcm9qZWN0IiwiaWF0IjoxNDcyNjkxMDAyLCJleHAiOjE0NzI2OTEzMDJ9.m-x54n9EoNZaiCVmBWyaDsOstR4asCXjc7atEBCTHLU

Each of the three parts are created differently. In order, they are called:

  • Header

  • Claims

  • Signature

Header

The header carries 2 parts:

  • Type of the token, which is JWT
  • The hashing algorithm to use (OpenTok only supports HMAC-SHA256  as the token signing algorithm.)
typ: “JWT”
alg: “HS256"

The header is base64 encoded which results in:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

Claims

The claims will carry the bulk of our JWT, also called the payload. This is where we put the information that we want to transmit and other information about our token.

When calling OpenTok REST endpoints the required claims are listed below:

  • iss: The issuer of the token (in our example this is API Key such as “12345”)
  • ist: The issuer type (in our example this is string constant “project”)
  • iat: The iat claim indicates a UNIX timestamp at which the JWT was issued. It is useful to determine the age of the JWT.
  • exp: The exp claim is a UNIX timestamp indicating when the token will expire. The OpenTok REST endpoint verifies the exp against its system clock, plus some allowable clock skew. The expiration MUST be after the current date/time and cannot be longer than the max token lifetime, which is 5 minutes (300 seconds). We recommend using exp time 3 minutes.
iss:  12345,
ist: "project",
iat: 1472691002,
exp: 1472691302

The claims is base64 encoded which results in:

eyJpc3MiOjEyMzQ1LCJpc3QiOiJwcm9qZWN0IiwiaWF0IjoxNDcyNjkxMDAyLCJleHAiOjE0NzI2OTEzMDJ9

Signature

The final and, possibly, the most important part of the JWT is the signature. It is a hash made up of three components:

  1. Header
  2. Claims
  3. Secret (API Secret)

Using the header and claims strings combined we pass them through an HMACSHA256 function with API Secret.

Our signature looks as follows:

m-x54n9EoNZaiCVmBWyaDsOstR4asCXjc7atEBCTHLU

Now we have got all three parts of our JWT. Combining the three parts, we get:

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOjEyMzQ1LCJpc3QiOiJwcm9qZWN0IiwiaWF0IjoxNDcyNjkxMDAyLCJleHAiOjE0NzI2OTEzMDJ9.m-x54n9EoNZaiCVmBWyaDsOstR4asCXjc7atEBCTHLU

Here is the code snippet you can use to create tokens.

var jwt = require('jsonwebtoken');

const secret = 'secret'; //Replace this with your OpenTok API Secret
var token = jwt.sign({ iss: 12345, //Replace this with your OpenTok API Key
 ist: "project",
 iat: Math.floor(Date.now() / 1000), // e.g. 1472691002
 exp: Math.floor(Date.now() / 1000) + 300 // e.g. 1472691302
 }, secret);

console.log('Token: ' + token);

// decode
var decoded = jwt.verify(token, secret);
console.log('Decoded: ' + decoded);

Instruction on running this code: Save the code as a .js file and from the terminal run command npm install jsonwebtoken — save (assuming you have node and npm installed) and then run node fileName.js

JWT.io is great site to go through and test out how JWTs are made. The website provides great tools for decoding and encoding of the tokens, as well as a list of open source libraries you can use to generate JWT.

Conclusion

We are very excited to move our current authentication scheme to JWT, which are standard for token authentication used by many companies such as Facebook, IBM and Google.

The adaptability of the JWT will allow you to securely authenticate the OpenTok REST APIs quickly and easily without having to worry about passing sensitive information.

Partner authentication will be replaced by a single type of authentication scheme JWT. This also means that we are deprecating Partner Auth. Our Server SDKs have added the support for JWT. Please note that we will continue to support the deprecated authentication schemes until July 2017 to give you enough time to transition to JWT.

Read More