Signaling OpenTok and React

opentok-react
opentok-react style
opentok-react typescript
opentok github
tokbox react github
opentok react native
opentok signalling
tokbox react example

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.

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.

Signaling, Use the OpenTok signaling API to send text and data between clients connected to an OpenTok session. For conceptual information on the OpenTok signaling� The OpenTok Signaling API allows developers to send messages from one OpenTok endpoint to another. One of the most common use cases for the Signaling API is a text chat. Below, we’ll walk through how to build a text chat for both iOS and Android applications using React Native.

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>

Signaling, Has anyone implemented sending and receiving signals with opentok-react https ://github. This sample application shows how to connect to an OpenTok session and implement OpenTok Signaling to create a text chat for both iOS and Android using the OpenTok React Native API. Pre-Requisites. Install node.js. Install Watchman: brew install watchman. Install React Native CLI: npm install -g react-native-cli

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);

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� Use the OpenTok signaling API to send text and data between clients connected to an OpenTok session. For conceptual information on the OpenTok signaling API, see the Signaling overview developer guide. This topic includes the following sections: Sending a signal to a specific client in a session; Sending a signal to all clients in a session

opentok-react, here opentok video session can get by this.otSession = React.createRef();. so using this you can send signal to other users in video chat. Use the OpenTok signaling API to send text and data between clients connected to an OpenTok session. For conceptual information on the OpenTok signaling API, see the Signaling overview developer guide. This topic includes the following sections: Sending a signal to all clients in a session; Sending a signal to a specific client in a session

Signaling OpenTok and React, Opentok react video chat which support stream connection and signalling and recieve signals in opentok; Defined the properties used for opentok publisher� Or does it get routed through OpenTok's servers? We are looking to send image and video files P2P, but the signaling method seems a bit slower than webRTC's native data channel. I'm wondering if there is something extra happening under the hood.

Opentok react video chat. How to implement a video chat…, cnpm install react-native-opentok. SYNC missed React Native OpenTok is wrapper over native TokBox OpenTok SDK. Send signal to chosen session. React-Basic-Video-Chat - This sample shows you how to connect to an OpenTok session, publish a stream, and subscribe to a stream using React. You can also toggle the video by clicking on the Video button. Signaling - This sample shows you how to use the OpenTok signaling API to implement text chat.

Comments
  • Thank you! This saved my hide big time.