OpenTok / Tokbox显示另一页，直到有一个订阅

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