How to Enable WebXR in an iframe (in React)

A Brief History of Browser Games

Browser games have been around for nearly as long as the internet. We all remember flash game websites, but as HTML5 became a standard, flash games were phased out. The evolution of browsers brings new opportunities for content to take advantage of the newest technology. HTML5 provided nearly boundless possibilities for game creators to create within a browser — something that was not possible using Flash.

In parallel, AR and VR were finally becoming mainstream. With massive companies (and more importantly, capital) entering the arena, it was only a matter of time before AR and VR found their way into the browser space. Enter WebXR.

We’ve been working on a website to host VR-enabled WebGL games, and of course we first needed to figure out how to host these games in a browser. Luckily, a team has been building an API to connect browsers to AR/VR hardware. This API, called WebXR, is more accessible than ever, and with a few easy steps, you can enable a AR/VR game on your own website.

Through some trial and error we ALMOST had success right out of the gate, but ran into some issues with getting the iframe to play nicely with our VR content.

Our iframe component initially looked like this:

<iframe name=”game” scrolling=’no’ frameBorder=”0" src={game_url} className={styles.iframe} />

which was fine for our non-WebXR content. We found, however, that our Oculus Quest browser wasn’t even recognizing our game to be VR compatible, so we had to go back to the drawing board.

We then tried:

<iframe allowvr="yes" name=”game” scrolling=’no’ frameBorder=”0" src={gameURL} className={styles.iframe} />

which let the Oculus Quest at least recognize that the game was VR compatible, but still didn’t enable it to “take over” the headset.

Finally, we stumbled on some information that we needed to allow fullscreen, and also allow WebXR spatial tracking:

<iframe allowvr="yes" allow="xr-spatial-tracking" allowfullscreen="yes" name=”game” scrolling=’no’ frameBorder=”0" src={gameURL} className={styles.iframe} />

Above is what the element would look like in HTML, but to enable in React JS, you’ll need to adjust the props slightly.

const properties = {
   allow: "xr-spatial-tracking",
   allowFullScreen: true,
   allowvr: "yes"
}
return( 
<div>
    <iframe {...properties} scrolling=’no’ frameBorder=”0" src={gameURL} className={styles.iframe} />
</div>
)

With this, your headset should be recognizing your game as a VR game. If you want to check out how we applied this, check out Bowman VR on our website to try your hand at the bow and arrow, or just to see a cool tech demo. We also offer free online game hosting (no strings attached, we’re just excited about WebXR), so you can also upload your own WebXR games and experiences.

If you’re interested in learning more about how to create VR content in Unity, Mozilla has a great tutorial on getting started, and we’ve put together a short tutorial on some of the issues we faced when going through Mozilla’s tutorial.