信令 OpenTok 和 React

Question

有没有人用opentok-react实现发送和接收信号https://github.com/aiham/opentok-react？我什至找不到关于如何使用 opentok-react 在 React 中执行此操作的简单示例。

Answer 1

感谢您使用 opentok-react。不幸的是，opentok-react 尚未添加一种简单的信号发送方法，因此以下过程有点复杂。

要发送信号，您将需要访问 Session 对象并像往常一样对其调用信号方法（参见 https://tokbox.com/developer/sdks/js/reference/Session.html#signal）。

如果您使用了 OTSession 组件，您可以通过获取对 OTSession 元素的引用来访问 Session 对象（参见 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} />;
  }
}

并使用其 sessionHelper 属性调用信号方法：

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

如果您想为接收者指定一个特定的目标连接，那么您需要从底层发布者或订阅者对象的流中获取它属性。首先获取对 OTPublisher 或 OTSubscriber 元素的引用：

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

然后访问连接对象：

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

我没有对此进行测试，但是一旦您有权访问 Session 和 Connection 对象，您就可以使用 OpenTok JS SDK 的完整信令功能。

Answer 2

我参考 opentok-react 创建了一个 npm 包“opentok-rvc”。在这里，我创建了一个侦听器来观察信号，如果有任何信号，我会将信号发送到另一个事件

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

在您的组件中，请执行以下操作

// 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>

Answer 3

这是一种使用函数式组件语法来完成此操作的方法。

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

Answer 4

除了@aiham 的回答，您还可以访问 Opentok 会话对象，从 OTSession 元素获取 ref，然后发送如下信号

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

并且可以通过如下添加侦听器来接收信号；

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

信令 OpenTok 和 React

Signaling OpenTok and React

javascript

tokbox

opentok

reactjs