Android sizing problems

[Pentiado]

I've seen there #66 that something like year ago similar issue was reported and later fixed but now I'm getting this. On iOS everything is fine and on Android size is few times smaller than it should be.

[email protected]

[rhaker]

I had the same issue. 1 of the last 13 commits must have introduced a regression error to the specific builds we're using. When I installed from the fork at https://github.com/pfreitag/cordova-plugin-opentok, the sizing problem is no longer there. Note that this seems to use the android sdk <2.5 which triggers a Google Play openssl warning. Thoughts?

[ghost]

I have the same problem, any ideas?

[Pentiado]

We're evaluating different options than Tokbox. After that long with TB I believe nothing can be worst but in meantime I made a fork where I just multiply size by three and it looks fine.

[rhaker]

Got it working, too, but let me know what you find.

[ghost]

I think the issue is that the pixels for the native views do not correspond to the pixels in the web view.

I got it working with the following fix inside OpenTokAndroidPlugin.java:

add

import android.util.DisplayMetrics;

then replace

widthRatio = (float) mProperty.getDouble(ratioIndex);
heightRatio = (float) mProperty.getDouble(ratioIndex + 1);

with

DisplayMetrics metrics = new DisplayMetrics();
cordova.getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);

widthRatio = (float) mProperty.getDouble(ratioIndex) * metrics.density;
heightRatio = (float) mProperty.getDouble(ratioIndex + 1) * metrics.density;

Hope this helps. Not sure if this is the ideal fix but it works.

[ghost]

Also, the video views in android are shrinked to fit the container, as opposed to the iOS version where they are stretched to fill the container.

To do the latter (which should be the default imo), add

import com.opentok.android.BaseVideoRenderer;

and

mSubscriber.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL);
mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL);

[rhaker]

Agreed. The stretch-to-fill seems a better UI experience imo, too. I've got it working by adding

mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL);

after mPublisher.setPublisherListener(this);

and

mSubscriber.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL);

after mSubscriber.setSubscriberListener(this);

Do you see any bugs/problems with putting it in these locations?

[mukulmajmudar]

I was having the same issue and @asanin-2sol's DisplayMetrics-based solution worked for me. Thanks!

[sureshkoduri]

Hi

[sureshkoduri]

Hi rhaker,

It is worked for me. Thanks for your Help..

[pniaz]

You need edit opentok.js library.

In this function replace the return.

getPosition = function(divName) { ... return { top:(curtop + marginTop) * window.devicePixelRatio, left:(curleft + marginLeft) * window.devicePixelRatio, width:(width - (marginLeft + marginRight)) * window.devicePixelRatio, height:(height - (marginTop + marginBottom)) * window.devicePixelRatio }

[dxe4]

this seemed to be better solution for me, in case it helps worked perfectly fine:

  TBGetScreenRatios = function() {
    return {
      widthRatio: window.devicePixelRatio,
      heightRatio: window.devicePixelRatio
    };
  };

[angelious]

I had the same issue and I solved with @asanin-2sol solution, but both Android and IOS show the default play icon/image over the video. Some help?