Unable to play video in iOs

[taintedstephen]

Video will not play on iOs Safari due to a security error reported in browser:

THREE.WebGLState:
SecurityError: The operation is insecure.
texImage2D
texImage2D — three.js:127:105

To Reproduce
Even the 360 demo that's part of this repo returns the same error.

Expected behaviour:
I'd say I'd expect it to play but Safari in iOs has some pretty severe CORS issues.

Tested on iPhone 6S and X, Safari, Chrome and Firefox, running the latest OS 12.3.1.

I don't know whether this is an issue of this repo (probably not), more likely it's still an issue with the operating system and its security settings. But any advice or if anyone has a decent work-around for this would be awesome.

The reason I'm using Vimeo and not hosting the files locally is for the adaptive streaming.

[guibarbosadev]

I stumbled on the same problem and apparently, it was CORS issues. I resolved it by changing the video url to progressive type when on IOS and by adding some proxy. If you wish, i can tell more details, show some code and etc, but basically, this was the solution for me.

[TheBiggestNumber]

@GuilhermeBPereira Can you please share the details on how you solved this? Thanks!

[fariskas]

@GuilhermeBPereira @TheBiggestNumber hello, do you guys mind sharing what was done to resolve the issue?

[guibarbosadev]

@fariskas i don't have the code anymore, sorry. The change to progressive type i did changing the code of vimeo-threejs-player and the proxy i did using the "cors-anywhere" library. Hope it helps you!

[fariskas]

@GuilhermeBPereira thanks for the reply.

I managed to do a workaround today by doing a fetch request to get the 302 redirect url to the mp4 video like so :

async function getMediaURLForTrack(texture_to_update, passed_url) { await fetch(passed_url, { method: 'HEAD' }) .then((response) => { texture_to_update.src = response.url }); }