Adding an Endcall button to the Controls Toolbar about opentok-react

[aiham]

Hi @mattwebdev, thanks for your interest in opentok-react!

That depends what you mean by 'Endcall'. Would you like to disconnect the session or stop publishing to the session while keeping the session connected? Remaining connected to the session allows the user to continue viewing other people's videos.

To unpublish your video but remain connected, use the following example. The key thing to note is the OTPublisher component is completely unmounted, triggering session.unpublish() in the process:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPublishing: true
    };
  }

  togglePublish = () => {
    this.setState({ isPublishing: !this.state.isPublishing });
  };
  
  render() {
    const { isPublishing } = this.state;
    return (
      <OTSession
        apiKey={this.props.apiKey}
        sessionId={this.props.sessionId}
        token={this.props.token}
      >
        <div>
          <button onClick={this.togglePublish}>{isPublishing ? 'Stop' : 'Start'} Publishing</button>
        </div>
        {isPublishing ? <OTPublisher /> : null}
      </OTSession>
    );
  }
}

You could do the same with OTSession, don't render it at all after the End Call button is pressed, but I appreciate that might be undesirable if a lot of the UI within OTSession needs to remain on screen even after ending the call. If you need to disconnect but keep OTSession on the screen, you could do this:

class App extends React.Component {
  endCall = () => {
    this.otSession.destroySession();
  };

  render() {
    return (
      <OTSession
        apiKey={this.props.apiKey}
        sessionId={this.props.sessionId}
        token={this.props.token}
        ref={instance => (this.otSession = instance)}
      >
        <div>
          <button onClick={this.endCall}>End Call</button>
        </div>
        <OTPublisher />
      </OTSession>
    );
  }
}

This gets the instance of the OTSession component and invokes an undocumented destroySession() function. The problem with this is there's no convenient way to start the call again. You will have make sure OTSession gets remounted, because that's where the connect logic is.

I think I'll make this use case a little easier in the future.

[mattwebdev]

Thanks for your help! i will give this a shot and see.

[mattwebdev]

that absolutely worked!
thanks!