How to end session (disconnect the call) by publisher with custom "Disconnect Call" button

[xporium]

Hi, i want to disconnect call by publisher with custom "DisconnetCall" button.

So how to do this?

And even i also want disconnect call within some time so how to do this also?

Thanks

[inlightmedia]

End Call

To end the call using a custom button, we call session.disconnect(); in the onClick on our custom "end-call" button. You get the session by assigning it the returned value of initSession: const session = OT.initSession(<YOUR_API_KEY>, <YOUR_SESSION_ID>)

You can get the OT object using import OT from '@opentok/client'; after installing the OpenTok client with npm install @opentok/client

An alternate method is to get the session using ReactJS refs to pull off the sessionHelper from the OTSession DOM element and use that to disconnect. this.otSession.sessionHelper.disconnect()

You can use the refs method as described below:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.otSession = React.createRef();
  }
  render() {
    return <OTSession ref={this.otSession}>...</OTSession>;
  }
}

Reference: https://tokbox.com/developer/sdks/js/reference/OT.html#initSession https://tokbox.com/developer/sdks/js/reference/Session.html https://reactjs.org/docs/refs-and-the-dom.html

Hide Standard Buttons

You can hide the baked-in/out-of-the-box controls using the subscriber properties that you pass into the OTSubscriber component. You'll need the showControls property to be set to false. <OTSubscriber properties={ showControls: false }>

Reference: https://github.com/opentok/opentok-react#otsubscriber-component

EndCall Timeout

One way you could end the call after a certain time period is by using a setTimeout:

setTimeout(() => { 
  if (session) {
    session.disconnect(); 
  }
  alert('Your call has ended after the 1 hour limit') 
}, 600000)

Reference: https://tokbox.com/developer/sdks/js/reference/Session.html

[xporium]

Hi, thanks for the reply. I did the same code now I'm getting error after disconnect call and move to other page or route the page. For a video call, it would be open popup so after disconnect call popup would close and the main page would be render but at that time below error occur "Uncaught TypeError: Cannot read property 'off' of null at OTSession.destroySession"

in which event session timeout call for auto end the call?

Thanks

[inlightmedia]

I updated my comment above. Make sure you are checking to see if there is a session before using methods on it. Also, in your componentWillUnmount remember to use clearTimeout.

Reference: https://www.w3schools.com/jsref/met_win_cleartimeout.asp

[xporium]

Hi, thanks for your reply. I'm new in opentok as well as react also. Please see below code

import React from 'react'; import { preloadScript, createSession, OTPublisher, OTSubscriber } from 'opentok-react'; //import ConnectionStatus from './connectionstatus'; // import Publisher from './publisher'; // import Subscriber from './subscriber'; //import socket from '../../actions/socket';

class videocallcomponent extends React.Component { constructor(props) { super(props); this.state = { streams: [] };

this.publisherProperties = {
  audioFallbackEnabled: false,
  showControls: false
};

this.publisherEventHandlers = {
  streamCreated: event => {
    console.log('Publisher stream created!');
  },
  streamDestroyed: event => {
    console.log('Publisher stream destroyed!');
  }
};

this.subscriberProperties = {
  preferredFrameRate: 15,
  showControls: false
};

this.subscriberEventHandlers = {
  videoDisabled: event => {
    console.log('Subscriber video disabled!');
  },
  videoEnabled: event => {
    console.log('Subscriber video enabled!');
  }
};

} componentWillMount() { this.sessionHelper = createSession({ apiKey: 'API KEY', sessionId: this.props.opentok_sessionid, token: this.props.opentok_token, onStreamsUpdated: streams => { this.setState({ streams }); } }); }

componentWillUnmount() { this.sessionHelper.disconnect(); } endcallhandler = () => { this.sessionHelper.disconnect(); this.state.client.end_call_by_caller(); } render() {
alert(JSON.stringify(this.state.stream)) return ( <React.Fragment>

    <OTPublisher session={this.sessionHelper.session} 
    properties={this.publisherProperties}
    eventHandlers={this.publisherEventHandlers}/>
    {this.state.streams.map(stream => {
      return (
        <OTSubscriber
          key={stream.id}
          session={this.sessionHelper.session}
          stream={stream}
          properties={this.subscriberProperties}
        eventHandlers={this.subscriberEventHandlers}
        />
      );
    })}
    <button onClick={() => this.endcallhandler()}>
      End call
    </button>
  </React.Fragment>
);

} } export default React.memo(preloadScript(videocallcomponent));

In that case, I can't see any stream, if I alert that, it would show undefined. This component opens in popup window. If I use <OTSession > that time after disconnect call and close to the popup that time i saw the "Cannot read property 'off' of null at OTSession.destroySession" error. And above code try to run that time I facing error like a stream in undefined.

Thanks

[enricop89]

@inlightmedia I think your comment https://github.com/opentok/opentok-react/issues/94#issuecomment-595752253 is really useful. Would you mind opening a PR to add it on the README file?

[inlightmedia]

@inlightmedia I think your comment #94 (comment) is really useful. Would you mind opening a PR to add it on the README file?

@enricop89 No problem. Which parts of the comment do you want added? All of them? Thanks!

I'm assuming it's just the end call stuff as everything else is in the docs really.

PR is up. Let me know if that is what you were hoping for.

[qwertynik]

@inlightmedia Thanks for your response. Tried the disconnect method and it worked. In the POC, I am generating the Session and token using the PHP SDK and using it in the demo application.

Earlier when I did not disconnect I am assuming the billing was done for the entire session duration - set during the creation in PHP code. Because for an hour-long meeting between four people, it seems incorrect for the billed minutes to be ~1.461k.

So, would using the disconnect method from the UI prevent the additional unused minutes being billed? Or, from the PHP SDK as well the session needs to be disconnected. Not finding any methods in PHP SDK to disconnect/close the session

[inlightmedia]

@qwertynik I can't say I'm familiar with the PHP SDK but I it is my understanding that it is the number and duration of client-side connections that are tied to billing not the server side generation of the session or token. Glad my previous answer was helpful.

[qwertynik]

@inlightmedia Hmm, not sure about where the billing of ~1.461k came from then. Will need to get in touch with the support team. Thanks for your response.

[inlightmedia]

I would review your recent session ids in the opentok/vonage account to check for abnormal usage: https://tokbox.com/developer/tools/inspector/account/all

[qwertynik]

@inlightmedia Thanks for sharing the link. I will take a look. If possible can you also point me to someone familiar with the PHP-SDK? I will tag them and create an issue in PHP-SDK repo.

[enricop89]

@qwertynik you are only charged for subscribed minutes, https://support.tokbox.com/hc/en-us/articles/360029732691-How-do-I-estimate-my-OpenTok-monthly-usage-

[qwertynik]

Thanks for confirming @enricop89