why opentok subscriber video is not displaying in my rails application?

Question

I am using rails, tokbox, opentok, webrtc v2.0

I have one teacher(publisher) with many students(subscribers). Teacher start session through teacher_room and student can view session in student_room.

Teacher publishes session which is viewed by both teacher and students. Now in teacher_room i want lists of all subscribers/students who have opened webcam.

Please check below codes:

student_room.html.erb

<script type="text/javascript">
  var apiKey = <%= OPEN_TOK_API_KEY %>;
  var sessionId = "<%= @tok_session_id %>";
  var token = "<%= @tok_token %>";

  TB.setLogLevel(TB.DEBUG);

  var session = TB.initSession(sessionId);
  session.addEventListener('sessionConnected', sessionConnectedHandler);
  session.addEventListener('streamCreated', streamCreatedHandler);
  session.connect(apiKey, token);

  var publisher;

  function sessionConnectedHandler(event) {
    publisher = session.publish('myPublisherDiv',{width: 175,height: 135}, {wmode : 'window'});

    // Subscribe to streams that were in the session when we connected
    subscribeToStreams(event.streams);
  }

  function streamCreatedHandler(event) {
    // Subscribe to any new streams that are created
    subscribeToStreams(event.streams);
  }

  function subscribeToStreams(streams) {
    for (var i = 0; i < streams.length; i++) {
      // Check that connectionId on the stream to make sure we don't subscribe to ourself
      if (streams[i].connection.connectionId == session.connection.connectionId) {
        return;
      }

      // Create the div to put the subscriber element in to
      var div = document.createElement('div');
      div.setAttribute('id', 'stream' + streams[i].streamId);
      document.body.appendChild(div);
      var subscribersDiv = document.getElementById("subscribers");
      subscribersDiv.appendChild(div);

      // Subscribe to the stream
      session.subscribe(streams[i], div.id, {width: 575, height: 475});
    }
  }
</script>
<body>
 <div id="subscribers"></div>
 <div id="myPublisherDiv"></div>
</body>

teacher_room.html.erb

<script type="text/javascript">
  var apiKey = <%= OPEN_TOK_API_KEY %>;
  var sessionId = "<%= @tok_session_id %>";
  var token = "<%= @tok_token %>";
  TB.setLogLevel(TB.DEBUG);
  if (TB.checkSystemRequirements() != TB.HAS_REQUIREMENTS) {
    alert('Minimum System Requirements not met!');
  }
  var session = TB.initSession(sessionId);
  session.addEventListener('sessionConnected', sessionConnectedHandler);
  session.addEventListener('streamCreated', streamCreatedHandler);

  session.connect(apiKey, token);
  var publisher;

  function sessionConnectedHandler(event) {
    publisher = TB.initPublisher(apiKey, 'myPublisherDiv', {width: 575, height: 475}, {wmode: 'window'});
    session.publish(publisher);
    publisher.addEventListener("settingsButtonClick", settingsButtonClickHandler);
    publisher.addEventListener("resize", publisherResizeHandler);

    function publisherResizeHandler(event) {
      newWidth = event.widthTo;
      newHeight = event.heightTo;
      // Modify the UI based on the new dimensions of the publisher
    }
    var cameras;
    var mics;

    publisher.addEventListener("devicesDetected", devicesDetectedHandler);
    publisher.detectDevices();

    function devicesDetectedHandler(event) {
      cameras = event.cameras;
      mics = event.microphones;

      if (event.cameras.length < 1) {
        alert("No camera connected.");
      } else if (event.microphone.length < 1) {
        alert("No microphone connected.");
      }
      if (event.cameras.length > 0 && event.microphones.length > 0) {
        alert("Selected camera: " + event.selectedCamera.name + "\nSelected microphone: " + selectedMicrophone.name);
      }
    }
    // Subscribe to streams that were in the session when we connected
    subscribeToStreams(event.streams);
  }

  function unpublsh() {
    session.unpublish(publisher);
    alert(" Your has been ende");
  }

  function settingsButtonClickHandler() {
    var newDiv = document.createElement("div");
    newDiv.id = "devicePanel";
    document.getElementById("devicePanelContainer").appendChild(newDiv);
    devicePanel = deviceManager.displayPanel("devicePanel", publisher);
    devicePanel.addEventListener("devicesSelected", devicesSelectedHandler);
    document.getElementById("closeButton").style.visibility = "visible";
  }
  function closePanel() {
    deviceManager.removePanel(devicePanel);
    document.getElementById("closeButton").style.visibility = "hidden";
  }



  function streamCreatedHandler(event) {

    // Subscribe to any new streams that are created
    subscribeToStreams(event.streams);
  }

  function subscribeToStreams(streams) {
    for (var i = 0; i < streams.length; i++) {
      // Check that connectionId on the stream to make sure we don't subscribe to ourself
      if (streams[i].connection.connectionId == session.connection.connectionId) {
        return;
      }

      // Create the div to put the subscriber element in to
      var div = document.createElement('div');
      div.setAttribute('id', 'stream' + streams[i].streamId, 'style', 'margin:-1175px 355px 1347px 30px');
      // div.style.marginTop = ".25in";
      document.body.appendChild(div);
      var subscribersDiv = document.getElementById("subscribers");
      subscribersDiv.appendChild(div);
      // Subscribe to the stream
      session.subscribe(streams[i], div.id, {width: 143, height: 118});
    }
  }
 </script>
</head>

<body>
  <div id="subscribers"></div>
  <div id="myPublisherDiv"></div>
</body>

In myPublisherDiv only teacher's video will be displayed but in subscribers div, i want to diplay video of all subscribers/students who have joined the session and who have connected the videocam. How to manage this one. I am facing problem.

Waiting for suitable script or hints soon. Thank you.

I put both publisher and subscriber to same room. Now it's working fine. — siv rj

songz songz · Accepted Answer · 2014-05-28T20:34:29

Looks like your code is already doing what you are trying to accomplish. Students in studentroom.html is publish video to the session, and teacherroom.html is subscribing to the student's video streams. You have to make sure that both are using the same sessionId so that they are connecting to the same session and can see each other.

why opentok subscriber video is not displaying in my rails application?

1 Answers