Building a Simple Video Streaming App using OpenTok and React Native

Building a mobile application could be challenging particularly when you want to do something that many users haven't attempted doing. This is because React-Native API is just a couple of years old and you can't expect it to be mature in all aspects. Users are always ready to accept and adapt to these challenges and ensure the development process is as simple as possible.

In the guide here we undertake an experiment to build a straightforward mobile application that will allow users to live stream their mobile camera via OpenTok and React Native. The steps below will guide you through the process of integrating openTok with React Native. Let's get started!

A word about streaming in React Native

React Native, as you might already know, is a platform developed by Facebook for building Native mobile application on Android & iOS. Video streaming is an important aspect that a modern-day mobile application should cover. Here are some of the features that you'd expect from a streaming platform/library.

• Live streaming and playback support.
• Selection of audio and text tracks with captions
• Generating captions on the fly
• Configurable rate & quality (increase or decrease the quality).
• Audio playback even when the app is running in the background.
• External playback.
• Support for both iOS and Android devices.

You can create one from scratch or use existing libraries and platforms that work with React. If you're doing this for the web, you could use the HTTP live streaming feature and a HTML5 video player. Alternatively, you can use libraries for HTTP live streaming and video playback like Videojs, Cloudinary, hls.js etc. with React.

However, this technique might be rather cumbersome with native applications. That's where platforms like OpenTok are handy.

OpenTok is an open-source video platform based tool provided by the TokBox community. It helps to integrate high-quality audio and video streaming with the web and your mobile apps.

OpenTok makes use of WebRTC technology for these audio and video-based communications. It supports web, iOS, Windows and Android apps.

Setting Up an OpenTok Account

After you have registered your OpenTok account, you are free to create a new project for your react based native mobile app.

A test session and tokens for the project can be created via the OpenTok dashboard. Using these tokens and session ID, initiating a live stream is a relatively simple process.

Before starting the stream using your camera, you should keep in mind the following OpenTok basics:

1. OpenTok video streaming is initiated by session. These are hosted on the OpenTok-based cloud. Each session comes with its unique session ID. These session IDs assist multiple clients in connecting to specific sessions when streaming.
2. Publish – As a client device connects with a session, it can publish an audio-video stream to the session. With the help of a Publisher Token, users can grant permission to a client device to post to the session. This enables sessions between one or two limited publishers but one-to-many subscribers.
3. Subscribers – After a client's device is connected to a session, the device can subscribe to an audio or video stream of its choice that is being published by other clients within that session. This is done using the Subscriber Token.

To know more about the fundamentals of OpenTok, you can refer to the OpenTok official developer documentation.

Integrating Video Streaming with React Native

OpenTok platforms provide SDK for many clients including Android, Windows, and iOS. React native apps have no official SDs of their own.

The CallStack community had earlier developed an open source, react native wrapper designed for OpenTok known as react-native-opentok. It has fast established itself as among the de-facto wrappers for OpenTok.

Listed below are some of the steps to be followed to integrate an OpenTok session within a React Native app for iOS and Android.

Install react-native-opentok

The 'react-native-opentok' plugin is built by integrating native 'opentok SDK's' with JavaScript. This can be installed using 'npm' or 'yarn' as illustrated below –
 

yarn add react-native-opentok

iOS Integration

By making use of CocoaPods, react-native-opentok plugins can be easily integrated with the native react application. In the example below, the 'RNOpenTok' pod is being added. This is what the Podfile would like –

    source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'

target 'TokBot' do
  node_modules_path = '../node_modules'

  pod 'yoga', path: "#{node_modules_path}/react-native/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: "#{node_modules_path}/react-native"

  pod 'RNOpenTok', path: "#{node_modules_path}/react-native-opentok/ios"
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

Android Integration

When working with Android, 'react-native-opentok' can be automatically linked using the following command –

react-native link react-native-opentok

Users also have the option to add and update opentok maven repo to their 'android/build.gradle' using the code snippet below –

