Hello there, I’m wondering whether I have found a bug - although I hope I haven’t, I hope it’s just user error.
I am attempting to play a webm in a VideoTexture in iOS and noticed something odd–although the VideoTexture does seem to “successfully load” (successful load in the Network tab, texture’s onLoadObservable is triggered, and the texture’s error callback is not called, no error message of any kind in the console), the resulting texture is rendering transparent in Babylon and transparent checkerboard in the Inspector.
I believe I have narrowed down the issue to be webm. I have replicated the same issue in this playground:
I am seeing this repro on an iPad Pro 2020 (4th Gen) with the latest iOS 18.3.2
The same webm plays fine on my iPad if I access it directly by URL.
(I see other people reporting CORS errors on iPad, but I checked the network tab, and it does seem to be loading fine, also I’m seeing same issue with webm hosted on my server)
It looks like in older ios versions (ex ios 12, ios 15) I see ‘Operation not supported’ is logged to the console during the creation of the VideoTexture - this aligns with the fact that ios has not always supported webm.
However in newer versions, that error disappears and I can hear the audio playing in the background, but cannot see the video.
I was reading that even after ios webm support was added, playback can still silently fail in some cases if the file contains audio or uses vp9 codec. In your case, I inspected the video and it seems to use vp9 codec (using edge://media-internals/ and playing the video in another tab you can inspect the video details).
However I haven’t yet confirmed whether the vp9 codec could cause video to not play while audio to play, I’m more inclined to think it is some strange ios behavior where we can trick the video element into playing properly (especially since the video plays fine in another tab, I bet we can make a change within Babylon to fix!). Still investigating, thank you for your patience!
Update: Found that this is the line which is failing and causing us to disable texture within the catch{} – Security Error ‘Ther operation is insecure’ –
Gratefully following this thread, thank you very much for your detailed info so far.
We do not need audio in our particular use case, so I will go back and research on my end whether we could eliminate audio channel. I will also determine what codec we are currently using to compress and whether it is vp9 and report back.
Update: we’ve been trying many things over here, to no avail unfortunately.
We have verified that we do indeed use the vp9 codec, and we’ve made sure we’re testing with files without audio. Unfortunately it’s not a small thing to switch codec/file format, as we’re working with a venerable legacy codebase centered around .webm, so we were looking into alternatives we can try to get some kind of webm experience.
I was seeing from some other forum threads that using a canvas to render as an intermediary instead of directly rendering the video might be a workaround, so we’ve been trying that. Surprisingly, after successfully rendering our webm’s through an HTMLVideoElement drawn to a Canvas, then creating an HTMLElementTexture from the Canvas (not the video), we are getting the same “The operation is insecure” error:
That’s pretty unexpected since we’re rendering the canvas, not the video element itself, and also pretty disheartening. It’s especially unexpected because the canvas by itself does render ok in the same iOS browser session – it’s something about the process of texImage2D that’s triggering the issue. And again like you’ve noted, it only happens for webm, not for mp4.
Been searching the web trying to find reference to this particular webm texImage2D iOS problem, nothing so far, but I guess it may be slightly niche…
We’re not sure what else to try from here, so we may end up taking a band-aid solution like have a backup static image for iOS users for the time being. Regardless, really appreciate the info and insight, it helped us come to our decision. And will keep checking back to this thread and keeping tabs on iOS version changelogs in case there ends up being happy news at some point
Thank you so much for sharing the entire process! I was actually going to try a few solutions (for an experiment I am doing with video textures), but it seems like that’s not the best path forward at the moment. Maybe pinging the webkit team on the open issue will do something? Though I am not 100% sure apple wants to fully support webm. Another example is the alpha channel, that is not supported on Safari.
