Unable to scroll video divs in opentok cordova application

Question

I am using bootstrap 3.0.2, and have used the example application for the cordova opentok plugin as the beginings of this page... I have added the 2.2 version of the opentok API for the desktop version, and the same version for the cordova application.

My issue is that if I have four windows of video, connected to the same session, my desktop application, using the 2.2 JS API works by creating the correct divs and I append them to the container div. All of that works.

But, the Android Cordova app creates the video, and attaches the divs to the page, but if there is more than two screams, then I am unable to see more than two divs, as the underlying divs scroll with the page, but the video itself remains in the same location, one on top of each other, each pushed father down the screen. In fact, if I attempt to scroll the page, I am watching the "video" background scroll away from the live video. I thought that if I appended the video container to the "mySubDiv" div tag, then it would scroll based on its container object. But, apparently it doesn't work like the desktop version.

Some code below. It is pretty simple, and I will add more if it is needed, but this should be enough for someone who has played with this object in cordova. If not, just say so. Thanks.

<!-- PART OF MY HTML FILE 

<div class="container-fluid">
    <h2>Media Detail</h2>
    <div id="myPublisherDiv"></div>
    <div id="mySubDiv"></div>
</div>
-->



// JS FILE
function onDeviceReady ()
{

var apiKey    = "MY_KEY";
var sessionId = "MY_SESSION";
var token     = "T1==MY_REALLY_LONG_TOKEN_STRING";

// Very simple OpenTok Code for group video chat
var publisherOptions = {name:"WorkAdvisor", publishVideo: true, insertMode: "after"};
var publisher = TB.initPublisher(apiKey,'myPublisherDiv',publisherOptions,);

videoSession = TB.initSession( apiKey, sessionId ); 

videoSession.on({
  'streamCreated': function( event ){
      var div = document.createElement('div');        
      div.setAttribute('id', 'stream' + event.stream.streamId);
      var oldDiv = document.getElementById('mySubDiv');
      oldDiv.appendChild(div);
      videoSession.subscribe( event.stream, div.id, {subscribeToAudio: false} );
  }
});
    videoSession.connect(token, function(){
    videoSession.publish( publisher );
});

}

songz songz · Accepted Answer · 2014-09-25T18:27:29

This is happening because the actual video streams are not actually web elements. Cordova plugin creates a fake div that is a place holder for the video, passes the div position and size into native code, and the native code draws out a video at that position ontop of cordova. During scroll, you can fix this by calling TB.updateViews() to update the native video elements to the position of the web element's new location.

Unable to scroll video divs in opentok cordova application

1 Answers