VR video cuts when it loads the first time in Android

[#1]

I am loading a 360 degree video generated from captivate in webview in Android. When I enter VR mode, the right half of the VR mode gets cut. Kindly refer Image 1. 

After this when I go in background mode and resume the app again then the VR video is loaded properly. Kindly refer Image 2.

In iOS it is working fine but I think this issue still persists for Android. Kindly help. Thanks in advance.

Update:

I forgot to mention 1 thing about this is that earlier when I kept the width and height of webview as same as device screen width and height (resolution of phone greater than full HD), the video was rendering properly at the first time but then the problem was that in VR mode it didn't look as one video in cardboard. It looked like there was some distortion and video was in 2 parts, simply speaking I can see 2 dots at the center instead of one.

So I started reducing the width of the webview until it fixed this issue, which comes to around 1920. So I assume the video was created in 1920x1080 resolution. But then this problem started occurring.

[#2]

I am loading a 360 degree video generated from captivate in webview in Android. When I enter VR mode, the right half of the VR mode gets cut. Kindly refer Image 1. 

After this when I go in background mode and resume the app again then the VR video is loaded properly. Kindly refer Image 2.

In iOS it is working fine but I think this issue still persists for Android. Kindly help. Thanks in advance.

Update:

I forgot to mention 1 thing about this is that earlier when I kept the width and height of webview as same as device screen width and height (resolution of phone greater than full HD), the video was rendering properly at the first time but then the problem was that in VR mode it didn't look as one video in cardboard. It looked like there was some distortion and video was in 2 parts, simply speaking I can see 2 dots at the center instead of one.

So I started reducing the width of the webview until it fixed this issue, which comes to around 1920. So I assume the video was created in 1920x1080 resolution. But then this problem started occurring.

[#3]

Hi,

was this working before an update was applied?

is this happening with every file or just the one you're working with?

[#4]

Hi ls_rbls,

The content was not created by us but by our partner and shared with us. So we are not really aware in which version of Captivate the content was created. And the partner is also on Christmas vacation. So that info will be available only after he comes back from leave.

Currently we have 2 test contents and it is happening for both of them.

[#5]

Hi,

You mentined that the VR content seems to be OK in iOS but not in Android. 

Is the VR content app the same in both iOS and AndroidOS?

I can think of two possible work arounds for Android:

• access your Android device in engineer mode and calibrate the gyroscope

• Or download from Google Playstore an app that doesn't require gyroscope to play VR content and see if the problem also manifests in that app

[#6]

Hi,

Yes the app is same, build for both iOS and Android platform.

I have tried it in multiple devices, kindly find the list of that devices in the comment below. So I am not sure if calibrating the gyroscope will help. Still I will try that also.

[#7]

Taking your last reply into consideration, it seems like Android only supports Chrome browser to play WebVR.

So this means that you may have to download and install Chrome browser in your Android devices (if you haven't yet) and  enable the WebVR  token for that browser.

See if this link helps:

https://immersive-expressions.siggraph.org/instructions.html 

Scroll down in that page where it says "Chrome for Android".

[#8]

MODIFIED REPLY

I forgot to add how to enable webview implementation in Android devices.

Here is a good short video on how to enable developer mode in MIUI android devices:

https://m.youtube.com/watch?v=bjntq8-72hw 

And how to access engineer mode without typing any special codes:

https://m.youtube.com/watch?v=1QzeXagcrww#searching 

Once you get access to the developer mode hidden settings you can enable webview and maybe other related webview rendering options.

And once you get access to enginner mode you should be able to use the gyroscope calibration  tool

[#9]

My app is an Unity app and I am using UniWebView plugin to open the 360 degree video/image content created via Captivate inside the app in that webview.

It is working fine in iOS but not in Android. So I think the problem is not with that plugin but with the Captivate content itself (as mentioned above) because it is replicable in almost all the Android devices.

The YouTube videos works properly in VR mode without any issue. So I doubt calibrating the gyroscope will help.

[#10]

Yes you're absolutely right.

I'm just a PC repair guy, if it was my device I would trial by fire everything, push on every button, uninstall reinstall every software imaginable, and if something works out of all that mumbojumbo that is the solution.

So, your issue, like you've  pointed out , is starting to look more like some compatibility layer missing between the Android devices that you're testing on the plugin embedded in your Captivate app.

In the meanwhile were you able to check if webview implementation is enabled in those Android devices were the problem is showing?

I will document myself better and return with a better reply. 

[#11]

Hi,

I found a few  links of interest:

Changing the traget object for the intended platform:

https://docs.uniwebview.com/guide/working-with-code.html 

NOTE: system requirement for Android devices is API 25 and above. UniwebView also redid from scratch the code in the newest version. If you're using an older version of UniWebView and need to upgrade see the UniWebView Migration Guide in their support website.

Review the SetFrame related APIs

https://docs.uniwebview.com/api/ 

Release Notes - Fixes

https://github.com/onevcat/UniWebView-Docs/blob/master/docs/release-note/README.md 

Install Guide, see section  that covers steps for Android:

https://docs.uniwebview.com/guide/installation.html 

Additional tips from UniWebView.com:

https://docs.uniwebview.com/guide/faq.html 

[#12]

Could you please indicate the version of Android, and the devices you tested on? 

[#13]

Hi Lilybiri,

I've tested it in following devices:-

Redmi Note 7  Android version - v9 PKQ1.180904.001 MIUI - 10.2.11.0

Vivo V11 Pro Android version - 9

Oppo F7 Android version - 9

[#14]

Which app did you use to watch the VR? 

[#15]

I am creating an app to see the VR content in a webview.