In Opentok-react-native, how do I get various events information like client connected, disconnected and so on

问题

I have searched a lot but couldn't find any way to find various callbacks in opentok-react-native library like when user has connected, disconnected, reconnecting and so on. I even found the documentation for OTSession where they have described the various events, but these are not working. These all events get called all together.

Video call is working fine, but I want to perform various action depending upon these events

renderVideoView(data) {
console.log("rendering view view,, ", data);

return (
  <View
    style={{
      flex: 1,
      flexDirection: "row",
      backgroundColor: R.Colors.COLOR_VIDEO_BACKGROUND
    }}
  >
    <OTSession
      ref={ref => {
        this.OTSession = ref;
      }}
      connectionCreated={ console.log("connection created")}
      connectionDestroyed={ console.log("connection destroyed")}
      sessionConnected={ console.log("Client connect to a session")}
      sessionDisconnected={
        console.log("Client disConnect to a session")
      }
      sessionReconnected={() => console.log("session reconnected")}
      apiKey={this.apiKey}
      sessionId={data.sessionId}
      token={data.token}
    >
      <OTSubscriber style={{ width: "100%", height: "100%" }} />

      <View style={styles.publisherStyle}>
        <OTPublisher
          properties={{
            publishAudio: this.state.publishAudio,
            cameraPosition: this.state.cameraPosition,
            publishVideo: this.state.publishVideo
          }}
          style={{ width: 90, height: 107, padding: 2 }}
        />
      </View>

      {this.renderViewAtCenter()}
      {this.renderBottomView()}
      {this.renderTopView()}
    </OTSession>
  </View>
);}

回答1:

TokBox Developer Evangelist here.

To set the event listeners via the OTSession component, please use the eventHandlers prop like so:

import React, { Component } from 'react';
import { View } from 'react-native';
import { OTSession, OTPublisher, OTSubscriber } from 'opentok-react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.apiKey = '';
    this.sessionId = '';
    this.token = '';
    this.sessionEventHandlers = {
      connectionCreated: event =>  { 
          console.log("connection created", event);
      },
      connectionDestroyed: event =>  { 
          console.log("connection destroyed", event);
      },
      sessionConnected: event => { 
          console.log("Client connect to a session")
      },
      sessionDisconnected: event => {
        console.log("Client disConnect to a session")
      },
      sessionReconnected: event => {
        console.log("session reconnected")
      },
    };
  }

  render() {
    return (
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <OTSession apiKey={this.apiKey} sessionId={this.sessionId} token={this.token} eventHandlers={this.sessionEventHandlers}>
          <OTPublisher style={{ width: 100, height: 100 }} />
          <OTSubscriber style={{ width: 100, height: 100 }} />
        </OTSession>
      </View>
    );
  }
}

I've also gone ahead and filed an issue on the repo to improve documentation for the OTSession component.

来源：https://stackoverflow.com/questions/54455675/in-opentok-react-native-how-do-i-get-various-events-information-like-client-con

标签

react-native

opentok