I went through the video texture tutorial you have that shows the setting of a video as the source to a texture. This works great on Android/Chrome which is awesome. When I tested it on Safari and IOS though, I seem to get platform based security errors.
Do you have any suggestion on what I can do to get this to work on Safari/Mobile IOS?
Here is the project. Its using one of our designs which is a flipable plane that has different material per face. The video is setup to play on the 4 materials setup to rotate through when flipped
I see this when I play it on the Apple based devices:
Some additional research seems to point to CORS. Is that consistent with your observation as well? Im fairly certain my media server has the correct headers unless there are specific headers needed in this case.
Yes, looks like a CORS problem to me. However, I’ve never personally configured a web server to correct set CORS headers. Maybe somebody else knows the process?
In case anyone else runs into this before IOS updates; the issue is voiced like a CORS error but its actually a security block from the platform when the engine tries to dynamically set the texture during renders. There are some PC forum posts that found the same conclusion. You can distinguish from regular CORS by the fact that IOS will be the only platform not working.
The good news is IOS is updating to allow since AR and VR are fairly boring without the ability to affect texturing on the fly.
Ive been doing some more work to try and solve this and thinking this may be an issue with the PlayCanvas engine. You can see here that video texture on a model in WebGL seems to work fine on MACOS and IOS:
When trying the same ‘idea’ using the PlayCanvas engine; I get security errors. To eliminate the possibility that it was CORS itself, I used their same video which has the proper allow-origin settings. Despite a ‘public’ resource, Playcanvas seemed to error on loading it as a texture using the technique described in your tutorial. Im wondering if its more an issue with ‘tainted canvas’ moreso than using the video as a texture.
If that is the case, is there any work around? We would really like to use animated textures and video that will work as expected on Apple products. Right now, seeing that it is possible, just not with Playcanvas; I have to consider building our own engine for these kinds of client requests. Im not really looking forward to having to develop my own solution, any advice or suggestions would be welcome.
Disregard… I had been researching/experimenting so much i lost track of an important distinction. Those examples are using allow-origin * for the videos themselves BUT, they are being served from the same origin and not using the crossorigin property. So, the videos load on the same origin and dont activate CORS.
The Bug with IOS/MacOS is related to Safari lacking proper CORS support. You can read about the epic battle here:
Im almost done with a module to project a slideshow video onto a texture in a cross platform way. I’ll post it into the forum once complete.
I havent checked but possibly the tutorial should make it pretty bold and apparent that to do that technique the way that tutorial describes will have platform limitations. Possibly even point out a couple tutorials on how to make videos into projected slideshows if they are interested in a cross platform solution. We should all do our due diligence but I ca imagine someone thinking they have a really cool solution and going to guns only to find when testing on Safari that all their effort was wasted.
