HLS/M3U8 streams no longer mapping to sphere after upgrade to iOS 14? (Safari/Chrome))

Hello!

So I’ve been mapping HLS/M3U8 streams to a 360 Sphere for my application and it’s all been working great so far… until I upgraded to iOS 14. Now I’m just getting a black sphere with the audio of the stream playing. No issues with PC/Android as those support hls.js.

This seems to specifically be an issue with iOS devices on chrome/safari (not sure about other browsers), but I’ve been using the video element for iOS since it supports HLS natively through that.

I’m pretty close to app launch and this just popped up so I’m trying my best to narrow this down. I’ll detail my findings so far below.

Devices used: iPhoneXR / iPhone11
Test stream used: (https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8)

1 |
Here is a build from the above project that reproduces the issue on iOS (black screen, with audio), simply load in safari or chrome on ios and tap the play button

2 |
Here I’ve tried just playing an m3u8 stream in an html video on a webpage, this test is successful, I’m able to see the stream playing on ios/safari and ios/chrome (muted because ios but I know audio is working)

3 |
Here is a test playcanvas project I’ve been testing in, set up to use native video if hls is supported (ios), otherwise hls.js is used. “videoSrc” field on 360 player / media player script controls what is fed to video.src

Wondering if texture.setSource is not being fed the correct type anymore? Not sure though since it’s still in a video object?

Would love some insight into how to fix this issue, not sure if there is something I’m missing or overlooking. Let me know if more info is needed. Thanks!

Can you check if this tutorial works on Safari please? https://developer.playcanvas.com/en/tutorials/video-textures/

1 Like

Yep I see the video playing on iOS/Safari on those tv screens.

EDIT: Just forked repo and added the bunny stream as src for the video being fed, and saw black screens on all TVs. Didn’t expect success here but worth a try.

1 Like

If it’s not playing with an external domain URL but playing with a video in the assets, it might be protection from Safari to protect against cross domain issues? Be worth checking what the console logs say when you try run it.

1 Like

Not seeing any CORS issues in the tutorial build, tutorial build with bunny stream, and also my test 360 project with bunny stream on ios/safari.

I actually ran into this earlier and solved by using this bunny stream (which is used with the hls.js test player).

Only error I saw, on all test builds mentioned above was

Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “cdn.webglstats.com” which could put your confidential information at risk.

Doesn’t look related though, especially since it happened with the official working TV tutorial, where the videos played successfully.

Also tried debugging the video element’s type

console.log('video html: ', video.constructor.name);

Result:

video html:  HTMLVideoElement

So it looks like Safari is at least reporting a valid type for texture.setSource()

Sorry to bring up an old thread, but- has there been any discoveries with this now that iOS 14 has been out for a bit longer?

I’ve refreshed myself on the issue and it seems the stream is definitely playing (can hear audio of video even though the sphere is black, playing an m3u8 in the video element on a non-playcanvas HTML page does display the video content)

There is no CORS issues on my end as well, so I’m back at the same place which is trying to figure out why texture.setSource doesn’t apply the video texture even though it’s an accepted type to that function and the video element is playing it.

I add this to my list of things to take a look at, I’m a bit backed up at the moment so if anyone else can beat me to it :sweat_smile:

Just to check, which project is best to look at?

1 Like

You can fork this project here, has HLS.js player setup as well as iOS native video tag support.

It also uses that public mux bunny stream (stream url can be set on ‘360 sphere’ entity in hierarchy)

It looks like it is a more general issue with iOS 14 https://stackoverflow.com/questions/43287226/hls-video-streaming-on-ios-safari

More fun with WebKit https://bugs.webkit.org/show_bug.cgi?id=215908

1 Like

Dang, so it’s an issue with iOS 14 and WebGL?

Looks like that Kimmo user had a potential fix there, not sure if we could implement that?

Would it be worth trying to render the video to a canvas, then trying to feed that canvas into texture.setsource?

Which fix are you referring to? If you referring to the ticket being resolved, it’s not something PlayCanvas can implement as it’s an issue with WebKit. We will have to wait for the fix to make it to the release of iOS.

1 Like

Gotcha yeah that was what I was wondering, not sure if Playcanvas had access to the code they were altering.