Including a WebM video in A-Scene causes Safari Tab to crash on iOS

🧑‍💻 Technical Support
,
1

This crash is reproducible on iOS 17 and iOS 18 (latest patches), both in Safari and Chrome (WebKit).

This is a self hosted project. What I am seeing on multiple iPhones is that the webpage loads but then crashes - sometimes before VPS can initialize, somtimes when the scene is loaded and video begins to play. And if I comment the video elements in my A-Scene, it works again without instability. 1. It works fine on Android device using Chrome browser, fwiw

Here is a video recording of the issue: https://we.tl/t-1cY1rdUNjR
And below is a web console log which I captured in one of the tests of this problem.
[2024-11-25T15:11:01.168Z] [WARN] webvr-polyfill: Invalid timestamps detected: Timestamp from devicemotion outside expected range.
[2024-11-25T15:11:02.603Z] [ERROR] [RuntimeError] XR caught an error; stopping. TypeError: null is not an object (evaluating ‘I.majorVersion’)
[2024-11-25T15:11:02.622Z] [ERROR] XR threw an exception TypeError: null is not an object (evaluating ‘I.majorVersion’)
[2024-11-25T15:11:02.626Z] [ERROR] registerContext@https://cdn.8thwall.com/xr-27.2.5.427/simd/slam.js:1:5452053
LA@https://cdn.8thwall.com/xr-27.2.5.427/simd/slam.js:18:48172
@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:18:78577
reduce@[native code]
Z@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:18:78540
@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:18:76032
attach@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:18:75197
nA@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:18:82782
@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:18:86183
e@https://cdn.8thwall.com/xr-simd-27.2.5.427.js:1:5193

I can provide iOS System log as well, it references WebGPU process crashing but without any more detailed info, unfortunately.

2

Thanks for flagging this issue, I’ll see if I can reproduce it and forward it to our engineering team.

1 Like
3

Good morning, were you able to reproduce the issue on your end? Attached is one of the .webm files which we are trying to play in our AR experience. We have two files and both cause the crash. Please kindly let me know if you need further information to move forward on resolving this issue. Thank you very much!

4

Hi, just checking in on the video crash which is a blocking issue for our project, with a deadline of before Christmas. We now need to find a workaround and change our creative concept, to avoid this issue. Please kindly update me as soon as possible with a resolution on the crash, thank you.

5

Hi! Could you please resend the video? I tried the experience, but without access to the editor or the ability to run it locally, it’s challenging to reproduce the crash. I haven’t encountered crashes related to WebM files before, so it seems like this issue might be specific to your project.

6

Using transparent videos in web 3D frameworks is tricky and can cause a variety of issues; I would highly recommend converting this to an .mp4 and replacing the background with a solid color, then using a chromakey shader to remove that color. We have many sample projects demonstrating “green screen video”, including for A-Frame, three.js, and Studio.

1 Like
7

Hi, here is a new link to the screen recording showing the crash: Unique Download Link | WeTransfer

8

As Evan mentioned, I’d also suggest converting the videos to .mp4. You can do this with a tool like Handbrake.

1 Like
9

Alright, we will change the experience to avoid transparent videos. If you want to reproduce the issue, the .webm file is attached in my second message in this thread, and here is a code snipped from our A-Scene for the first wayspot, which includes video:

<div id="ar">
	<!-- A-Frame Scene -->
	<a-scene
		ref="ascene"
		id="ascene"
		xrextras-almost-there
		xrextras-loading
		xrextras-runtime-error
		xrweb="enableVps: true;"
	>
		<!-- ASSETS -->
		<a-assets>
			<video
				id="video_1"
				src="/01/FlussUndAue.webm"
			></video>
		</a-assets>

		<!-- Camera -->
		<a-camera position="0 0 0"></a-camera>

		<!-- WAYSPOTS -->
		<!-- station 1 -->
		<a-entity
			named-wayspot="name: station-1:-f"
			position="0 0 0"
		>
			<a-entity
				gltf-model="station-1_-f.glb"
				xrextras-hider-material
			></a-entity>
			<a-video
				src="01/FlussUndAue.webm"
				width="6"
				height="6"
				position="10 1 -5"
				rotation="0 -60 0"
				playsinline="true"
				webkit-playsinline="true"
			></a-video>
		</a-entity>
	</a-scene>
</div>

Regarding the format, I don’t see why we should be using MP4 instead of WEBM, since the latter is the more modern and compact (download size) format. It also plays fine in “vanilla” A-Frame. But of course, we can re-encode them, if necessary. I will test it and update you here on whether the WebM videos cause instability even without an alpha layer.