allprojects {
    repositories {
        ...
        maven { url "http://tokbox.bintray.com/maven"}
    }
}

Users can configure their manifest file with the help of 'OPENTOK_API_KEY' and the following permissions –

<meta-data android:name="OPENTOK_API_KEY" android:value="" />
....
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BROADCAST_STICKY"/>

Writing Code for the Components

This is a primary application that provides a simple method to explore using the OpenTok SDK. This app provides users with most core functionalities including –

1. Connecting to a session
2. Publishing audio and video streams within a session
3. Subscribing to audio and video streams within a session

The demo application has two main components – Publisher and Subscriber. This allows a user to publish via a session or a different user using the same session and subscriber ID to join a session and watch a live video.

As users connect to an OpenTok session within an app, they can specify the session they wish to join by using an OpenTok session ID in conjunction with a Publisher and Subscriber ID.

Publisher Component

A Publisher component is used to live stream the camera from the client's device in real time. The code below has the publisher component for a specific session -

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity,Dimensions } from "react-native";
import OpenTok, { Publisher,Subscriber } from 'react-native-opentok';

const sessionId = 'YOUR_OPENTOK_SESSIONID';
const token = 'YOUR_OPENTOK_PUBLISHER_TOKEN';

export default class Publish extends Component<{}> {

  async componentWillMount() {
    await OpenTok.connect(sessionId, token);
    OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));
  }
  
  ref: Ref<typeof Publisher>;
  
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:0.9}}>
          <Publisher
            sessionId={sessionId}
            mute={this.state.isAudioMute}
            onPublishStart={() => { console.log('Streaming Started')}}
            onPublishStop={() => { console.log('Streaming Stopped')}}
            onPublishError={() => { console.log('Streaming Error')}}
            style={{backgroundColor: 'black',height:height, width: width,  }}
            ref={ref => {
              this.ref = ref;
            }}
          />
        </View>
        ...
    );
  }
  cancelAndBack(){
    OpenTok.disconnect(sessionId)
    this.props.navigation.goBack()
  }
};

In the Publisher component example above, the following properties and methods are used –

1. connect (sessonId: string, token: string): This is used by users to connect to a specific session via a session ID and a publisher token
2. disconnect (sessionId): This disconnects the client's user from a particular session using the sessoinId.
3. mute: This is used to allow users to publish audio and video. This is set to 'False' by default.
4. onPublishStart(): Invoked when a publishing action starts.
5. onPublishStop(): Invoked when a publishing action is stopped.
6. onPublishError(): Invoked when an error occurs during publishing.

Viewer Component

A subscriber component allows a user to join a specific live stream via a Subscriber token and a Session ID. Have a look at the example below –

import React, { Component } from "react";
import { StyleSheet, Text, View, TouchableOpacity,Dimensions } from "react-native";
import OpenTok, { Subscriber } from 'react-native-opentok';

const sessionId = 'YOUR_OPENTOK_SESSIONID';
const token = 'YOUR_OPENTOK_SUBSCRIBER_TOKEN';

export default class Viewer extends Component<{}> {

  async componentWillMount() {
    await OpenTok.connect(sessionId, token);
    OpenTok.on(OpenTok.events.ON_SIGNAL_RECEIVED, e => console.log(e));
  }
  
  ref: Ref<typeof Viewer>;
  
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:0.9}}>
         <Subscriber
            sessionId={sessionId}
            onSubscribeStart={() => { console.log('Watching started')}}
            onSubscribeStop={() => { console.log('Watching paused')}
            onSubscribeError={() => { console.log('Error occured')}
            style={{backgroundColor: 'black',height:height, width: width,  }}
            ref={ref => {
              this.ref = ref;
            }}
          />
        </View>
        ...
    );
  }
  cancelAndBack(){
    OpenTok.disconnect(sessionId)
    this.props.navigation.goBack()
  }
};

Footnote

We should now have a simple cross-platform mobile application that can perform live streaming. With the help of this app, users will be able to connect to a session and publish their streams as well as subscribe to the stream.