Overview

Exokit Web is a Javascript library for composing multiple WebXR applications in a regular web page. It works in all web browsers, VR and AR headsets, with no dependencies.

index.html

import 'https://web.exokit.org/ew.js';

xrEngine = document.createElement('xr-engine');
xrEngine.src = 'app.html';

app.html

// Create WebXR session
session = await navigator.xr.requestSession('immersive-vr');

// Add Mozilla Hub
fooFrame = document.createElement('xr-iframe');
fooFrame.src = 'https://hubs.mozilla.com/VxGmqjU/fuchsia-winding-room?vr_entry_type=vr_now';
session.layers.push(fooFrame);

// Add A-Painter too
barFrame = document.createElement('xr-iframe');
barFrame.src = 'https://aframe.io/a-painter';
session.layers.push(barFrame);

See index.html for a full example.

Run examples

npm install
npm start

How to use

Import ew.js into your app:

<script type=module src="https://web.exokit.org/ew.js"></script>

In the top-level directory of your app, add sw.js with these contents:

importScripts('https://web.exokit.org/sw.js');

Finally, make sure you are serving your app over https:// (or localhost), which is required for Service Workers.

If your app is limited to your own site (same origin), you're done! Read the API Documentation.

If your app acceses other sites (i.e. CORS), the above will not work.

Cross-origin setup

To access web origins Exokit Web can use a proxy.

This requires setting an API key for the origin (domain) you're using. This is required even if you're only using the https://dev.exokit.org origin that points to 127.0.0.1.

1. Get an API key

API keys are free; ask for one in our Discord.

2. Add API key

Add your API key to your Exokit Web import:

<script type=module src="https://web.exokit.org/ew.js?key=YOUR_API_KEY_HERE"></script>

And that's it! Read the API Documentation.

Future directions

• Render HTML to texture
• Cross-app messaging
• Automatic multiplayer with WebRTC
• Immersive Web Payments API