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属性来调用signal方法：

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

如果要为收件人指定特定的目标连接，则需要从基础发布者或订阅者对象的流属性中获取它。首先获取对OTPublisher或OTSubscriber元素的引用：

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

然后访问Connection对象：

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答案之外，您还可以访问从OTSession元素获取引用的Opentok会话对象，然后发送如下所示的信号

 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

4 个答案: