If you are looking for a solution that creates the video chatting feature for your React application, and you don’t want to handle everything by yourself. Yap, you’ve got the right place. In this post, we’ll build a very simple React application with tokbox service which is I recommend compared to other services. The demo will focus on explain basic concepts and using react-use-opentok. The library attempt to simply @opentok/client in Hook way.
Let’s see how to implement step by step.
(1) Sign up for tokbox
First of all, you need to register an account of tokbox which provides WebRTC solution for us. It means we don’t need to handle everything underlay by ourself. Before we dive into steps, I like to show you a diagram that explains roughly the flow of OpenTok platform and in this post, we’ll only focus on the client part. If you need more information please read OpenTok docs
The diagram above shows you how OpenTok works. First, we should create a session and token for the attendee who wants to join the session. Most of operations will be interactive with OpenTok platform directly.
To implement for the client, we need to get apiKey, sessionId, and token. In real production, you should get sessionId and toke from your server-side just like the diagram above. But for this demo, we will create it by Project Tools in tokbox dashboard. OK, let’s start.
After verifying your email and create an account name, we can create a project to get apiKey.
Under the project, you can scroll down and find Project Tools. Make sure to generate Session ID with Routed type which OpenTok will provide more features to us. Please make sure that to publish stream the role must be Publisher.
(2) Create react application
$ npx create-react-app demo
$ cd demo(3) Install dependencies
# We'll use CSS-in-JS in this project
$ npm i styled-components# OpenTok related
$ npm i @opentok/client react-use-opentok
For more information please check react-use-opentok.
(4) Initialize and connect to the session
In the OpenTok platform, a session is like a chatting room, a token represents an attendee with the role. All we need to do is connect to the session, publish our stream on it then we subscribe to those people we want to chat with.
Hence, the very first step is to connect to the session. Let’s open our src/App.js
(5) Publish streams
Now, we connected to the session. The next step is we should publish our stream to the session either sharing a screen, camera. Then other attendees in the same session can subscribe streams to complete communication.
The options above is referenced to OpenTok API. The element is id of element or the element itself such as the value of document.getElementById.
(6) Subscribe streams
Finally, we can subscribe to streams in the session. In this demo, we just simply list streams and subscribe to one of them. In the real world, you usually have to handle connections and signal events to create one on one chatting, or subscribe to every stream in the session to complete multiple chatting. The options params in subscribe is referenced to docs
Conclusion
It’s a very simple post that introduces basic concepts with OpenTok and react-use-opentok. The library extracts the most important API in React Hook style. You can easily get connections, streams, everything you need in opentokProps, methods in opentokMethods too. About parameters of methods, you can check OpenTok API documents. The library stays in the very beginning stage, please feel free to leave PR or issues in Github.
Update — 2020/04/06
After use the library in real and slightly complex production, we change some API and signature of functions. The code above already updated, thanks Andreas Heissenberger
