Hat jemand das Senden und Empfangen von Signalen mit opentok-react https://github.com/aiham/opentok-react implementiert?? Ich kann nicht einmal ein einfaches Beispiel dafür finden, wie man es in React mit opentok-react macht.

2
Hiram Hibbard 18 Apr. 2018 im 03:37

3 Antworten

Beste Antwort

Vielen Dank für die Verwendung von opentok-react. Leider wurde opentok-react noch keine einfache Möglichkeit zur Signalisierung hinzugefügt, sodass der folgende Prozess etwas kompliziert ist.

Um eine Signalisierung durchzuführen, müssen Sie auf das Sitzungsobjekt zugreifen und die Signalmethode wie gewohnt aufrufen (siehe https://tokbox.com/developer/sdks/js/reference/Session.html#signal).

Wenn Sie die OTSession-Komponente verwendet haben, können Sie auf das Sitzungsobjekt zugreifen, indem Sie einen Verweis auf das OTSession-Element abrufen (siehe 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} />;
  }
}

Und Verwenden der sessionHelper-Eigenschaft zum Aufrufen der Signalmethode:

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

Wenn Sie eine bestimmte Zielverbindung für den Empfänger angeben möchten, müssen Sie diese von der Stream-Eigenschaft des zugrunde liegenden Publisher- oder Subscriber-Objekts abrufen. Holen Sie sich zuerst einen Verweis auf das OTPublisher- oder OTSubscriber-Element:

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

Erhalten Sie dann Zugriff auf das Verbindungsobjekt:

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

Ich habe dies nicht getestet, aber sobald Sie Zugriff auf die Sitzungs- und Verbindungsobjekte haben, können Sie die vollen Signalisierungsfunktionen des OpenTok JS SDK nutzen.

6
aiham 22 Jän. 2019 im 02:09

Hier ist eine Möglichkeit, dies mithilfe der Syntax von Funktionskomponenten zu tun.

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);
0
Michael Reyes 8 Apr. 2020 im 02:53

Ich habe ein npm-Paket 'opentok-rvc' mit Bezug auf opentok-react erstellt. Hier habe ich einen Listener erstellt, um die Signalisierung zu beobachten, und wenn ein Signal empfangen wird, sende ich das Signal an ein anderes Ereignis

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

Führen Sie in Ihrer Komponente die folgenden Schritte aus

// 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>
0
Vishnu8429 23 Jän. 2020 im 08:26