openTok - 发布到一个会话 - 并订阅另一个答案

【问题标题】：openTok - publishing to one session - and subscribing to anotheropenTok - 发布到一个会话 - 并订阅另一个
【发布时间】：2014-11-14 00:05:54
【问题描述】：

JS 和 PHP

每个用户发布 - 并且可以订阅不同的用户流这是一种单向订阅——订阅者看到的是发布者，而不是组的其他成员。发布者看不到订阅他的人。

我的逻辑： 1.每个人都在发布 - session.on - 没有被调用 2.订阅时-我将sessionId和令牌更改为用户订阅的频道（我可以这样做吗？）那部分似乎不起作用- 我得到： “会话未定义”

我可以像我一样在中途更改 sessionId 和令牌吗？

（每个用户通过 PHP SDK 为每个会话获取自己的令牌）

【问题讨论】：

标签： javascript php webrtc opentok

【解决方案1】：

实际上不需要多于一个会话。问题可以归结为每个客户端都应该发布一个流，并且每个客户端应该能够选择和订阅来自其他客户端的任何一个流。从逻辑上讲，一个会话就像一组流，所以不需要创建多个。

我为您提供了一个示例解决方案。在这个方案中，PHP SDK 只需要为会话中的每个客户端创建一个令牌，服务器端没有特殊的逻辑。目前，我已将一个令牌硬编码到脚本中，它可以正常工作，只需在多个窗口/选项卡中打开同一页面即可。可以使用其streamId 选择每个流。在您的应用程序中，您可能希望使用 PHP SDK 为每个客户端添加唯一的令牌数据，然后使用 stream.connection.data 属性读取该令牌数据以呈现每个流的更用户友好的标识符（我已经标记了它的位置带有TODO 注释的代码）。

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src='//static.opentok.com/webrtc/v2.2/js/opentok.min.js'></script>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

  <!-- Publisher placeholder -->
  <div id="publisher"></div>

  <!-- Stream selector interface -->
  <div id="streams"></div>

  <!-- Subscriber (only one) -->
  <div id="subscriber"></div>

  <script>
    // This data is generated by the server
    var sessionId = '2_MX44NTQ1MTF-fjE0MTU4ODc5NTE4ODV-SEN3dXBPYkFTbkFkZ3cwN3BDckJ1VDJNfn4',
        apiKey = '854511',
        token = 'T1==cGFydG5lcl9pZD04NTQ1MTEmc2lnPWE1YzBiOTA0ODcyZDQxNjRjNTc4YTI4MGUwZjI4ODNiYjU4N2Q3YmM6cm9sZT1wdWJsaXNoZXImc2Vzc2lvbl9pZD0yX01YNDROVFExTVRGLWZqRTBNVFU0T0RjNU5URTRPRFYtU0VOM2RYQlBZa0ZUYmtGa1ozY3dOM0JEY2tKMVZESk5mbjQmY3JlYXRlX3RpbWU9MTQxNTg4ODY4MSZub25jZT0wLjMwMTMwMjMxMzY2ODA4NzkmZXhwaXJlX3RpbWU9MTQxODQ3OTk0MA==';
  </script>
  <script>
    var session = OT.initSession(apiKey, sessionId),
        puslisher = OT.initPublisher('publisher'),
        streams = {},
        subscriber;

    session.on({
      'sessionConnected': function(event) {
        // each client publishes
        session.publish(publisher);
      },
      'streamCreated': function(event) {
        // create a button to select the stream
        // TODO: use connection data from token for a friendlier description of the stream
        $('<button class="stream stream-'+event.stream.streamId+'">Stream'+event.stream.streamId+'</button>').appendTo('#streams');

        // store the stream object for later use
        streams[event.stream.streamId] = event.stream;
      },
      'streamDestroyed': function(event) {
        // remove the button for the stream that was destroyed
        $('#streams .stream-'+event.stream.streamId).remove();

        // remove the stream object from the storage
        delete streams[event.stream.streamId];
      }
    });

    var streamSelected = function(event) {
      // subscribe to the selected stream
      var streamId = extractStreamId(event.target);
      if (subscriber) {
        session.unsubscribe(subscriber);
      }
      subscriber = session.subscribe(streams[streamId], 'subscriber');
      subscriber.on('destroyed', function() { subscriber = false; });

      // disable the button and enable all others
      $('#streams button').prop('disabled', false);
      $(event.target).prop('disabled', true);
    };

    var extractStreamId = function (element) {
      var classes = element.className.split(' '),
          streamId;
      classes.forEach(function(classStr) {
        if (classStr.indexOf('stream-') === 0) {
          streamId = classStr.slice(7);
        }
      });
      return streamId;
    };

    $(document).ready(function() {
      $('#streams').on('click', '.stream', streamSelected);
      session.connect(token);
    });

  </script>
</body>
</html>

JSBin 上提供了此示例的实时页面：http://jsbin.com/duxowa/10/edit

注意：如果您比我的帖子晚查看此令牌，则令牌可能已过期。在仪表板中使用您自己的apiKey、sessionId 和token，或者在这种情况下使用服务器 SDK。

【讨论】：

非常感谢！我一直在玩你的代码:-) - 我一直在寻找 AGES 以获得这样的答案