HotBox

HotBox is a React Native wrapper around TokBox OpenTOK SDK.

I tried the other React Native OpenTOK wrappers but they did not seem to work / provide the flexibility we wanted so we created our own.

Installation

iOS

1. yarn add react-native-hot-box or inferiorly npm install --save react-native-hot-box
2. Add the files under node_modules/react-native-hot-box/HotBoxService (In Xcode: File -> Add files to "App Name")
3. You're going to want a bridging header:

#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
#import <React/RCTViewManager.h>

4. You will also want a Podfile:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'Example' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
use_frameworks!
pod 'RxSwift'
pod 'OpenTok'
end

5. Investigate Example for a full example just in case something is missing or open a ticket.

Android

Please open a PR :)

Usage

Something like:

import {Session, PublisherView, SubscriberView} from 'react-native-hot-box'
var session = new Session()
session.on('sessionDidConnect', () => console.log('connected'))
session.on("sessionDidDisconnect", () => console.log('disconnected'))
session.on('publisherStreamCreated', () => console.log("PUBLISHER CREATED"))
session.on('sessionStreamCreated', () => console.log('sessionStreamCreated'))
session.on('subscriberDidConnect', (streamId) => console.log("New subscriber", streamId))
session.on("subscriberDidDisconnect", (streamId) => console.log("Subscriber disconnected", streamId))
session.on('sessionStreamDestroyed', (streamId) => console.log("Stream destroyed", streamId))
let apiKey = ''
let sessionId = ''
let token = ''
session.createSession(apiKey, sessionId, token)

Events

* sessionDidConnect (sessionId)
* sessionDidDisconnect (sessionId)
* sessionConnectionCreated (connectionId)
* sessionConnectionDestroyed (connectionId)
* sessionStreamCreated (streamId)
* sessionStreamDidFailWithError (err)
* sessionStreamDestroyed (streamId)
* sessionReceivedSignal ({type, connectionId, message})
* publisherStreamCreated (streamId)
* publisherStreamDidFailWithError (err)
* publisherStreamDestroyed (streamId)
* subscriberDidConnect (streamId)
* subscriberDidFailWithError (streamId)
* subscriberDidDisconnect (streamId)

Methods

session.createSession(apiKey, sessionId, token)
session.createPublisher() // You can manually create the publisher but by default it's created automatically
session.disconnectAllSessions()
// Turn on/off video stream for given streamId (null for publisher)
session.requestVideoStream(streamId, on)
// Turn on/off audio stream for given streamId (null for publisher)
session.requestAudioStream(streamId, on)
// Flip publisher camera
session.requestCameraSwap(toBack) // toBack==true ==> back camera
//Send messages
session.sendMessage(type, message, connectionId)
session.broadcastMessage(type, message)
//Subscribe to Stream
session.subscribe(streamId)
//Subscribe to signals
session.on(event, handler)

Views

Publisher

<PublisherView style={styles.viewStyle} />

Subscriber

<SubscriberView style={styles.viewStyle} streamId={streamId} />

Example Houseparty Clone

To run:

1. yarn install
2. cd Example/ios & pod install
3. open Example/ios/Example.xcworkspace
4. Add your api key, token and session key in App.js
5. run

Credits

Thanks to my team:

• @george-lim
• @jyliang

Thanks to the following projects for inspiration!

• https://github.com/callstack-io/react-native-opentok
• https://github.com/tokboxnerds/opentok-react-native

Issues?

Feel free to open an issue, submit a PR or email jordan@500labs.com to give feedback / suggestions.