Signaling OpenTok and React

Question

Has anyone implemented sending and receiving signals with opentok-react https://github.com/aiham/opentok-react? I can't find even a simple example on how to do it in React using opentok-react.

Answer 1

Thanks for using opentok-react. Unfortunately an easy way to do signaling hasn't yet been added to opentok-react so the following process is a bit convoluted.

To do signaling you will need to get access to the Session object and call the signal method on it as you normally would (See https://tokbox.com/developer/sdks/js/reference/Session.html#signal).

If you used the OTSession component you can access the Session object by getting a reference to the OTSession element (See https://reactjs.org/docs/refs-and-the-dom.html).

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.otSession = React.createRef();
  }
  render() {
    return <OTSession ref={this.otSession} />;
  }
}

and using its sessionHelper property to call the signal method:

this.otSession.current.sessionHelper.session.signal(...);

If you want to specify a particular target connection for the recipient then you need to get it from the underlying Publisher or Subscriber object's stream property. First get a reference to the OTPublisher or OTSubscriber element :

<OTPublisher ref={this.otPublisher} />
// or
<OTSubscriber ref={this.otSubscriber} />

Then get access to the Connection object:

this.otPublisher.current.getPublisher().stream.connection
// or
this.otSubscriber.current.getSubscriber().stream.connection

I have not tested this but once you have access to the Session and Connection objects then you can use the full signaling capabilities of the OpenTok JS SDK.