Videosphere is no longer working in ios 14. Its completely black.

[raj457036]

Description:

• A-Frame Version: 1.0.4
• Platform / Device: iphone 11 ios 14
• Reproducible Code Snippet or URL: https://raj457036.github.io/webview_vr_player/Dev/?video=https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8

Everything was working fine untill i updated my phone to ios14. Now the Videosphere is completely black. There no error in console except for the asset load timeout. But the video is playing as i am listening to its events.

And audio is playing.

only m3u8/hls streaming are black.

Please suggest some solution 🥺.

[dmarcos]

I don't think this is an A-Frame specific problem but some iOS / Safari video playback incompatibility. Maybe not supported format? FWIW, I cannot open the standalone video url on Safari and iOS 13.7 either: https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8

@kfarr might have some insight

[raj457036]

i am able to play this URL https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8 directly in iOS 14 safari and its playing fine.

@dmarcos do you have any workaround or suggestion?

I am also getting this problem with the Google's vrview! only audio and black screen. hls/m3u8 format

[kfarr]

Hi Raj, yes I am also able to play back that file OK in iOS 14 Safari so it's likely not a codec / OS decoding issue.

I think the unfortunate answer is that video playback in webgl in general is challenging with difficult edge cases for different platforms, codecs, etc. I think it is beyond the scope of A-Frame to be able to make all those combinations work perfectly given these are lower level issues.

[raj457036]

is there any way to use a canvas as a source for a-videosphere?

I am able to get video texture on a canvas but how to use that for a-videosphere?

[kfarr]

It is possible but performance is not great using canvas for video playback
https://github.com/kfarr/aframe-canvas-video/blob/master/index.html

[rcpassos]

I have the same issue. Any update? Thanks

[dmarcos]

Notice there's likely no fix to be done on the A-Frame side. Make sure your video is CORS delivered and your site complies with user gesture policies to initiate video playback. Also make sure videos are in a format compatible with your targeted device and browser. I have no specific advice since I'm not an expert on video encoding and delivery.

FWIW, below an example of a video-sphere and A-Frame master that works both on Safari iOS 14.1 (iPhone X) and Chrome 86 / 88 on Android 11 (Pixel 3)

https://quixotic-neighborly-watchmaker.glitch.me/

Code: https://glitch.com/edit/#!/quixotic-neighborly-watchmaker?path=index.html%3A1%3A0

[tiagovignatti]

Tests I've performed:

• iOS 14.2: audio, image & gyro are working fine
• iOS 14.1: audio okay but black screen
• iOS 14.0.1: audio okay but black screen
• iOS 13.7: audio, image & gyro are working fine
• iOS 13.6: audio, image & gyro are working fine

Tested on iPhone 7 and iPhone 11, using Safari and Chrome Browser. I hope it helps someone :)

[dmarcos]

@tiagovignatti Thanks. What link did you use to test? Did you test with:

https://quixotic-neighborly-watchmaker.glitch.me/

Code: https://glitch.com/edit/#!/quixotic-neighborly-watchmaker?path=index.html%3A1%3A0

[dchan38098]

Out of curiosity, did anyone get this working with iOS 14? I've tried the example posted by @dmarcos and it seems to produce the same issue on iOS 14.6 (Safari browser).