Vision Pro Safari WebXR video playback not working

Question

Created Aug ’23

Replies 5

Boosts 1

Views 2.9k

Participants 5

The Safari version for VisionOS (or spatial computing) supports WebXR, as reported here. I am developing a Web App that intends to leverage WebXR, so I've tested several code samples on the safari browser of the Vision Pro Simulator to understand the level of support for immersive web content.

I am currently facing an issue that seems like a bug where video playback stops working when entering an XR session (i.e. going into VR mode) on a 3D web environment (using ThreeJS or similar). There's an example from the Immersive Web Community Group called Stereo Video (https://immersive-web.github.io/webxr-samples/stereo-video.html) that lets you easily replicate the issue, the code is available here. It's worth mentioning that video playback has been successfully tested on other VR platforms such as the Meta Quest 2.

The issue has been reported in the following forums:

https://discourse.threejs.org/t/videotexture-playback-html5-videoelement-apple-vision-pro-simulator-in-vr-mode-not-playing/53374
https://bugs.webkit.org/show_bug.cgi?id=260259

Boost

Answer 1

pasqualedsilva OP

Feb ’24

ok so believe it or not i've been researching a solution to this same problem and came across some folks who have apparently solved this... the uh adult video sites. I've seen a handful implementations with video and audio playing back in immersive mode on AVP.

IDK how to share the link because it's nsfw but i could privately message it if you contact pasquale at lingonberry dot ai

0

Answer 2

danrossi1 OP

Mar ’24

In the webxr session start event, forcing video/audio element playback works. Now need to detect for visionOS to do that. actually you can't detect what platform visionOS is. navigator.platform reports Ipad. So have to check if it's Ipad in WebXR and force play.

0

Answer 3

danrossi1 OP

Mar ’24

pseudo code. the platform detected goes between Ipad and MacIntel.

onSessionStart() { //force play for visionOS if (this.isIpad) { // this.video.play();

        const handlePaused = () => {
            this.video.removeEventListener("pause", handlePaused);
            this.video.play();
        };

        this.video.addEventListener("pause", handlePaused);


    }

}

0

Answer 4

apetru OP

Mar ’24

hi, not sure how to reach out to you but id love to learn more about your journey as a webxr dev and what kind of things you expect for content distribution at scale on the web. i imagine you-d want your webxr experiences to be in front of as many folks as possible?

0

Answer 5

fbriggs OP

May ’24

We have a working example here: https://github.com/fbriggs/lifecast_public/blob/main/web/lifecast_res/LifecastVideoPlayer11.js#L538

Note the texture needsUpdate = true part. In addition to this, it is necessary to wait for a user input (pinch) after entering the immersive session.

removeEventListener("pause", .. didn't work for us.

0