How to enable OpenTok Plugin for Internet Explorer

Question

I am trying to implement open tok for my video chat application.

I am using opentok.min.js v 2.2.9 with php SDK. It is working fine with google chrome and firefox.

According to their announcements, it should work in IE with 32 bit OS.

https://tokbox.com/opentok/libraries/client/js/release-notes.html

But it is not working for me at any version of IE.

Anybody knows how to implement it for IE?

// Detect whether this browser is IE
var isNotIE = function isIE() {
    var userAgent = window.navigator.userAgent.toLowerCase(),
            appName = window.navigator.appName;

    return !(appName === 'Microsoft Internet Explorer' || // IE <= 10
            (appName === 'Netscape' && userAgent.indexOf('trident') > -1));     // IE >= 11
};

function connect() {
    if (isNotIE() && OT.checkSystemRequirements()) {

        session = OT.initSession(apiKey, sessionId);
        sendMessage("Session has initialized. Connecting to session ... ");


        session.on({
            streamCreated: function(event) {
                sendMessage("New stream in the session: " + event.stream.streamId);
                var parentDiv = document.getElementById(subscriberElement);
                var replacementDiv = document.createElement("div"); // Create a div for the publisher to replace
                replacementDiv.id = "opentok_subscriber";
                parentDiv.appendChild(replacementDiv);

                subscriber = session.subscribe(event.stream, replacementDiv, subscriberProperties, function(error) {
                    if (error) {
                        console.log(error);
                    } else {
                        console.log("Subscriber added.");
                    }
                });
            },
            streamDestroyed: function(event) {
                sendMessage("Stream stopped streaming. Reason: " + event.reason)
            },
            signal: function(event) {
                sendMessage("Signal sent from connection " + event.from.id);
                // Process the event.data property, if there is any data.
            }
        });

        session.connect(token, function(error) {

            if (error) {
                sendMessage("Error connecting: ", error.code, error.message);
            } else {
                sendMessage("Connected to the session successfully.");
                displayBtn('connected');
            }
        });
    }else{
        sendMessage("What Should I do if it is IE?? :(");
    }
}


function sendMessage(message) {
    message = '<br>' + message;
    $("#statusbox").append(message);
}

Answer 1

Now that IE versions 8-11 are supported by the plugin, you shouldn't need to switch on the isNotIE() && OT.checkSystemRequirements() condition, you can just use the same code path for all of those browsers.

It may still be a good idea to detect IE versions that are outside that range to let the user know that the feature of your application that uses OpenTok is not supported with some suggestions to upgrade/install.

Otherwise, one code suggestion: In the streamCreated event handler, rather than using 4 lines of code to create a new DOM element and then add it to a container, you can use the insertMode: "append" option. This works for both Publishers and Subscribers.

Before:

var parentDiv = document.getElementById(subscriberElement);
                var replacementDiv = document.createElement("div"); // Create a div for the publisher to replace
                replacementDiv.id = "opentok_subscriber";
                parentDiv.appendChild(replacementDiv);
subscriber = session.subscribe(event.stream, replacementDiv, subscriberProperties, function(error) {
                    if (error) {
                        console.log(error);
                    } else {
                        console.log("Subscriber added.");
                    }
                });

After:

subscriber = session.subscribe(event.stream, document.getElementById(subscriberElement), { insertMode: "append" }, function (error) {
  if (error) {
    console.log(error);
  } else {
    console.log("Subscriber added.");
    // Set the ID of the DOM element if thats used elsewhere in the code
    subscriber.element.id = "opentok_subscriber";
  }
});