BabylonJS WebXR AR workflow

I am trying to set up a development environment for BabylonJS Augmented Reality. Using a USB connected Android phone to take advantage of the WebXR AR on Android Chrome. I created a local webserver, and through a USB connection, I can use DevTools on my dev machine.

I get the following errors when I try to run the BabylonXR AR example on my phone through a local server.

BJS - [15:24:01]: Error initializing XR
e._ErrorEnabled @ babylon.js:16

babylon.js:16 BJS - [15:24:01]: WebXR not available
e._ErrorEnabled @ babylon.js:16

I can run local and web examples on my device in the same browser. For some reason, this fails.

Thank you,

Ok, after another day of thinking about my problem. I solved it and will post here for anyone in the future.

I am creating a development environment for BabylonJS WebXR AR and using Typescript, Visual Studio Code, on a Windows PC. I wanted to use my USB webcam for testing.

That idea failed! Though a support WebXR check will tell you that your windows Chrome browser supports augment reality. As of this post, it doesn’t.

This WebXR-samples doc is where the confusion started.

I quickly moved to this setup

Warning if you have a Samsung Android phone, you will have some extra setup to make DevTools work. Like, install Samsung USB drivers. Mobile - Build | Samsung Developers

I am using http-server to start a local server and running the application. Thinking I was in the clear, the next problem I ran into and why I started this post was this.

BJS - [15:24:01]: Error initializing XR
e._ErrorEnabled @ babylon.js:16
babylon.js:16 BJS - [15:24:01]: WebXR not available
e._ErrorEnabled @ babylon.js:16

WebXR wasn’t able to load on the localhost, though it worked everywhere else on my android.

The links below fixed the problem. I had to run the content via HTTPS

I hope this helps someone.

1 Like