call embed

The one-line 3D call widget. The <dxr-call> element below is mounted with no options at all: hosted signalling, the best camera it can find, the SDK's own lobby, invite link + QR and controls. Start a call here, send the link to someone (or open it in a second browser), and up to four people are in it. On the DisplayXR Browser with a 3D display the other people are in glasses-free 3D — a stereo camera is sent as a real side-by-side pair and converged on the face, a plain webcam is lifted from 2D to 3D on the receiving side. In any other browser it is the same call, fully working, in 2D.

Detecting DisplayXR Browser…

Copy this snippet

Paste it into any page — a CMS block, a static site, an SPA layout. Two lines, no build step, no account. @1 follows the 1.x line; pin an exact version in production.

CDN — any page, no build step index.html 
<script type="module" src="https://cdn.jsdelivr.net/npm/@displayxr/inline3d@1/dist/call.js"></script>
<dxr-call></dxr-call>
With options index.html 
<dxr-call accent="violet" layout="speaker" max-peers="3"></dxr-call>
<script type="module">
  const el = document.querySelector('dxr-call');
  el.addEventListener('dxr-call:joined', (e) => console.log('in room', e.detail.room));
  el.addEventListener('dxr-call:error',  (e) => console.warn(e.detail.code, e.detail.message));
</script>
npm — a bundled app (2D→3D lift included) app.js 
import { mountCall } from '@displayxr/inline3d/call/full';

const call = await mountCall(document.getElementById('call'));
call.on('peer', ({ id }) => console.log('peer', id));
shareBtn.onclick = () => navigator.share({ url: call.inviteLink() });