/opentok-react-native-samples

Sample applications using OpenTok and React Native

Primary LanguageJavaMIT LicenseMIT

OpenTok React Native Samples

Tokbox is now known as Vonage

These samples demonstrate how to use opentok-react-native to do video-calling in a React Native application.

Contents

In this repo, you'll find:

  • Archiving:

    This sample application shows how to display and hide an archiving indicator when archiving for the session starts and stops. Note that you start and stop archiving using the OpenTok REST API or the OpenTok server SDKs. See the OpenTok Archiving developer guide.

  • Basic Video Chat:

    This sample application shows how to connect to an OpenTok session, publish a stream, and subscribe to multiple streams for both iOS and Android using the OpenTok React Native API.

  • Multiparty:

    This sample application shows how to arrange videos and to toggle the mic and camera in multiparty calls.

  • Signaling:

    This sample application shows how to connect to an OpenTok session and implement OpenTok Signaling to create a text chat for both iOS and Android using the OpenTok React Native API.

  • ScreenSharing:

    This sample application shows how to toggle between publishing a screen-sharing stream and a camera feed stream. Note that the screen-sharing stream shares the entire contents of the screen, so the local publisher and subscriber views are hidden ({width: 0, height: 0}) when publishing the screen-sharing stream (so they don't appear in the published stream).

For details on each sample, see the README.md file in each sample directory.

Pre-Requisites

  1. Install node.js

  2. Install Watchman: brew install watchman

  3. Install React Native CLI: npm install -g react-native-cli

  4. Install and update Xcode (you will need a Mac)

  1. Install and update Android Studio

Setup

  1. Clone this repo.

  2. In your terminal, change your directory to the sample project you want:

  • cd Archiving/
  • cd BasicVideoChat/
  • cd Multiparty/
  • cd Signaling/
  • cd ScreenSharing/

  1. Install the required node modules: npm install

  2. For iOS, install the Podfile's dependencies: cd ios/ && pod install

  3. In the App.js file, set the apiKey, sessionId, and token properties to your Vonage Video API key (project ID), a Vonage Video session ID, and a token for that session.

Development and Contributing

Interested in contributing? We ❤️ pull requests! See the Contribution guidelines.

Getting Help

We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:

Further Reading