@displayxr/inline3d 1.48.0 → 1.49.1

package/js/call/element.js

@@ -37,7 +37,7 @@ import { mountCall, dxrSignaling } from '../inline3d-call.js';
 
 /** Every call event is re-dispatched as `dxr-call:<type>`; `dxr-call:ready` carries the handle. */
 export const CALL_EVENT_PREFIX = 'dxr-call:';
-const CALL_EVENTS = ['joined', 'left', 'peer', 'peerleft', 'state', 'display', 'speaker', 'quality', 'error', 'warning', 'name', 'message', 'signal', 'weave', 'speaking'];
+const CALL_EVENTS = ['joined', 'left', 'peer', 'peerleft', 'state', 'display', 'speaker', 'quality', 'error', 'warning', 'name', 'message', 'signal', 'weave', 'speaking', 'content'];
 const TAG = '[inline3d/call] <dxr-call>';
 
 /** A boolean attribute: present is true, unless its value spells "false"/"0"/"off"/"no". */
@@ -70,6 +70,7 @@ const str = (v) => (v === null || v === undefined || String(v).trim() === '' ? u
  * | `mono3d="off"`       | `mono3D: 'off'`                          |
  * | `no-audio`           | `audio: false`                           |
  * | `no-self-view`       | `selfView: false`                        |
+ * | `self-content-view`  | `selfContentView: true`                  |
  * | `no-auto-converge`   | `autoConverge: false`                    |
  * | `no-send-convergence`| `sendConvergence: false`                 |
  * | `cursor="depth"`     | `cursor: 'depth'`                        |
@@ -103,6 +104,7 @@ export function attrsToOpts(source) {
   if (m3 && /^(off|false|0|no)$/i.test(m3)) o.mono3D = 'off';
   if (isOn(get('no-audio'))) o.audio = false;
   if (isOn(get('no-self-view'))) o.selfView = false;
+  if (isOn(get('self-content-view'))) o.selfContentView = true;
   if (isOn(get('no-auto-converge'))) o.autoConverge = false;
   if (isOn(get('no-send-convergence'))) o.sendConvergence = false;
   if (str(get('cursor')) === 'depth') o.cursor = 'depth';

package/js/call/options.js

@@ -123,6 +123,8 @@ export function normalizeCallOptions(opts = {}) {
     chrome,
     autoJoin: opts.autoJoin === undefined ? !chrome : !!opts.autoJoin,
     selfView: opts.selfView === undefined ? true : !!opts.selfView,
+    // A woven preview of what this side shares (`shareContent`), as a content tile with id 'self'.
+    selfContentView: !!opts.selfContentView,
     tileAspect: aspect,
     // theme → the CSS custom properties written on the host, and the string table.
     cssVars,

package/js/call/share.js

@@ -0,0 +1,179 @@
+// call/share.js — 3D screen share, the page side: find the running DisplayXR apps the browser
+// offers as share sources, and open one as a side-by-side content track for `handle.shareContent()`.
+//
+// PREVIEW tier (docs/sdk-stability.md). The device contract is runtime ADR-061 /
+// `XR_DXR_app_share`: the DisplayXR Browser lists each shareable app as a `videoinput` labelled
+// `DisplayXR: <app> (3D)` with a `dxr-app:` device id, and the opened track describes itself in
+// `getSettings().displayxrStereo` (`source: 'app'`, `appName`, `zeroDisparityShiftFrac`). Browsers
+// that predate those hint fields still use the label and the id, so detection takes any one of the
+// three (camera/app-share.js) and a missing `zeroDisparityShiftFrac` reads as 0 — which is what the
+// runtime sends in v1 anyway: the views are DISPLAY-REFERRED (zero disparity at the sender's display
+// plane), so a receiver applies that known value and never measures the frames.
+//
+// App devices are listed only once the page holds camera permission (ADR-061 decision 17). The
+// runtime asks the user on the SENDER's machine, every start ("Share <app> with <browser>?"), when
+// `openAppShare()` opens the device; a Deny rejects it (`code: 'share-denied'`). The track ends
+// (`ended`) when the app exits or the share is stopped from the runtime side.
+//
+// Browsers WITHOUT the app-share device patch (DisplayXR Browser 1.9.x) list an app through their
+// stereo-camera factory as `3D Camera (DisplayXR) - <app>` — and, whenever the runtime lists more
+// than one source, give the real camera the same shape. So when no ADR-form device exists,
+// `listShareableApps()` returns those as CANDIDATES (`legacy: true`), and `openAppShare()` verifies
+// the opened track (`isAppShareHint`: baseline 0 and FOV 0 is an app) — a real camera is closed
+// again with `code: 'not-app-share'`.
+
+import { isAppShareDevice, isAppShareHint, legacyAppCandidate, appNameFromLabel, APP_SHARE_ID_PREFIX, APP_SHARE_LABEL_RE, APP_SHARE_LEGACY_LABEL_RE } from '../camera/app-share.js';
+import { sanitizeName, CONV_MAX_FRAC } from './wire.js';
+
+export { isAppShareDevice, isAppShareHint, legacyAppCandidate, appNameFromLabel, APP_SHARE_ID_PREFIX, APP_SHARE_LABEL_RE, APP_SHARE_LEGACY_LABEL_RE };
+
+/** The app name a label carries: the ADR form, else a legacy candidate's `<name>`. */
+const nameOfLabel = (label) => sanitizeName(appNameFromLabel(label)) || sanitizeName((legacyAppCandidate(label) || {}).appName) || null;
+
+/** What `openAppShare` asks for by default: the runtime's default stream (ADR-061 decision 5). */
+const SHARE_CONSTRAINTS = Object.freeze({ width: 2560, height: 720, frameRate: 30 });
+
+const mdOf = (o) => (o && o.mediaDevices) || (globalThis.navigator && navigator.mediaDevices) || null;
+
+/**
+ * The running apps this browser offers to share: `[{ deviceId, label, appName }]`, in the
+ * browser's order. Empty without camera permission (the browser lists none before it), on any
+ * other browser, or when nothing is shareable. Never rejects.
+ *
+ * On a browser without the app-share device patch (no ADR-form device listed), the entries are the
+ * `3D Camera (DisplayXR) - <name>` CANDIDATES instead, marked `legacy: true`. A real camera can be
+ * among them (that browser labels every source that way once there are two); `openAppShare()`
+ * tells them apart and rejects a camera with `not-app-share`.
+ * @param {{ mediaDevices?: MediaDevices }} [o]
+ */
+export async function listShareableApps(o = {}) {
+  const md = mdOf(o);
+  if (!md || typeof md.enumerateDevices !== 'function') return [];
+  let list = [];
+  try {
+    list = await md.enumerateDevices();
+  } catch {
+    return [];
+  }
+  const videos = list.filter((d) => d && d.kind === 'videoinput');
+  const apps = videos
+    .filter((d) => isAppShareDevice(d))
+    .map((d) => Object.freeze({ deviceId: d.deviceId, label: d.label || '', appName: sanitizeName(appNameFromLabel(d.label)) || sanitizeName(d.label) || null }));
+  if (apps.length) return apps;
+  return videos
+    .filter((d) => d.deviceId && legacyAppCandidate(d))
+    .map((d) => Object.freeze({ deviceId: d.deviceId, label: d.label || '', appName: nameOfLabel(d.label), legacy: true }));
+}
+
+/**
+ * `cb(apps)` now and whenever the list changes (`devicechange`: an app started, exited, or the
+ * page was just granted the camera). Returns the unsubscribe.
+ * @param {(apps: Array<{deviceId: string, label: string, appName: string|null}>) => void} cb
+ * @param {{ mediaDevices?: MediaDevices }} [o]
+ */
+export function watchShareableApps(cb, o = {}) {
+  if (typeof cb !== 'function') throw new TypeError('@displayxr/inline3d/call: watchShareableApps(cb) takes a function');
+  const md = mdOf(o);
+  let last = null;
+  let live = true;
+  let seq = 0;
+  const run = async () => {
+    const mine = ++seq;
+    const apps = await listShareableApps({ mediaDevices: md });
+    if (!live || mine !== seq) return; // a newer read is in flight (devicechange bursts)
+    const key = JSON.stringify(apps.map((a) => [a.deviceId, a.label, !!a.legacy]));
+    if (key === last) return;
+    last = key;
+    try {
+      cb(apps);
+    } catch (err) {
+      console.error('[inline3d/call] watchShareableApps listener threw', err);
+    }
+  };
+  const onChange = () => void run();
+  if (md && typeof md.addEventListener === 'function') md.addEventListener('devicechange', onChange);
+  void run();
+  return () => {
+    live = false;
+    if (md && typeof md.removeEventListener === 'function') md.removeEventListener('devicechange', onChange);
+  };
+}
+
+/**
+ * The content descriptor of an opened share track (what `shareContent` sends): side-by-side, its
+ * size, the app name, and the KNOWN convergence — `frac` is the hint's `zeroDisparityShiftFrac`
+ * (the disparity of the sender's display plane as a fraction of the per-eye width; 0 in v1, and 0
+ * when the browser does not expose it yet). Pure.
+ * @param {MediaStreamTrack} track
+ * @param {string} [fallbackLabel]
+ */
+export function describeAppShare(track, fallbackLabel = '') {
+  let st = {};
+  try {
+    st = (track && typeof track.getSettings === 'function' && track.getSettings()) || {};
+  } catch {
+    st = {};
+  }
+  const hint = st.displayxrStereo && typeof st.displayxrStereo === 'object' ? st.displayxrStereo : {};
+  const z = hint.zeroDisparityShiftFrac;
+  const frac = typeof z === 'number' && Number.isFinite(z) ? Math.max(-CONV_MAX_FRAC, Math.min(CONV_MAX_FRAC, z)) : 0;
+  // The hint's name, else the label's: the ADR form, or a legacy candidate's ` - <name>`.
+  const appName = sanitizeName(hint.appName) || nameOfLabel(track && track.label) || nameOfLabel(fallbackLabel) || null;
+  return {
+    kind: 'content',
+    format: hint.layout && hint.layout !== 'side-by-side' ? 'mono' : 'sbs',
+    width: st.width > 0 ? st.width : 0,
+    height: st.height > 0 ? st.height : 0,
+    convergence: { known: true, frac },
+    appName,
+  };
+}
+
+/**
+ * Open one shareable app (a `deviceId` from `listShareableApps`) as a side-by-side track. This is
+ * when the runtime asks the user on this machine; Deny rejects with `code: 'share-denied'`. A device
+ * that turns out not to be an app share is closed again (`code: 'not-app-share'`) — on a browser
+ * without the app-share device patch that is how a `legacy` candidate that is really a camera
+ * (its track's baseline is not 0) is told apart from an app. The track is
+ * yours: stop it when you stop sharing (`track.stop()`), or the runtime keeps the share open.
+ *
+ * @param {string} deviceId
+ * @param {{ width?: number, height?: number, frameRate?: number, mediaDevices?: MediaDevices }} [o]
+ * @returns {Promise<{ stream: MediaStream, track: MediaStreamTrack, descriptor: ReturnType<typeof describeAppShare> }>}
+ */
+export async function openAppShare(deviceId, o = {}) {
+  if (typeof deviceId !== 'string' || !deviceId) throw Object.assign(new TypeError('@displayxr/inline3d/call: openAppShare(deviceId) needs a deviceId from listShareableApps()'), { code: 'not-app-share' });
+  const md = mdOf(o);
+  if (!md || typeof md.getUserMedia !== 'function') throw Object.assign(new Error('getUserMedia is not available (insecure context?)'), { code: 'share-failed' });
+  const want = (v, d) => ({ ideal: Number.isFinite(v) && v > 0 ? v : d });
+  let stream;
+  try {
+    stream = await md.getUserMedia({
+      video: { deviceId: { exact: deviceId }, width: want(o.width, SHARE_CONSTRAINTS.width), height: want(o.height, SHARE_CONSTRAINTS.height), frameRate: want(o.frameRate, SHARE_CONSTRAINTS.frameRate) },
+      audio: false,
+    });
+  } catch (err) {
+    const denied = !!err && (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError' || err.name === 'SecurityError');
+    throw Object.assign(new Error(`could not share the app: ${(err && err.message) || err}`), { code: denied ? 'share-denied' : 'share-failed', cause: err });
+  }
+  const track = stream.getVideoTracks()[0] || null;
+  let hint = null;
+  try {
+    hint = track && typeof track.getSettings === 'function' ? (track.getSettings() || {}).displayxrStereo : null;
+  } catch {
+    hint = null;
+  }
+  // A track whose hint describes a camera (a `source` other than 'app', or a real baseline) is not
+  // an app, whatever its label or id; otherwise the label, the id or the hint must say "app".
+  const cameraHint = !!hint && typeof hint === 'object' && !isAppShareHint(hint) && (typeof hint.source === 'string' || hint.baselineMm > 0);
+  if (!track || cameraHint || !(isAppShareDevice(track) || deviceId.startsWith(APP_SHARE_ID_PREFIX))) {
+    stream.getTracks().forEach((t) => t.stop());
+    throw Object.assign(new Error('that device is not a shared DisplayXR app'), { code: 'not-app-share' });
+  }
+  try {
+    track.contentHint = 'detail'; // resolution over frame rate: halving an SBS width halves each eye
+  } catch {
+    /* older engines */
+  }
+  return { stream, track, descriptor: describeAppShare(track) };
+}

package/js/call/transport.js

@@ -6,7 +6,8 @@
 //
 //   transport.start({ room, localStream, onPeer, onPeerLeft, onStream, onMessage, onPeerState })
 //   transport.send(peerId, msg) / broadcast(msg)
-//   transport.replaceTrack(kind, track, stream) / setSendFormat(format)
+//   transport.replaceTrack(kind, track, stream, { slot }) / setSendFormat(format)
+//   transport.addContentTransceiver(peerId)   // the content track (3D app share), see below
 //   transport.peerConnection(peerId)   // for getStats (null on an SFU)
 //   transport.stop()
 //
@@ -24,6 +25,19 @@
 // and a late ICE candidate or answer from a dead connection is dropped instead of poisoning the
 // new one.
 //
+// THE CONTENT TRACK (3D app share, docs/call.md § Sharing a 3D app): a SECOND video transceiver
+// per pair, sendrecv, so either side can share into it. It exists only when BOTH hellos said
+// `content: true` — the call module calls addContentTransceiver(pid) when the peer's hello says
+// so (its own always does) — so an older peer is never offered a second video m-line and never
+// gets a second camera sender. The offerer adds it (null track until someone shares) and
+// renegotiates with a same-generation re-offer (the answerer's 'offer' case takes it on the same
+// connection); a rebuild re-adds it in the first offer. It is identified as the SECOND video
+// transceiver in getTransceivers() order on both ends: that order is m-line order (the offerer
+// created them in that order; the answerer's are created from the offer's m-lines, and it never
+// adds its own), and m-lines are never reordered or reused here — so both ends agree with no mid
+// or msid bookkeeping. Sharing is then a replaceTrack on that sender only (no renegotiation), and
+// its frames reach the far end's onContentStream, never the camera stream.
+//
 // RECOVERY LADDER on a pair that stops working: 'disconnected' for 4 s, or 'failed' → ICE restart
 // on the SAME connection (cheap: keeps the transceivers, renegotiates candidates) → if that has
 // not connected within 10 s, tear down and rebuild with exponential backoff (1 s, 2 s, 4 s … 30 s,
@@ -44,6 +58,8 @@ const ANSWERER_WAIT_MS = 8000;
  * keeps retrying underneath it the whole time.
  */
 export const UNREACHABLE_MS = 10000;
+/** The camera's share of its bitrate while this side shares content (tuneSenders). */
+export const CAMERA_SHARE_FACTOR = 0.6;
 
 /**
  * Clamp the requested room size to what a full mesh can carry.
@@ -86,6 +102,9 @@ export class MeshTransport {
     this.stopped = false;
     this.sendFormat = 'mono';
     this.localStream = null;
+    // The content track this side shares (null = not sharing) and the stream it rides in.
+    this.contentTrack = null;
+    this.contentStream = null;
   }
 
   /** Remote peers currently in the mesh (not counting this one). */
@@ -93,10 +112,12 @@ export class MeshTransport {
     return this.peers.size;
   }
 
-  async start({ room, localStream, sendFormat, onPeer, onPeerLeft, onStream, onMessage, onPeerState, onRefused, onSignalingState, onGhost }) {
+  async start({ room, localStream, sendFormat, contentTrack, contentStream, onPeer, onPeerLeft, onStream, onContentStream, onMessage, onPeerState, onRefused, onSignalingState, onGhost }) {
     this.localStream = localStream;
     this.sendFormat = sendFormat || 'mono';
-    this.cb = { onPeer, onPeerLeft, onStream, onMessage, onPeerState, onRefused, onSignalingState, onGhost };
+    if (contentTrack !== undefined) this.contentTrack = contentTrack || null;
+    if (contentStream !== undefined) this.contentStream = contentStream || null;
+    this.cb = { onPeer, onPeerLeft, onStream, onContentStream, onMessage, onPeerState, onRefused, onSignalingState, onGhost };
     // Hooks can fire before join() resolves (the PeerJS adapter discovers peers while joining);
     // queue them so every one runs against a fully-initialised transport.
     const later = (fn) => (...a) => (this.ready ? fn(...a) : this._pending.push(() => fn(...a)));
@@ -178,6 +199,11 @@ export class MeshTransport {
       gen: 0,
       state: 'new',
       stream: null,
+      // Content (3D app share): both hellos said `content` (contentCap), and the far end's
+      // content track once it arrived, in its own stream.
+      contentCap: false,
+      contentStream: null,
+      renegotiate: false,
       attempts: 0,
       iceRestarted: false,
       absent: false,
@@ -201,6 +227,11 @@ export class MeshTransport {
     rec.iceRestarted = false;
     rec.pendingCandidates = [];
     rec.stream = null; // a new connection's tracks arrive in a new stream (a fresh srcObject)
+    rec.renegotiate = false;
+    if (rec.contentStream) {
+      rec.contentStream = null;
+      this.cb.onContentStream?.(rec.id, null);
+    }
     const pc = new this.PC({ iceServers: this.iceServers });
     rec.pc = pc;
     const dc = pc.createDataChannel('dxr-call', { negotiated: true, id: 0, ordered: true });
@@ -213,11 +244,20 @@ export class MeshTransport {
       pc.addTransceiver(audio || 'audio', { direction: 'sendrecv', streams });
       const vt = pc.addTransceiver(video || 'video', { direction: 'sendrecv', streams });
       this._preferCodecs(vt);
+      // A rebuild of a pair that already agreed on content offers its transceiver at once.
+      if (rec.contentCap) this._addContent(rec, pc);
     }
     pc.onicecandidate = (e) => {
       if (e.candidate) this._signal(rec, { kind: 'candidate', candidate: e.candidate.toJSON ? e.candidate.toJSON() : e.candidate });
     };
     pc.ontrack = (e) => {
+      if (rec.pc !== pc) return;
+      if (this._isContent(pc, e.transceiver, e.track)) {
+        // The far end's content track: its own stream, never the camera's (no eviction).
+        rec.contentStream = new MediaStream([e.track]);
+        this.cb.onContentStream?.(rec.id, rec.contentStream);
+        return;
+      }
       if (!rec.stream) rec.stream = new MediaStream();
       if (!rec.stream.getTracks().includes(e.track)) {
         for (const t of rec.stream.getTracks()) if (t.kind === e.track.kind) rec.stream.removeTrack(t);
@@ -269,12 +309,18 @@ export class MeshTransport {
           await pc.setLocalDescription(answer);
           this._signal(rec, { kind: 'answer', sdp: pc.localDescription.sdp });
           this._flushCandidates(rec);
+          if (rec.state === 'connected') this.tuneSenders(); // a re-offer may have added the content sender
           break;
         }
         case 'answer':
           if (!rec.offerer || gen !== rec.gen || !rec.pc || rec.pc.signalingState !== 'have-local-offer') return;
           await rec.pc.setRemoteDescription({ type: 'answer', sdp: data.sdp });
           this._flushCandidates(rec);
+          if (rec.renegotiate) {
+            // A content transceiver was added while this offer was out: offer again.
+            rec.renegotiate = false;
+            this._offer(rec).catch((err) => this.log('offer-error', { peer: rec.id, err: String(err) }));
+          } else if (rec.state === 'connected') this.tuneSenders();
           break;
         case 'candidate':
           if (gen !== rec.gen || !rec.pc) return;
@@ -305,11 +351,25 @@ export class MeshTransport {
     for (const c of list) rec.pc.addIceCandidate(c).catch(() => {});
   }
 
-  /** Answerer side: put our tracks on the transceivers the offer created, and make them sendrecv. */
+  /**
+   * Answerer side: put our tracks on the transceivers the offer created, and make them sendrecv.
+   * The content transceiver (the second video one) never gets the camera: it gets this side's
+   * content track when it is sharing, else stays empty (but sendrecv, so it can share later).
+   */
   _attachAnswererTracks(rec) {
     const pc = rec.pc;
     const tracks = this.localStream ? this.localStream.getTracks() : [];
+    const content = this._contentTransceiver(pc);
+    if (content) {
+      if (this.contentTrack && content.sender.track !== this.contentTrack) {
+        content.sender.replaceTrack(this.contentTrack).catch(() => {});
+        if (this.contentStream && content.sender.setStreams) content.sender.setStreams(this.contentStream);
+      }
+      content.direction = 'sendrecv';
+      this._preferCodecs(content);
+    }
     for (const tr of pc.getTransceivers()) {
+      if (tr === content) continue;
       const kind = tr.receiver && tr.receiver.track ? tr.receiver.track.kind : null;
       if (!kind || tr.sender.track) continue;
       const t = tracks.find((x) => x.kind === kind);
@@ -322,6 +382,61 @@ export class MeshTransport {
     }
   }
 
+  // ── the content transceiver ─────────────────────────────────────────────────────────────
+
+  /** The video transceivers of a connection, in getTransceivers() (= m-line) order. */
+  _videoTransceivers(pc) {
+    if (!pc || typeof pc.getTransceivers !== 'function') return [];
+    return pc.getTransceivers().filter((tr) => tr && tr.receiver && tr.receiver.track && tr.receiver.track.kind === 'video');
+  }
+
+  /** The content transceiver: the SECOND video transceiver (see the header), or null. */
+  _contentTransceiver(pc) {
+    return this._videoTransceivers(pc)[1] || null;
+  }
+
+  /** Is this incoming track (ontrack) the far end's content track? */
+  _isContent(pc, transceiver, track) {
+    const ct = this._contentTransceiver(pc);
+    if (!ct) return false;
+    if (transceiver) return transceiver === ct;
+    return !!(track && ct.receiver && ct.receiver.track === track);
+  }
+
+  _addContent(rec, pc) {
+    if (this._contentTransceiver(pc)) return this._contentTransceiver(pc);
+    const streams = this.contentStream ? [this.contentStream] : [];
+    const tr = pc.addTransceiver(this.contentTrack || 'video', { direction: 'sendrecv', streams });
+    this._preferCodecs(tr);
+    return tr;
+  }
+
+  /**
+   * Both hellos of this pair said `content`: give it the content transceiver. Offerer only (the
+   * answerer gets it in the offer); idempotent. Renegotiates with a same-generation re-offer, or
+   * after the offer in flight is answered. False when this side cannot (answerer, unknown peer).
+   */
+  addContentTransceiver(pid) {
+    const rec = this.peers.get(pid);
+    if (!rec || this.stopped) return false;
+    rec.contentCap = true;
+    if (!rec.offerer) return false;
+    const pc = rec.pc;
+    if (!pc) return true; // the next build adds it
+    if (this._contentTransceiver(pc)) return true;
+    this._addContent(rec, pc);
+    this.log('content-transceiver', { peer: rec.id, gen: rec.gen });
+    if (pc.signalingState === 'stable') this._offer(rec).catch((err) => this.log('offer-error', { peer: rec.id, err: String(err) }));
+    else rec.renegotiate = true;
+    return true;
+  }
+
+  /** Does this pair carry a content transceiver right now? */
+  hasContent(pid) {
+    const rec = this.peers.get(pid);
+    return !!(rec && rec.pc && this._contentTransceiver(rec.pc));
+  }
+
   _preferCodecs(transceiver) {
     const caps = globalThis.RTCRtpReceiver && RTCRtpReceiver.getCapabilities && RTCRtpReceiver.getCapabilities('video');
     this._canPreferCodecs = !!(transceiver && transceiver.setCodecPreferences && caps);
@@ -402,6 +517,10 @@ export class MeshTransport {
     clearTimeout(rec.waitTimer);
     this._closePc(rec);
     this.peers.delete(rec.id);
+    if (rec.contentStream) {
+      rec.contentStream = null;
+      this.cb.onContentStream?.(rec.id, null);
+    }
     this._setState(rec, 'left');
     this.cb.onPeerLeft?.(rec.id, reason);
     this.tuneSenders();
@@ -523,12 +642,29 @@ export class MeshTransport {
 
   // ── sending ─────────────────────────────────────────────────────────────────────────────
 
-  /** Swap the outgoing video (setCamera). No renegotiation: replaceTrack on every sender. */
-  async replaceTrack(kind, track, stream) {
-    if (stream) this.localStream = stream;
+  /**
+   * Swap an outgoing track. No renegotiation: replaceTrack on the senders of that slot.
+   * `slot: 'camera'` (default — setCamera / setMic): every sender of that kind EXCEPT the content
+   * one. `slot: 'content'` (shareContent / stopContent, video only): the content sender of every
+   * pair that has one; `track: null` stops sharing. A pair that gets its content transceiver later
+   * picks the current content track up then.
+   */
+  async replaceTrack(kind, track, stream, { slot = 'camera' } = {}) {
+    if (slot === 'content') {
+      this.contentTrack = track || null;
+      this.contentStream = track ? stream || null : null;
+    } else if (stream) this.localStream = stream;
     for (const rec of this.peers.values()) {
       if (!rec.pc) continue;
+      const content = this._contentTransceiver(rec.pc);
+      if (slot === 'content') {
+        if (!content) continue;
+        await content.sender.replaceTrack(track || null).catch(() => {});
+        if (track && stream && content.sender.setStreams) content.sender.setStreams(stream);
+        continue;
+      }
       for (const tr of rec.pc.getTransceivers()) {
+        if (tr === content) continue;
         const k = tr.receiver && tr.receiver.track ? tr.receiver.track.kind : null;
         if (k === kind) await tr.sender.replaceTrack(track).catch(() => {});
       }
@@ -547,16 +683,21 @@ export class MeshTransport {
    */
   async tuneSenders() {
     const n = this.peers.size;
-    const kbps = maxBitrateKbps(this.sendFormat, n);
+    const sharing = !!this.contentTrack;
+    // While content is on, the camera yields: the shared app is what people look at.
+    const kbps = Math.round(maxBitrateKbps(this.sendFormat, n) * (sharing ? CAMERA_SHARE_FACTOR : 1));
+    const contentKbps = maxBitrateKbps('sbs', n);
     for (const rec of this.peers.values()) {
       if (!rec.pc) continue;
+      const ct = this._contentTransceiver(rec.pc);
       for (const s of rec.pc.getSenders()) {
         if (!s.track || s.track.kind !== 'video') continue;
+        const isContent = !!(ct && ct.sender === s);
         try {
           const p = s.getParameters();
           p.degradationPreference = 'maintain-resolution';
           if (!p.encodings || !p.encodings.length) p.encodings = [{}];
-          p.encodings[0].maxBitrate = kbps * 1000;
+          p.encodings[0].maxBitrate = (isContent ? contentKbps : kbps) * 1000;
           await s.setParameters(p);
         } catch (err) {
           this.log('setParameters-error', { peer: rec.id, err: String(err) });

package/js/call/ui.js

@@ -148,6 +148,9 @@ const CSS = `
 .dxr-call-grid[data-layout="speaker"]{grid-template-columns:repeat(3,1fr);}
 .dxr-call-grid[data-layout="speaker"] .dxr-call-tile--main{grid-column:1/-1;}
 .dxr-call-grid[data-layout="speaker"][data-n="1"]{grid-template-columns:1fr;}
+/* Shared content (3D app share): the content tile spans the row, the people form a strip under it. */
+.dxr-call-grid[data-content="1"]:not([data-n="1"]){grid-template-columns:repeat(3,1fr);max-width:calc(var(--dxr-call-h)*4/3);}
+.dxr-call-grid[data-content="1"] .dxr-call-tile--main{grid-column:1/-1;}
 /* layout:'none' — the module creates the tiles but does not position them: the grid box steps
    aside (display:contents) so each [data-dxr-peer] tile is laid out by the PAGE's own CSS on the
    host. A tile is never moved; it is styled in place (woven-canvas rule 2). */

package/js/call/wire.js

@@ -168,6 +168,9 @@ export function normalizeHello(msg) {
     conv: msg.conv === true,
     // The sender's display name (`name` option, 1.48+), sanitised; null when absent or empty.
     name: sanitizeName(msg.name),
+    // This side can carry a SECOND video track, the content tile (3D app share). Absent (an older
+    // SDK) = false: the offerer then never adds the content transceiver for this pair.
+    content: msg.content === true,
   };
 }
 
@@ -192,7 +195,7 @@ export function sanitizeName(v) {
  * Build the `hello` this side sends. `conv: true` (advertised for a side-by-side sender only)
  * says this side sends `conv` messages.
  */
-export function makeHello({ format, width, height, baselineMm, hfovDeg, rectified, conv, name } = {}) {
+export function makeHello({ format, width, height, baselineMm, hfovDeg, rectified, conv, name, content } = {}) {
   const h = {
     type: 'hello',
     v: WIRE_VERSION,
@@ -207,9 +210,70 @@ export function makeHello({ format, width, height, baselineMm, hfovDeg, rectifie
   if (h.format === 'sbs' && conv) h.conv = true;
   const n = sanitizeName(name);
   if (n) h.name = n;
+  if (content) h.content = true;
   return h;
 }
 
+// ── content (3D app share: a second, per-peer video track) ────────────────────────────────
+
+/** A content stream's size is at most this on either side (a receiver ignores anything bigger). */
+export const CONTENT_MAX_DIM = 16384;
+
+/**
+ * `content {on, format, width, height, convergence: {known, frac}, appName?}`: what this side is
+ * sharing on its content track (docs/call.md § Sharing a 3D app). `on: false` = stopped (only `on`
+ * is sent). `convergence.known` = the frames are display-referred and `frac` IS the disparity of
+ * the sender's display plane as a fraction of the per-eye width (`zeroDisparityShiftFrac`, 0 for
+ * a DisplayXR app in v1): a receiver applies it and never measures. Pure.
+ */
+export function makeContent({ on = true, format, width, height, convergence, appName } = {}) {
+  if (!on) return { type: 'content', on: false };
+  const fmt = CALL_FORMATS.includes(format) ? format : 'sbs';
+  const dim = (v) => (typeof v === 'number' && Number.isFinite(v) && v >= 1 && v <= CONTENT_MAX_DIM ? Math.round(v) : 0);
+  const known = !!(convergence && convergence.known);
+  const f = known ? convergence.frac : null;
+  const m = {
+    type: 'content',
+    on: true,
+    format: fmt,
+    width: dim(width),
+    height: dim(height),
+    convergence: known ? { known: true, frac: typeof f === 'number' && Number.isFinite(f) ? Math.max(-CONV_MAX_FRAC, Math.min(CONV_MAX_FRAC, f)) : 0 } : { known: false, frac: null },
+  };
+  const n = sanitizeName(appName);
+  if (n) m.appName = n;
+  return m;
+}
+
+/**
+ * Validate an incoming `content`. Null for anything that is not one. `on` must be `true` to mean
+ * on; a bad `format` reads as `'mono'` (never assume more than was said); sizes outside
+ * 1..16384 read as null; a `convergence.frac` that is not finite or beyond ±CONV_MAX_FRAC makes
+ * the convergence UNKNOWN; `appName` is sanitised (≤ 64 characters). Never throws: this reads data
+ * from another browser.
+ */
+export function normalizeContent(msg) {
+  if (!msg || typeof msg !== 'object' || msg.type !== 'content') return null;
+  if (msg.on !== true) return { type: 'content', on: false, format: null, width: null, height: null, convergence: { known: false, frac: null }, appName: null };
+  const num = (v) => (typeof v === 'number' && Number.isFinite(v) && v >= 1 && v <= CONTENT_MAX_DIM ? v : null);
+  let convergence = { known: false, frac: null };
+  try {
+    const c = msg.convergence;
+    if (c && typeof c === 'object' && c.known === true && typeof c.frac === 'number' && Number.isFinite(c.frac) && Math.abs(c.frac) <= CONV_MAX_FRAC) convergence = { known: true, frac: c.frac };
+  } catch {
+    /* a hostile getter */
+  }
+  return {
+    type: 'content',
+    on: true,
+    format: CALL_FORMATS.includes(msg.format) ? msg.format : 'mono',
+    width: num(msg.width),
+    height: num(msg.height),
+    convergence,
+    appName: sanitizeName(msg.appName),
+  };
+}
+
 /**
  * Wrap a page's app payload: `{ type: 'app', d: data }` serialised, or null when `data` cannot be
  * serialised (undefined, a function, a cycle, a BigInt) or the message is over `APP_MAX_BYTES`