opentok-react-native

• Pre-Requisites
• Installation
  • iOS Installation
  • Android Installation
• API Reference
  • OTSession Component
  • OTPublisher Component
  • OTSubscriber Component
• Contributing

In this repo, you'll find the OpenTok React Native library:

Pre-Requisites:

1. Install node.js

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

• React Native iOS installation instructions

3. Install and update Android Studio

• React Native Android installation instructions

Installation:

1. In your terminal, change into your React Native project's directory

2. In your terminal, run npm install opentok-react-native

iOS Installation

Note Please make sure to have CocoaPods on your computer.

1. In you terminal, change into your ios directory.

2. Create a pod file by running: pod init.

3. Add the following to your pod file:

    platform :ios, '9.0'

    target '<YourProjectName>' do
      use_frameworks!

      # Pods for <YourProject>
        pod 'OpenTok'
    end

4. Now run, pod install

5. Open XCode

6. Open .xcworkspace file in XCode. This file can be found in the ios folder.

7. Click File and Add Files to

8. Add the following files to the project:

• OTPublisher.h
• OTPublisher.m
• OTPublisherManager.swift
• OTPublisherView.swift
• OTRN.swift
• OTSessionManager.m
• OTSessionManager.swift
• OTSubscriber.h
• OTSubscriber.m
• OTSubscriberManager.swift
• OTSubscriberView.swift
• <YourProjectName>-Bridging-Header.h

9. Click Create Bridging Header when you're prompted with the following modal: Would you like to configure an Objective-C bridging header?

Android Installation

1. In you terminal, change into your project directory.

2. Run react-native link opentok-react-native

3. Open your Android project in Android Studio.

4. Add the following to your project build.gradle file:

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

• It should look something like this:
• 

5. Sync Gradle

6. Make sure the following in your app's gradle compileSdkVersion, buildToolsVersion, minSdkVersion, and targetSdkVersion are the same in the OpenTok React Native library.

API Reference

The OpenTok React Native library comprises of:

• OTSession Component
• OTPublisher Component
• OTSubscriber Component

OTSession Component

The OTSession component manages the connection to an OpenTok Session. It passes the sessionId to the sessionId prop to its child components. To disconnect the session, unmount the OTSession component. To publish and subscribe, you must nest OTPublisher and OTSubscriber inside OTSession:

<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
  <OTPublisher style={{ width: 100, height: 100 }}/>
  <OTSubscriber style={{ width: 100, height: 100 }} />
</OTSession>

OTPublisher Component

The OTPublisher component will initialize a publisher and publish to a specified session upon mounting. To destroy the publisher, unmount the OTPublisher component.

<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
  <OTPublisher style={{ width: 100, height: 100 }} />
</OTSession>

class App extends Component {
  constructor(props) {
    super(props);

    this.publisherProperties = {
      publishAudio: false,
      cameraPosition: 'front'
    };

    this.publisherEventHandlers = {
      streamCreated: event => {
        console.log('Publisher stream created!', event);
      },
      streamDestroyed: event => {
        console.log('Publisher stream destroyed!', event);
      }
    };
  }

  render() {
    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
        <OTPublisher
          properties={this.publisherProperties}
          eventHandlers={this.publisherEventHandlers}
          style={{ height: 100, width: 100 }}
        />
      </OTSession>
    );
  }
}

The properties prop is used for initial set up of the Publisher and making changes to it will update the Publisher. For convenience the OTPublisher watches for changes on a few keys of the properties object and makes the necessary changes. Currently these are:

Please keep in mind that OT is not the same as OT in the JS SDK, the OT in this library refers to the iOS and Android OTSessionManager class.

OTSubscriber Component

The OTSubscriber component will subscribe to a specified stream from a specified session upon mounting. The OTSubscriber component will stop subscribing and unsubscribing when it's unmounting.

Contributing

If you make changes to the project that you would like to contribute back then please follow the contributing guidelines. All contributions are greatly appreciated!