JS和PHP
每个用户发布 - 并且可以订阅不同的用户流 它是一种单向订阅 - 订阅者看到发布者而不是该组的其他成员。 出版商没有看到订阅他的人。
我的逻辑: 1.每个人都在发布 - session.on - 没有被调用 2.订阅时 - 我将sessionId和令牌 - 更改为用户订阅的频道 (我能这样做吗?) 那部分似乎不起作用 - 我得到: “会议未定义”
我可以像我一样中途更改sessionId和令牌吗?
(每个用户通过PHP SDK为每个会话获取自己的令牌)
答案 0 :(得分:2)
实际上不需要有多个会话。问题可以归结为每个客户端应该发布流,每个客户端应该能够从其他客户端选择和订阅任何一个流。从逻辑上讲,会话就像一组流,因此不需要创建多个流。
我有一个示例解决方案。在此解决方案中,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。