Log in

[rgarand]

With a site that uses the javascript api to record meetings, I started seeing an error after switching to the live environment. The meetings are between two people. When the first person enters they start publishing and see themselves. When the second person enters they start publishing as well and see both feeds. However the first person still does not see the second person. At the time that the second person connects, the first browser shows an error in getSubscriberWrapper. The debugging output shows this (from the first browser):

[DEBUG] opentok: OpenTok JavaScript library v0.91.57
TB.min.js (line 36)
[DEBUG] opentok: Release notes: http://www.tokbox.com/opentok/api/tools ... Notes.html
TB.min.js (line 36)
[DEBUG] opentok: Known issues: http://www.tokbox.com/opentok/api/tools ... nownIssues
TB.min.js (line 36)
[DEBUG] opentok: TB.setLogLevel(4)
TB.min.js (line 36)
[DEBUG] opentok: TB.initSession(<session id>)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(sessionConnected)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(sessionConnected)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(archiveCreated)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(archiveCreated)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(sessionDisconnected)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(sessionDisconnected)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(connectionCreated)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(connectionCreated)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(connectionDestroyed)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(connectionDestroyed)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(streamCreated)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(streamCreated)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(streamDestroyed)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(streamDestroyed)
TB.min.js (line 36)
[DEBUG] opentok: Session.connect(<api key>)
TB.min.js (line 36)
[DEBUG] opentok: TB.checkSystemRequirements()
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(envLoaded)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(envLoaded)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(dynamicConfigChanged)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(dynamicConfigLoadFailed)
TB.min.js (line 36)
[DEBUG] opentok: TB.sessionConnected: <session id>
TB.min.js (line 36)
[DEBUG] opentok: Session.publish(ot_opentok_1_publisher):[object Object]
TB.min.js (line 36)
[DEBUG] opentok: TB.initPublisher(ot_opentok_1_publisher)
TB.min.js (line 36)
[DEBUG] opentok: Pending: publishToSession(<session id>,<token>) on component publisher_1
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(accessAllowed)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(accessAllowed)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(accessDenied)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(accessDenied)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(deviceInactive)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(deviceInactive)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(resize)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(resize)
TB.min.js (line 36)
[DEBUG] opentok: TB.removeEventListener(settingsButtonClick)
TB.min.js (line 36)
[DEBUG] opentok: TB.addEventListener(settingsButtonClick)
TB.min.js (line 36)
[DEBUG] opentok: TB.deviceAccessHandler: accessDialogOpened
TB.min.js (line 36)
[DEBUG] opentok: TB.resize
TB.min.js (line 36)
[DEBUG] opentok: Component loaded: publisher_1
TB.min.js (line 36)
[DEBUG] opentok: callFlash: publishToSession(<session id>,<token>) on component undefined
TB.min.js (line 36)
[DEBUG] opentok: TB.devicesDetected
TB.min.js (line 36)
[DEBUG] opentok: TB.resize
TB.min.js (line 36)
[DEBUG] opentok: TB.deviceAccessHandler: accessDialogClosed
TB.min.js (line 36)
[DEBUG] opentok: TB.deviceAccessHandler: accessAllowed
TB.min.js (line 36)
[DEBUG] opentok: TB.micGainChangedHandler:50
TB.min.js (line 36)
[DEBUG] opentok: TB.streamCreated
TB.min.js (line 36)
[DEBUG] opentok: TB.echoCancellationModeChangedHandler
TB.min.js (line 36)
[DEBUG] opentok: TB.streamRecordingStartedHandler:<session id>
TB.min.js (line 36)
[DEBUG] opentok: TB.streamRecordingStartedHandler: signal: 238068589
TB.min.js (line 36)
[DEBUG] opentok: TB.connectionCreated
TB.min.js (line 36)
[DEBUG] opentok: TB.echoCancellationModeChangedHandler
TB.min.js (line 36)
[DEBUG] opentok: TB.streamCreated
TB.min.js (line 36)
cyclic object value
[Break On This Error]

