OpenTok/Tokbox Display another page until a suscribe is on

Question

I'm trying to make a "waiting page" until one subscriber get in the call, I tried this:

    <div id="cont">

          <div class="row">

         <p>Waiting</p>

        </div>
</div>

And on the session.suscribe() method I have this:

            session.subscribe(event.stream, 'subscriber', subscriberOptions, function (error) {

                if (error) {
                    console.log('There was an error publishing: ', error.name, error.message);
                } else {
                    delWaiting();
                }
            });

    function delWaiting() {
        $("#cont").empty();
        $('#cont').html('<div id="videos"> <div id= "subscriber"> </div > <div id="publisher"> </div> </div>');

    }

In this example I tried to remove the waiting content and add the html that I need for the video call, the problem is that this doesn't work because of all the other html that opentok creates, is there a simple way to do this using opemtok methods?

Answer 1

The main reason it's not working is because you are calling session.subscribe() before you create the element with id subscriber. You need to make sure the element with id subscriber exists before calling session.subscribe().

The following is an extension of your snippet but instead of an id string it passes a DOM element into session.subscribe(), then appends this element to the DOM after success:

var subscriberContainer = document.createElement('div');

session.subscribe(event.stream, subscriberContainer, subscriberOptions, function (error) {
  if (error) {
    console.log('There was an error subscribing: ', error.name, error.message);
  } else {
    delWaiting(subscriberContainer);
  }
});

function delWaiting(subscriberContainer) {
  $("#cont").empty().html('<div id="videos"> <div id="subscriber"> </div > <div id="publisher"> </div> </div>');
  $('#subscriber').append(subscriberContainer);
}