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

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

javascript

Javascript 为什么opentok订户视频没有显示在我的rails应用程序中？,javascript,opentok,tokbox,Javascript,Opentok,Tokbox,我正在使用rails、tokbox、opentok、webrtc v2.0 我有一位老师（出版商）和许多学生（订户）。教师通过教师室开始课程，学生可以在学生室查看课程教师发布课程，供教师和学生观看。现在在教室里，我想要所有打开网络摄像头的订阅者/学生的名单请检查以下代码： student_room.html.erb <script type="text/javascript"> var apiKey = <%= OPEN_TOK_API_KEY %>; var

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

我有一位老师（出版商）和许多学生（订户）。教师通过教师室开始课程，学生可以在学生室查看课程

教师发布课程，供教师和学生观看。现在在教室里，我想要所有打开网络摄像头的订阅者/学生的名单

请检查以下代码：

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>

<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>


var-apiKey=；
var sessionId=“”；
var token=“”；
TB.setLogLevel（TB.DEBUG）；
var session=TB.initSession（sessionId）；
session.addEventListener（'sessionConnected'，sessionConnectedHandler）；
session.addEventListener（'streamCreated'，streamCreatedHandler）；
连接（apiKey、令牌）；
var出版商；
函数sessionConnectedHandler（事件）{
publisher=session.publish（'myPublisherDiv'，{宽度：175，高度：135}，{wmode:'window'}）；
//订阅连接时会话中的流
subscribeToStreams（event.streams）；
}
函数streamCreatedHandler（事件）{
//订阅创建的任何新流
subscribeToStreams（event.streams）；
}
函数subscribeToStreams（streams）{
对于（变量i=0；i


教师会议室.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>

<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>


var-apiKey=；
var sessionId=“”；
var token=“”；
TB.setLogLevel（TB.DEBUG）；
如果（TB.checkSystemRequirements（）！=TB.HAS\U需求）{
警报（“未满足最低系统要求！”）；
}
var session=TB.initSession（sessionId）；
session.addEventListener（'sessionConnected'，sessionConnectedHandler）；
session.addEventListener（'streamCreated'，streamCreatedHandler）；
连接（apiKey、令牌）；
var出版商；
函数sessionConnectedHandler（事件）{
publisher=TB.initPublisher（apiKey'myPublisherDiv'，{width:575，height:475}，{wmode:'window'}）；
出版（出版商）；
publisher.addEventListener（“settingsButtonClick”，settingsButtonClickHandler）；
publisher.addEventListener（“调整大小”，publisherResizeHandler）；
函数publisherResizeHandler（事件）{
newWidth=event.widthTo；
newHeight=event.heightTo；
//根据发布者的新维度修改UI
}
var摄像机；
变量mics；
publisher.addEventListener（“DeviceDetected”，DeviceDetectedHandler）；
publisher.detectDevices（）；
函数DeviceDetectedHandler（事件）{
摄像机=事件摄像机；
麦克风=事件麦克风；
如果（event.camers.length<1）{
警报（“未连接摄像头”）；
}否则如果（event.microscope.length<1）{
警报（“未连接麦克风”）；
}
if（event.cameras.length>0&&event.microphones.length>0）{
警报（“选定的摄像头：+event.selectedCamera.name+”\n选定的麦克风：+selectedMicrophone.name）；
}
}
//订阅连接时会话中的流
subscribeToStreams（event.streams）；
}
函数unsublsh（）{
会话。取消发布（发布者）；
警惕（“您的行为已经结束”）；
}
函数设置ButtonClickHandler（）{
var newDiv=document.createElement（“div”）；
newDiv.id=“devicePanel”；
document.getElementById（“devicePanelContainer”）.appendChild（newDiv）；
devicePanel=deviceManager.displayPanel（“devicePanel”，发布者）；
devicePanel.addEventListener（“DeviceSelected”，DeviceSelectedHandler）；
document.getElementById（“closeButton”）.style.visibility=“可见”；
}
函数closePanel（）{
deviceManager.removePanel（devicePanel）；
document.getElementById（“closeButton”）.style.visibility=“hidden”；
}
函数streamCreatedHandler（事件）{
//订阅创建的任何新流
subscribeToStreams（event.streams）；
}
函数subscribeToStreams（streams）{
对于（变量i=0；i

在myPublisherDiv中，只显示教师的视频，但在subscribers div中，我想播放所有已加入会话并已连接摄像机的订阅者/学生的视频。如何管理这个。我面临着一个问题
正在等待合适的脚本或提示。谢谢。
看起来您的代码已经完成了您要完成的任务。studentroom.html中的学生将向会话发布视频，teacherroom.html将订阅学生的视频流。您必须确保两者都使用相同的sessionId，以便它们连接到相同的会话，并且可以看到彼此
 我把发布者和订阅者放在同一个房间里。现在是