songz / cordova-plugin-opentok

Cordova Plugin for OpenTok - add webrtc video to your iOS or Android App
Other
162 stars 270 forks source link

Android. OpenTok in Ionic Framework #179

Closed fedxgibson closed 9 years ago

fedxgibson commented 9 years ago

I am having a strange issure here. I have my app working ok when building for IOS. But When building in android, where I use opentok, the html and styles broke.

This is the html:

<ion-view view-title="Consultation" cache-view="false">

 <ion-nav-bar>
    <ion-nav-back-button class="button-icon ion-chevron-left" ng-click="closeVideoCall()">
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-content  class="has-header">
    <div  id="loading">Connecting...</div>
    <div id="opentok">
      <div id="myPublisherDiv"></div>
    </div>
  </ion-content>
</ion-view>

And the css involved:

    #loading, #loading-general {
      position: absolute;
      padding-top: 20px;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
      background: black;
      color: white;
      text-align: center;
      height: 100%;
    }

    #opentok {
      height: 100vh;
    }

    #myPublisherDiv {
      position: absolute;
      width: 200px;
      height: 200px;
      bottom: 0;
      right: 0;
      z-index: 3;
    }

And in javascript:

'streamCreated': function( event ){
      var div = document.createElement('div');
      div.setAttribute('id', 'stream' + event.stream.streamId);
      document.getElementById('opentok').appendChild(div);
      div.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index:2;');
      opentokAppPublisher.session.subscribe( event.stream, div.id, {subscribeToAudio: true} );
      document.getElementById("loading").style.visibility = "visible";
      console.log("Stream created ");
    }

img_0446

The correct rendering should be as this photo. My own stream should appear right bottom of page ( I know it is on browser, it is just to show you how it should be) img_0447

I repeat, it works perfect in ios, and breaks in android.

If you need anything just tell me. Thanks in advance.

toptierlabs commented 9 years ago

I am having the a similar issue issue.

Anyone?

fedxgibson commented 9 years ago

Apparently, the problem was this:

opentok {

  height: 100vh;
}

ViewPort units is not supported on android 4.3