Opentok : How to kill streams / publishers properly?

Question

I've got an issue using OpenTok for my mobile app (I use Phonegap and I test the app on Android).

I've succesfully created a publisher stream and a subscriber stream.

When I close the session and I try to reopen it, there are several issues :

• it seems that the previous stream is still running (I can see 2 active streams associated with the subcriber Session with Chrome inspect Element Tool) , but the video is not displayed on the screen, only the audio is active;
• when I close the session a second time, the publisher stream is still displayed on the app.

As you can see I tried different ways to close completely the streams : disconnect () , unpublish (), publisher.destroy (), but it does not work as I wish.

Here is my .js script :

function connexionOpenTok() {   
var sessionSub;
var sessionPub;
var publisher;

    $('#visioStopBtn').click(function () {

        console.log('Arret de la Visio...');
        $('#Collaboratif_mobilecontainer').show();
        $('#visioContainer').hide();
        if(sessionPub) {

        if (publisher) {
                sessionPub.unpublish(publisher);
            }
            sessionPub.publisher.destroy();
            sessionPub.disconnect();    
            sessionPub.forceDisconnect();
            sessionPub.forceUnpublish();
        }   
        if(sessionSub) {    
            sessionSub.disconnect();
            sessionSub.forceDisconnect();           
        }       
    });


    var subDiv = '<div id="visioSubscriber"></div>'
    var subPub = '<div id="visioPublisher"></div>'

    $('#visioContainer').append(subDiv).append(subPub); 

    var apiKey = "KEY"; 

    var sessionId = "ID";
    var subToken = 'TOKEN';
    var pubToken = 'TOKEN';

    // Initialize session, set up event listeners, and connect
    var width = $(window).width();
    var height = $(window).height();




    //publisher 
    setTimeout(function (){

        sessionPub = OT.initSession(apiKey, sessionId);

        sessionPub.connect(pubToken, function(error) {
            publisher = OT.initPublisher("visioPublisher", {width: width/5, height: height/5, zIndex: 3} );
            sessionPub.publish(publisher);
        }); 
    }, 1000);   

    //subscriber
    setTimeout(function (){
        sessionSub = OT.initSession(apiKey, sessionId);

        sessionSub.once("streamCreated", function(event) {

            sessionSub.subscribe(event.stream,"visioSubscriber", {width: width, height: height*0.8, zIndex: 2} );   
        });

        sessionSub.connect(subToken, function () {
        });
    }, 5000);   
}

Here is my CSS :

#visioSubscriber {
    position:absolute;
    z-index:2;
    bottom: 65px;
    left: 0px;
    }

#visioStopBtn {
    position:absolute;
    z-index:10;
    width: 85%;
    margin: 5px 3% 5px 3%;
    bottom : 8px;
}


#visioPublisher {
    display:block;
    z-index:  3;
    position: absolute;
    bottom: 65px;
    left: 3%;
}   

#visioContainer {
    background-color: black;
    width : 100%;
    height: 100%;
    z-index:  1;
    position: absolute;
    bottom:0px;
}

Here is the part of the html concerning Opentok :

<div id="visioContainer">           
        <a data-role="button" class="button"
    id="visioStopBtn" data-corners="true" data-icon="none" data-iconpos='nowhere' data-mini="false" data-theme="b">
    ARRETER LA VISIO
    </a>
</div>

Answer 1

On the JS library (officially maintained by TokBox), all publishers and subscribers should be cleaned up automatically after calling session.disconnect(). Cordova (aka PhoneGap) is a community maintained project (not officially maintained by TokBox) and dangling publisher/subscribers seems to be a bug in the cordova plugin.

There was a pull request a few days ago, can you try updating the cordova plugin and see if the issue goes away? https://github.com/songz/cordova-plugin-opentok/pull/79

If not, you should file an issue on the project page: https://github.com/songz/cordova-plugin-opentok/issues