둘 이상의 세션을 할 필요는 실제로 없다 (각 사용자는 PHP SDK를 통해 각 세션에 대한 자신의 토큰을 얻는다). 문제는 각 클라이언트가 스트림을 게시해야하고 각 클라이언트가 다른 클라이언트의 스트림 하나를 선택하고 구독 할 수 있어야한다는 사실로 요약 될 수 있습니다. 논리적으로 세션은 이미 스트림 그룹과 유사하므로 하나 이상의 세션을 만들 필요가 없습니다.
나는 당신을위한 해결책이있다. 이 솔루션에서 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
참고 : 훨씬 나중에 내 게시물 이상이를 보는 경우 토큰이 만료 될 수 있습니다. Dashboard에서 자신의 apiKey
, sessionId
및 token
을 사용하거나 Server SDK를 사용하십시오.
정말 고마워요! 나는 당신의 코드로 놀아왔다 :-) - 나는 그런 대답을 위해 나이를 먹고있다. –