How to set video size to the exact size of the surrounding DIV?

[derwaldgeist]

I expected that the video would fit in the DIV that is handed over to the initPublisher() method. But on both Android and iOS, my videos are "out in Nirvana" - they appear where they want and don't have any relation to the surrounding DIV. Also, the video is way too small (approx 1/2 of the DIV's size). This happens on both Android and iOS. Is there a sample repository somewhere that shows how this scaling can be done correctly? It would also be very helpful if there was an API documentation. I had to scan the sourcecode of the JS implementation to find out that initPublisher() expected width and height statements. Otherwise, it showed errors in the console.

[fatmonkey99]

I have been trying to use this plugin myself, and can tell it has been dropped in favor of https://www.npmjs.com/package/cordova-plugin-opentokjs.

The new plugin works fine in Cordova Android, but - as of today - cannot display incoming video on iOS.

See: https://github.com/aoberoi/cordova-plugin-opentokjs/issues/13

Speaking about this plugin it seems:

• old open tok api - yes different interface, signaling will not work, etc.
• yes, videos work but they "float" wherever they want.

I will share my findings here.

[fatmonkey99]

Tested and confirmed it works as of today among these:

• OpenTOK js API on PC Firefox (42.0),
• OpenTOK js API on PC Chrome (46.0.2490.86 m),
• Cordova Android standard web view (did not test xwalk),
• Cordova iOS standard web view (did not test xwalk).

This might help:

• Signaling does not work, I will write my own with socket.io and node.js,
• videos float outside of containing elements.
• when disconnecting, make sure to unsubscribe and unpublish before session disconnect - otherwise iOS crashes.

I can share some sample code if you are interested.

[derwaldgeist]

Yes, some sample code would be awesome!

[fatmonkey99]

Here you go: https://github.com/fatmonkey99/cordova-plugin-opentok-example

[derwaldgeist]

Thanks!

[derwaldgeist]

I've seen that you now use the songz/cordova-plugin-opentok plugin instead of aoberoi/cordova-plugin-opentokjs, so I assume you did not get the other one working on iOS?

I'm still using the "songz" version as well, but I had to patch the JS file to make it work on all devices. To be honest, I never saw such a "crappy" JS implementation before. :-) I already decided to re-work this JS part as soon as I find some time to do it, and just keep the native side as it is. Not just because it is so weird, but also because it clutters the global namespace so much, which is not good for my Meteor app. It's a shame that OpenTok does not support Cordova properly...

[fatmonkey99]

Yes, we could not make the aoberoi/cordova-plugin-opentokjs to work: the iOS would always display black square for incoming video.

If you have a better version of the songz plugin, can you share your changes? Fork and drop the code on github - that would help.

BTW, we got it to the point where it looks and works OK, all style issues are addressed, etc. If you face some other problems feel free to reach out, we can share code.

Good luck!

[martyzz1]

Hi guys,

did you ever make any of your tweaks public anywhere? We're struggling to build just a simple fullscreen video with the local cam overlayed and display an end call and switch camera button...

Just wondering if you managed to handle this? We've got a forked version - updated to 2.7 sdks, and we have reliable video ios/android, but now trying to tidy it up. which I guess is the "pain points" people refer to. So hoping to not to reinvent the wheel.

We'll push our fork public once we've got this sorted (and I find time to move it out of our private app repo)..

Any help, pointers ideas would be welcome...

[byronalfonso]

@martyzz1 - If you want to make your video fullscreen. Get the width and height of the window object then pass/set that as a parameter when you instantiate the opentok object.

Example:

var fullwidth = window.innerWidth;
var fullheight = window.innerHeight;
var options = {width:fullwidth, height: fullheight};
TB.initPublisher('myPublisherDiv', options);

Hope this helps! :)

[dxe4]

i think the problem on this issue is the devicePixelRatio (half on ionic at least on the devices i tested) there's a fix on another issue but you need to edit the js https://github.com/songz/cordova-plugin-opentok/issues/187#issuecomment-191893064

[dxe4]

to be a bit more clear, using window.innerHeight and window.innerWidth the plugin styles the html element correctly, but if innerHeight is 500px and devicePixerlRatio is 2 then for the native code the height is 1000px, which is why you get the video shown as half size.