... ({opentok_stream: JSON.stringify(stream), opentok_session: JSON.stringify(sessi...

opentok.js?m5kb3b (line 100)
[DEBUG] opentok: TB.streamRecordingStartedHandler:<session id>
TB.min.js (line 36)
[DEBUG] opentok: TB.echoCancellationModeChangedHandler
TB.min.js (line 36)
[DEBUG] opentok: TB.echoCancellationModeChangedHandler
TB.min.js (line 36)
[DEBUG] opentok: TB.streamPropertyChangedHandler
TB.min.js (line 36)
[DEBUG] opentok: TB.streamPropertyChangedHandler
TB.min.js (line 36)

This happens on Windows 7 with Chrome 19 and Firefox 12 (regardless of which browser is the first in the meeting). Both browsers pass the diagnostic. The issue ID is 1952758E4DD2C8F67C1940AEBBBEF237.

[jtsai]

Hi there

Where does getSubscriberWrapper come from? Could you show us some of your code, including the streamCreated code? What is the error message you are getting? What does the code look like around there?

From what I can see, this is a problem with the implementation, not opentok. We would need to have some code from the implementation to determine what is wrong.

Thanks,
John

[rgarand]

Sorry, I didn't look closely enough at the filename This seems to be in the Drupal opentok module. I will submit a bug report there.

[dramyrein]

I am also facing same problem using drupal 7.x-1.1-alpha2 module.
This error comes from opentok.js file, following is the code in opentok.js file :
Please check the code in Drupal.openTok.getSubscriberWrapper function.

(function ($) {
if(!Drupal.openTok){
Drupal.openTok = { };
}

Drupal.behaviors.openTok = {
attach: function(context, settings) {
$('.opentok-container', context).each(function(){
if(settings.openTok[this.id]){
var options = settings.openTok[this.id];
options.token = Drupal.openTok.getConnectionToken;
options.publisherWrapper = Drupal.openTok.getPublisherWrapper;
options.streamWrapper = Drupal.openTok.getSubscriberWrapper;
options.logLevel = $.openTok.logLevel.debug;
$(this).openTok(options)
.bind($.openTok.event.sessionConnected, Drupal.openTok.registerConnection)
.bind($.openTok.event.streamAdded, Drupal.openTok.attachToStream)
.bind($.openTok.event.streamRemoved, Drupal.openTok.streamRemoved)
.bind($.openTok.event.publish, Drupal.openTok.attachToPublisher)
.bind($.openTok.event.unpublish, Drupal.openTok.unpublish)
.openTokLayout();
}
});
}
};

Drupal.openTok.registerConnection = function(e){
$.ajax({
type: 'POST',
url: Drupal.settings.basePath + 'opentok/register',
data: ({opentok_connection: JSON.stringify(e.openTok.eventData.target.connection)}),
})
$('.opentok-snapshot-publisher', e.openTok.element).hide();
}

Drupal.openTok.attachToStream = function (e){
var stream = e.openTok.element.openTok('getStream', e.openTok.eventData.streamId);
$('.opentok-snapshot-stream', stream.jq).bind('click.openTok', function(e){
var imgData = stream.subscriber.getImgData();
var img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);
var imgWin = window.open("about:blank", "Screenshot");
imgWin.document.write("<body></body>");
imgWin.document.body.appendChild(img);
$(this).blur();
return false;
});
stream.jq.bind('mouseover.openTok', function(e){
$('.opentok-stream-controls', stream.jq).show();
});
stream.jq.bind('mouseout.openTok', function(e){
$('.opentok-stream-controls', stream.jq).hide();
});
$('.opentok-stream-controls', stream.jq).hide();

//Drupal.openTok.tileLayout(e.openTok.element);
};

Drupal.openTok.attachToPublisher = function (e){
var publisher = e.openTok.eventData.publisher;
$('.opentok-snapshot-publisher', e.openTok.element).bind('click.openTok', function(e){
var imgData = publisher.getImgData();
var img = document.createElement("img");
img.setAttribute("src", "data:image/png;base64," + imgData);
var imgWin = window.open("about:blank", "Screenshot");
imgWin.document.write("<body></body>");
imgWin.document.body.appendChild(img);
$(this).blur();
return false;
}).show();
var publisherElement = $('.opentok-publisher-wrapper', e.openTok.element);
publisherElement
.bind('mouseover.openTok', function(e){
$('.opentok-publisher-controls', publisherElement).show();
})
.bind('mouseout.openTok', function(e){
$('.opentok-publisher-controls', publisherElement).hide();
});
$('.opentok-publisher-controls', publisherElement).hide();
};

Drupal.openTok.streamRemoved = function(e){

};

Drupal.openTok.unpublish = function (e){
$('.opentok-snapshot-publisher', e.openTok.element).hide();
};

Drupal.openTok.getPublisherWrapper = function(session){
return $.ajax({
type: 'POST',
url: Drupal.settings.basePath + 'opentok/stream-wrapper',
data: ({opentok_stream: JSON.stringify(stream), opentok_session: JSON.stringify(session)}),
async: false,
dataType: 'html',
}).responseText;
};

Drupal.openTok.getSubscriberWrapper = function(session, stream){
return $.ajax({
type: 'POST',
url: Drupal.settings.basePath + 'opentok/stream-wrapper',
data: ({opentok_stream: JSON.stringify(stream), opentok_session: JSON.stringify(session)}),
async: false,
dataType: 'html',
}).responseText;
};
})(jQuery);