Question

我正在使用rails，tokbox，opentok，webrtc v2.0

我有一位老师（出版商），有很多学生（订阅者）。教师通过teacher_room开始会话，学生可以在student_room中查看会话。

教师发布由教师和学生查看的会话。现在在teacher_room中，我想要打开网络摄像头的所有订阅者/学生的列表。

请检查以下代码：

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>

在myPublisherDiv中，只会显示教师的视频，但在订阅者div中，我想要显示已加入会话的所有订阅者/学生的视频以及已连接视频游戏的人。如何管理这一个。我面临着问题。

尽快等待合适的脚本或提示。谢谢。

Answer 1

看起来您的代码已经在执行您要完成的任务。 studentroom.html中的学生将视频发布到会话中，teacherroom.html正在订阅学生的视频流。您必须确保两者都使用相同的sessionId，以便它们连接到同一会话并可以看到彼此。

为什么opentok用户视频没有显示在我的rails应用程序中？

1 个答案: