CODEWITHSUNDEEP
javascriptreactjsopentoktokbox
Hiram Hibbard
Hiram Hibbard

Reputation: 537

Signaling OpenTok and React

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.

Upvotes: 2

Views: 1880

Answers (4)

Adebayo Ilerioluwa
Adebayo Ilerioluwa

Reputation: 339

In addition to @aiham answer, You can access the Opentok session Object getting the ref from the OTSession element and then send signals like below

 otSession.current.sessionHelper.session.signal(
  {
    type: "msg",
    data: text,
  },
  function(err, data) {
    if (err) {
      console.log(err.message);
    } else {
     console.log(data)
    }
  }
);

And signals can be received by adding a listener as follows;

 otSession.current.sessionHelper.session.on("signal", (event) => {
  console.log("i got", event);
});

Upvotes: 0

Michael Reyes
Michael Reyes

Reputation: 86

Here's a way to do this using functional component syntax.

import React, { useRef } from 'react';
import { OTSession, preloadScript } from 'opentok-react';

function MyComponent() {
  const sessionRef = useRef();

  const sendSignal = () => {
    sessionRef.current.sessionHelper.session.signal(
        {
            type: 'TheSignalType',
            data: 'TheData',
        },
        function (error) {
            if (error) {
            console.log('signal error: ' + error.message);
            } else {
            console.log('signal sent');
            }
        }
    );
  };

  return (
    <OTSession ref={sessionRef} apiKey={apiKey} sessionId={sessionId} token={token} eventHandlers={eventHandlers}>
      // rest of your tokbox code here
      <Button onClick={sendSignal}>Send Signal</Button>
    </OTSession>
  );
}

export default preloadScript(MyComponent);

Upvotes: 0

Vishnu8429
Vishnu8429

Reputation: 104

I Created a npm package 'opentok-rvc' with reference to opentok-react. Here i created a listener to watch signaling and if any signal gets i send the signal to another event

// signal message listener inside npm package
session.on('signal:msg', function signalCallback(event) {
    console.log(event);
    onSignalRecieve(event);
});

Inside your component, please do the following

// to send the opentok signal
// here param data can be object for eg:
// data = { type: 'START_VIDEO_CALL', data: 'By Alex' }
onSignalSend = (data) => {
    if (this.otSession.current !== null) {
        this.otSession.current.sessionHelper.session.signal({
            type: 'msg',
            data: data
        }, function signalCallback(error) {
            if (error) {
                console.log('onSignalSend Error', error)
            } else {
                console.log('onSignalSend Success', data)
            }
        })
    }
}

// to receive the opentok signal
onSignalReceive = (signal) => {
   console.log('onSignalReceive => ', JSON.parse(signal.data));
   // based on signal data type you can do use switch or conditional statements 
}


<OTSession
    ref={this.otSession}
    apiKey={apiKey}
    sessionId={sessionId}
    token={token}
    onError={this.onSessionError}
    eventHandlers={this.sessionEventHandlers}
    onSignalRecieve={this.onSignalReceive}
    getDevices={this.setDevices}
    onMediaDevices={this.onMediaDevices}
    checkScreenSharing={this.checkScreenSharing}>

    <OTPublisher properties/>
    <OTStreams>
        <OTSubscriber properties/>
    </OTStreams>

Upvotes: 0

aiham
aiham

Reputation: 3614

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.

Upvotes: 8

Related Questions