Open Tok Multi Party Video Conferencing Issue

Question

Here is my code that creates the session & tokens as server side. I am using Ruby SDK.

opentok = OpenTok::OpenTok.new(ENV['TOKBOX_API_KEY'], ENV['TOKBOX_SECRET_KEY'])
location = 'my ipaddress'
session = opentok.create_session( {:media_mode => :routed, :location => location, 'p2p.preference' => "disabled"} )
token = opentok.generate_token(session_id, {:expire_time => meeting.date.to_i+(1 * 24 * 60 * 60), :data => user.full_name})

So every time i am creating only one session and multiple tokens for one Room.

When my first user joins the room it is working fine and when second user joins the room then it is also working fine.

Problem starts from here

But When my third user joins the room with same session id then every time user can only be able to see the 2 users, Currently in my room there are 3 users present but only 2 users are visible.

Here is the JavaScript code

 var apiKey = "<%= ENV['TOKBOX_API_KEY']%>";

  TB.addEventListener("exception", exceptionHandler);
  var session = TB.initSession("<%= @room.session_id %>");
  session.addEventListener("sessionConnected", sessionConnectedHandler);
  session.addEventListener("streamCreated", streamCreatedHandler);
  session.addEventListener("connectionDestroyed", connectionDestroyedHandler);
  session.connect(apiKey, "<%= @room.token %>");

  function sessionConnectedHandler(event) {
     subscribeToStreams(event.streams);
     publisher = TB.initPublisher(apiKey, "publisher_replace", {position: 'absolute',
      width: 350, height: 200, wmode: "window"});
      session.publish(publisher);
      publisher.publishAudio(true);



  }

  function streamCreatedHandler(event) {
    subscribeToStreams(event.streams);
  }

  function subscribeToStreams(streams) {
    for (var i = 0; i < streams.length; i++) {
      var stream = streams[i];

      if (stream.connection.connectionId != session.connection.connectionId) {
        var newDiv = document.createElement("div");
        newDiv.id = "subscriber_replace";
        document.getElementById("subscriber_container").appendChild(newDiv);
        subscriber = session.subscribe(stream, "subscriber_replace", {width: 350, height: 200});
        subscriber.subscribeToAudio(true);
        subscriber.setAudioVolume(100);
        //alert(session.connection.data + " " + " has joined the room");
      }
    } 

Here is my Html code

<div id="chatBox">

          <div id="publisher_container">
              <div id="publisher_replace"></div>
          </div>

          <div id="subscriber_container">
            <div id="subscriber_replace" ></div>
          </div>
 </div>

Please help me

Thanks in Advance!

Answer 1

The problem is in your subscribe to streams method. You are creating a new div element with id "subscriber_replace". When the third person joins your room, second subscriber div (with id "subscriber_replace") is replaced with the third stream. Here's a rewrite with some code modifications (streamCreated event only gives 1 stream).

function streamCreatedHandler(event) {
  var newDiv = document.createElement("div");
  newDiv.id = "subscriber_replace" + event.stream.streamId; // stream will have its own id
  document.getElementById("subscriber_container").appendChild(newDiv);
  subscriber = session.subscribe(event.stream, newDiv.id, {width: 350, height: 200});
  ...
}