Я использую rails, tokbox, opentok, webrtc v2.0
У меня один преподаватель (издатель) с множеством учеников (подписчиков). Учитель начинает сеанс через teacher_room, а ученик может просматривать сеанс в student_room.
Учитель публикует сеанс, который просматривают и учитель, и ученики. Теперь в teacher_room мне нужны списки всех подписчиков / студентов, которые открыли веб-камеру.
Пожалуйста, проверьте коды ниже:
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>
Teacher_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);
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>
В myPublisherDiv будет отображаться только видео учителя, но в div подписчиков я хочу отображать видео всех подписчиков / студентов, которые присоединились к сеансу и подключили видеокамеру. Как управлять этим. Я столкнулся с проблемой.
Жду подходящего сценария или подсказок в ближайшее время. Спасибо.
