tokbox-opentok只传到了一边

时间:2014-10-13 11:55:26

标签: javascript opentok tokbox

我正在使用tokbox试用版在我的网站上进行视频聊天。但我面临的问题是:::用户1可以清楚地看到和听到用户2。用户2可以清楚地看到用户1,但是用户2无法在这里用户1.我正在使用的代码

<html>
  <head>
    <title>Monkvyasa | Test</title>
    <script src='http://static.opentok.com/webrtc/v2.2/js/opentok.min.js'></script>
    <script type="text/javascript">
      // Initialize API key, session, and token...
      // Think of a session as a room, and a token as the key to get in to the room
      // Sessions and tokens are generated on your server and passed down to the client
      var apiKey = "xxxxxxx";
      var API_KEY=apiKey;
      var sessionId = "2_MX40NTAyMDgxMn5-xxxxxxxxxxxxxxxxxxxxHBXZEZoWHN-fg";
       var token = "T1==cGFydG5lcl9pZD00NTAyMDgxMiZzaWc9ZDNiYjYyZGE2NTBkYmUzMTUyNGNjNDZjYzAzY2NjZWRhZGY3NTEyZjpyb2xlPW1vZGVyYXRvciZzZXNzaW9uX2lkPTJfTVg0xxxxxxxxxxxxxxxxxxxxxxxxBNM1JsYlRCUFdXWkhSSEJYWkVab1dITi1mZyZjcmVhdGVfdGltZT0xNDEzMjAwMjIxJm5vbmNlPTAuMTk1MzEwNTU0MzY1MjEwNSZleHBpcmVfdGltZT0xNDEzMjg0MzY5";


      // Initialize session, set up event listeners, and connect
        var session;
        var connectionCount = 0;

        function connect() {
            session = TB.initSession(sessionId);
            session.addEventListener("sessionConnected", sessionConnectHandler);
            session.addEventListener('streamCreated', function(event){
                e=event;
                console.log(e);
              for (var i = 0; i < event.streams.length; i++) {
                 streams = event.streams;
                // Make sure we don't subscribe to ourself
                alert("new user connected :)");
                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);
                session.subscribe(streams[i], div.id);
              }
            });

            session.connect(API_KEY, token);

            }

         function sessionConnectHandler(event) {
                var div = document.createElement('div');
                div.setAttribute('id', 'publisher');

                var publisherContainer = document.getElementById('publisherContainer');  
                    // This example assumes that a publisherContainer div exists
                publisherContainer.appendChild(div);

                var publisherProperties = {width: 500, height:450};
                publisher = TB.initPublisher(API_KEY, 'publisher', publisherProperties);
                session.publish(publisher);
            }

        function disconnect() {
          session.disconnect();
        }



        connect();
    </script>
  </head>
  <body>
    <h1>Monkvysa videofeed test!</h1>
    <input style="display:block" type="button" id="disconnectBtn" value="Disconnect" onClick="disconnect()">
    <table>
    <tr>
    <td> <div id="publisherContainer"></div></td> <td><div id="myPublisherDiv"></div></td>
    </tr>
    </table>


  </body>
</html>

提前致谢

1 个答案:

答案 0 :(得分:0)

代码看起来大部分都是正确的,除非您使用旧版本的&#39; streamCreated&#39;事件处理程序在最新版本的API中,您不再需要遍历event.streams数组,实际上每个流都会调用一次事件处理程序。

为了进一步深入研究问题,您是否可以添加包含所有控制台日志的要点的链接?要确保输出日志,您可以在脚本开头调用OT.setLogLevel(OT.DEBUG);

最后,新的API大大简化,您可以节省DOM元素创建和迭代的工作量。您实现的内容与我们的Hello World示例应用程序基本相同,您可以在我们的任何服务器SDK中找到它们,例如:https://github.com/opentok/opentok-node/blob/61fb4db35334cd30248362e9b10c0bbf5476c802/sample/HelloWorld/public/js/helloworld.js