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 sizing problems #187

Open Pentiado opened 9 years ago

Pentiado commented 9 years ago

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.

Cordova@4.3.1

screenshot_2015-07-20-10-50-40

rhaker commented 9 years ago

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 commented 9 years ago

I have the same problem, any ideas?

Pentiado commented 9 years ago

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 commented 9 years ago

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

ghost commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

sureshkoduri commented 9 years ago

Hi

sureshkoduri commented 9 years ago

Hi rhaker,

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

pniaz commented 9 years ago

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 commented 8 years ago

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 commented 8 years ago

screenshot_20160907-180557 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?