Build WebRTC desktop apps with OpenTok and Electron

Electron and OpenTok WebRTC

TokBox is pleased to announce that with the release of OpenTok.js v2.12, OpenTok now officially supports Electron, allowing developers to build hybrid desktop applications which combine native APIs and web development to create native-like applications.

The Electron Framework

Electron is a popular open-source framework built on top of Chromium and Node.js and is backed by Github. It allows you to create cross-platform applications using JavaScript, HTML, and CSS. Companies like Slack have developed their Mac desktop applications using Electron and also contribute heavily to the Electron open-source ecosystem. As part of our ongoing program to extend OpenTok support to as wide a range of frameworks as possible, we added support for Electron to enable developers to implement real-time communication in their Mac, Linux, or Windows applications.

Who is Electron For?

If you’re a web developer who wants to build a desktop application then Electron is for you because you can get started within minutes without having to learn any other language. However, if you’re a Windows developer then it may be more natural to use the OpenTok Windows SDK and work in C#.

OpenTok and Electron

Building an OpenTok Electron application is almost the same as building a JS web application. However, one of the key points in using OpenTok with Electron is keeping Chromium up to date to ensure that our OpenTok.js SDK fully supports video chatting and features like screensharing. One of the advantages of using OpenTok with Electron is that you don’t need to create a screensharing extension to allow your end-users to share their screen.

To start building the OpenTok Electron sample application, clone the OpenTok Web Samples Github repository.

git clone git@github.com:opentok/opentok-web-samples.git

You’ll notice that the OpenTok sample code for adding a video chat is almost identical to the web sample app code, but with some slight changes such as adding Electron to the application.

Now, install both the OpenTok and Electron libraries by running `npm install` in your terminal.

To connect to a session, publish a stream, and subscribe to a stream, grab your TokBox API Key, Token, and Session from your TokBox account. If you don’t already have an account, you can sign up here.

// Set Credentials
const apiKey = "";
const sessionId = "";
const token = "";

To see the app in action, start the application by running `npm start`

Congratulations! You’ve now created a desktop application with real-time communication. Below, you can see me, top picture, discussing Electron support with one of our server engineers, Madhav, using the OpenTok Electron sample application:

Electron for OpenTok sample app

What’s Next?

At TokBox, we continue to innovate to enable developers to use OpenTok regardless of the platform or framework they’re developing on. As a result, in addition to adding support for hybrid frameworks such as Electron, we are developing a client SDK for macOS. For access to an early version, contact us at sdk-beta@tokbox.com.

If you’re interested in implementing your own messaging and social apps like Slack and Snapchat, check out the following posts: