UNPKG

opentok-react-native

Version:

React Native components for OpenTok iOS and Android SDKs

266 lines (227 loc) 5.78 kB
# Event data You can register event handler functions with the `eventHandlers` property of the OTSession, OTPublisher, and OTSubscriber components: ```javascript class App extends Component { constructor(props) { super(props); this.sessionEventHandlers = { streamCreated: event => { console.log('Stream created!', event); }, streamDestroyed: event => { console.log('Stream destroyed!', event); }, sessionConnected: event => { console.log('Connected to the session!'); }, sessionDisconnected: event => { console.log('Disconnected from the session!'); } }; this.subscriberEventHandlers = { streamCreated: event => { console.log('Stream created!', event); }, streamDestroyed: event => { console.log('Stream destroyed!', event); }, sessionConnected: event => { this.setState({ isConnected: true, }) } }; } render() { return ( <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sesssionEventHandlers}> <OTPublisher eventHandlers={this.publisherEventHandlers}/> <OTSubscriber eventHandlers={this.suscriberEventHandlers} /> </OTSession> ); } } ``` The following sections define the structure of different event objects. ## ArchiveEvent The OTSession object dispatches `archiveStarted` and `archiveStopped` events when an [archive](https://tokbox.com/developer/guides/archiving) starts and stops for a session. The event object has the following properties: ```javascript archive = { archiveId: string, // The archive ID. name: string, // The archive name. sessionId: string, // The session ID. }; ``` ## AudioNetworkStats To get audio data for a subscriber, register an event listener for the `audioNetworkStats` event. The event object has the following properties: ```javascript event = { audioBytesReceived: number, audioPacketsLost: number, audioPacketsReceived: number, timeStamp: number, }; ``` ## ConnectionCreatedEvent You can find the structure of the object below: ```javascript event = { sessionId: string; connection = { connectionId: string creationTime: string, data: string, } } ``` ## ConnectionDestroyedEvent You can find the structure of the object below: ```javascript event = { sessionId: string; connection = { connectionId: string creationTime: string, data: string, } } ``` ## ErrorEvent You can find the structure of the object below: ```javascript error = { code: string, message: string, }; ``` ## SessionConnectEvent ```javascript event = { sessionId: string; connection: { connectionId: string, creationTime: string, data: string, }, } ``` ## SessionDisconnectEvent ```javascript event = { sessionId: string; } ``` ## SignalEvent The OTSession object dispatches a `signal` event when a signal is received. See the [signaling developer guide](https://tokbox.com/developer/guides/signaling/). The event object has the following properties: ```javascript event = { type: string, // Either 'signal' or 'signal:type'. data: string, // The data. connectionId: string, // The connection ID of the client that sent the signal. }; ``` ## StreamCreatedEvent You can find the structure of the object below: ```javascript stream = { streamId: string; name: string; connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object connection: { connectionId: string, creationTime: string, data: string, }, hasAudio: boolean, hasVideo: boolean, sessionId: string, creationTime: number, height: number, width: number, videoType: string, // 'camera' or 'screen' }; ``` ## StreamDestroyedEvent ```javascript event = { streamId: string; name: string; connectionId: string; connection: { connectionId: string, creationTime: string, data: string, }, hasAudio: boolean, hasVideo: boolean, sessionId: string, creationTime: number, height: number, width: number, videoType: string, // 'camera' or 'screen' }; ``` ## StreamPropertyChangedEvent ```javascript event = { stream: { streamId: string, name: string, connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object connection: { connectionId: string, creationTime: number, data: string, }, hasAudio: boolean, hasVideo: boolean, sessionId: string, creationTime: number, height: number, width: number, videoType: string, // 'camera' or 'screen' }, oldValue: any, newValue: any, changedProperty: string, }; ``` ## SubscriberAudioLevelEvent ```javascript event = { audioLevel: number; stream: { streamId: string, name: string, connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object connection: { connectionId: string, creationTime: number, data: string, }, hasAudio: boolean, hasVideo: boolean, sessionId: string, creationTime: number, height: number, width: number, videoType: string, // 'camera' or 'screen' }, }; ``` ## VideoNetworkStatsEvent You can find the structure of the object below: ```javascript event = { videoPacketsLost: number, videoBytesReceived: number, videoPacketsReceived: number, timestamp: number }; ```