search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.69k stars 3.98k forks source link

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

Closed raj457036 closed 4 years ago

raj457036 commented 4 years ago

Description:

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

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

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

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

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

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

I have the same issue. Any update? Thanks

dmarcos commented 4 years ago

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

Tests I've performed:

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

dmarcos commented 3 years ago

@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 commented 3 years ago

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).