@displayxr/inline3d 1.47.6 → 1.49.0

package/docs/woven-canvas-rules.md

@@ -196,14 +196,23 @@ tile while its content keeps running (for a video: sound, no picture). To put bl
 tile, give it to an element **behind** the canvas. A cover you mean to hide the tile with (rule 5,
 rule 11) is the one deliberate exception, and it comes off on a signal.
 
-### 10. No `backdrop-filter` on anything drawn over the weave
-
-Rule 7 covers the canvas and its ancestors. This one covers the **siblings on top of it**: a
-control bar, a caption, a badge, a menu. `backdrop-filter` is defined as a function of what is
-behind the element, and behind it is the interlaced weave. A blur reads the interlaced pixels
-and smears them, and the 3D image is disturbed across the element's **whole box**, not only
-where the element is opaque (seen on the panel, 24 September). Use a plain translucent tint
-(`background: rgba(0, 0, 0, 0.55)`) instead. The SDK's own player chrome follows this rule.
+### 10. `backdrop-filter` over the weave: only on DisplayXR Browser 0.1.16+, never over a whole tile
+
+Rule 7 covers the canvas and its ancestors, and is unchanged. This one covers the **siblings on
+top of it**: a control bar, a caption, a badge, a menu. `backdrop-filter` is defined as a function
+of what is behind the element, and behind it is the interlaced weave. On browsers before
+DisplayXR Browser 0.1.16 the blur reads the interlaced pixels and smears them, and the 3D image is
+disturbed across the element's **whole box**, not only where it is opaque (seen on the panel, 24
+September). From 0.1.16 the compositor draws the tile **mono inside each frost rect**
+(displayxr-browser#120), so frosted chrome over a tile looks right: the frosted region is flat,
+the rest of the tile stays 3D. [`samples/composition`](../samples/composition/) (its sticky
+header) is the validated case.
+
+- Frost a **partial** region only (a bar, a pill). Never frost a whole tile while it is visible:
+  the whole tile goes mono under it.
+- If the page must also run on older browsers, use a plain translucent tint
+  (`background: rgba(0, 0, 0, 0.55)`) there. The SDK's own chrome (player, call) keeps its
+  near-solid tint so one build works on every generation.
 
 ### 11. Treat a resize as a fresh-canvas moment
 
@@ -331,11 +340,14 @@ for exactly that reason). It cannot check the join. On a DisplayXR display:
 Found on hardware in a production photo app after the rules above were written. Each one looked
 like a runtime or browser bug on the panel and turned out to be the page.
 
-- **No `backdrop-filter` on chrome that sits over the weave.** Rule 7 covers effects on the canvas
-  and its ancestors. A frosted bar or button placed *over* a woven tile is a different element, but
-  on a lenticular laptop panel it visibly disturbs the 3D image across that element's whole rect.
-  Use a plain translucent tint instead (a solid `rgba()` background). Keep an A/B switch for the
-  blurred variant if the design wants it back, and judge it on the panel, not on a 2D monitor.
+- **`backdrop-filter` on chrome that sits over the weave (superseded for 0.1.16+).** Rule 7 covers
+  effects on the canvas and its ancestors. A frosted bar or button placed *over* a woven tile is a
+  different element; on browsers before DisplayXR Browser 0.1.16 it visibly disturbed the 3D image
+  across that element's whole rect on a lenticular laptop panel, and the fix was a plain
+  translucent tint. Since 0.1.16 the compositor draws the tile mono inside each frost rect
+  (displayxr-browser#120), so partial frosted chrome is fine there (`samples/composition` is the
+  validated case); still never frost a whole visible tile ([rule 10](#10-backdrop-filter-over-the-weave-only-on-displayxr-browser-0116-never-over-a-whole-tile)).
+  Judge it on the panel, not on a 2D monitor.
 - **Nothing opaque above the woven canvas.** Stacking order still applies: an element with an
   opaque background painted *above* the canvas hides it, and on a draw-order browser that is
   exactly what you get. The classic case is a full-bleed video plane under a page `<main>` with

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'];
+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,9 +70,12 @@ 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'`                        |
- * | `tile-aspect`        | `theme.tileAspect` (a number, or `w/h`)  |
+ * | `tile-aspect`        | `theme.tileAspect` (a number, `w/h`, or `fill`) |
+ * | `name`               | `name` (your display name)               |
  * | `invite-base`        | `invite.base`                            |
  * | `browser-url`        | `landing.browserUrl`                     |
  * | `debug`              | `debug: true`                            |
@@ -101,10 +104,13 @@ 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';
   // The C2 groups (RFC 0003 §2): the attribute names are the C1 ones, the option shapes are new.
-  const theme = { accent: str(get('accent')), tileAspect: num(get('tile-aspect')) };
+  put('name', str(get('name')));
+  const theme = { accent: str(get('accent')), tileAspect: str(get('tile-aspect')) === 'fill' ? 'fill' : num(get('tile-aspect')) };
   if (theme.accent !== undefined || theme.tileAspect !== undefined) o.theme = Object.fromEntries(Object.entries(theme).filter(([, v]) => v !== undefined));
   if (str(get('invite-base'))) o.invite = { base: str(get('invite-base')) };
   if (str(get('browser-url'))) o.landing = { browserUrl: str(get('browser-url')) };

package/js/call/options.js

@@ -3,7 +3,7 @@
 // 1.29 spellings accepted for one release with a warning. Pure (no DOM, no network) — see
 // test/call.test.mjs. Internal: importable by path, not part of the `./call` entry.
 
-import { isValidRoomId, parseInviteLink, DEFAULT_MAX_PEERS } from './wire.js';
+import { isValidRoomId, parseInviteLink, DEFAULT_MAX_PEERS, sanitizeName } from './wire.js';
 import { clampMaxPeers } from './transport.js';
 import { normalizeMono3D } from './lift.js';
 import { dxrSignaling } from './signaling.js';
@@ -53,7 +53,10 @@ export function normalizeCallOptions(opts = {}) {
   const ui = opts.ui === undefined ? true : opts.ui === 'tiles' ? 'tiles' : !!opts.ui;
   const chrome = ui === true;
   const tileAspect = theme.tileAspect !== undefined ? theme.tileAspect : opts.tileAspect;
-  const aspect = typeof tileAspect === 'number' && tileAspect > 0.3 && tileAspect < 4 ? tileAspect : 16 / 9;
+  // 'fill': each tile's per-eye aspect is its own stage box (the page sizes the tiles).
+  const aspect = tileAspect === 'fill' ? 'fill' : typeof tileAspect === 'number' && tileAspect > 0.3 && tileAspect < 4 ? tileAspect : 16 / 9;
+  const layout = opts.layout === 'speaker' ? 'speaker' : opts.layout === 'none' ? 'none' : 'grid';
+  const tileCover = opts.tileCover === 'auto' || opts.tileCover === 'off' ? opts.tileCover : layout === 'none' ? 'auto' : 'off';
   let room = opts.room === undefined || opts.room === null ? 'auto' : opts.room;
   if (room !== 'auto' && !isValidRoomId(room)) {
     const fromLink = parseInviteLink(room);
@@ -90,6 +93,10 @@ export function normalizeCallOptions(opts = {}) {
     // peer's eyes and shift the eyes so it sits at the display plane. The depth slider stays an
     // offset on top. Off = the pair as sent (plus any `hint`).
     autoConverge: opts.autoConverge === undefined ? true : !!opts.autoConverge,
+    // Sender side of auto-convergence (docs/call.md): with a stereo camera, measure that disparity
+    // on this side's own raw frames and send it to every peer (`conv` on the data channel), so
+    // receivers apply it instead of measuring the compressed frames. Off = receivers measure.
+    sendConvergence: opts.sendConvergence === undefined ? true : !!opts.sendConvergence,
     // `cursor: 'depth'` (runtime ADR-046 on a pair): the arrow comes in front of a person who pops
     // out of the screen under it, measured off each stereo tile's two halves; else the plain OS
     // arrow on the plane. Off by default (zero cost).
@@ -102,12 +109,22 @@ export function normalizeCallOptions(opts = {}) {
     // Concurrent lifted tiles (`liftOptions.max`). Default = maxPeers (4): every mono peer can be lifted.
     maxLifted: Number.isFinite(+maxLiftedRaw) && maxLiftedRaw !== null && maxLiftedRaw !== undefined ? Math.max(0, Math.min(DEFAULT_MAX_PEERS, Math.floor(+maxLiftedRaw))) : DEFAULT_MAX_PEERS,
     // 'grid' | 'speaker' | 'none' (the page lays the tiles out; handle.tile(id) finds them).
-    layout: opts.layout === 'speaker' ? 'speaker' : opts.layout === 'none' ? 'none' : 'grid',
+    layout,
+    // The core's rect cover on every woven tile (and a stereo self view): 'auto' covers a tile
+    // across a resize or move until it is woven again. Default 'auto' with layout: 'none' (the
+    // page moves and resizes the tiles), 'off' otherwise (the module's own layout).
+    tileCover,
+    // This side's display name (hello.name), sanitised; null = none.
+    name: sanitizeName(opts.name),
+    // Devices no camera probe opens (openCamera's `exclude`); false = not even the built-in list.
+    cameraExclude: opts.cameraExclude === false ? false : Array.isArray(opts.cameraExclude) ? [...opts.cameraExclude] : undefined,
     // true: full chrome | 'tiles': badges + plates only | false: nothing. `chrome` = the full set.
     ui,
     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,
@@ -124,6 +141,8 @@ export function normalizeCallOptions(opts = {}) {
     log: typeof opts.log === 'function' ? opts.log : opts.debug ? (tag, obj) => console.log(`${TAG} ${tag} ${JSON.stringify(obj)}`) : null,
     // Internal (tests): replaces the lift module importer behind `mono3D: 'auto'`.
     _liftImporter: typeof opts._liftImporter === 'function' ? opts._liftImporter : undefined,
+    // Internal (tests): replaces the sender's frame grab (camera/conv-meter.js grabLumaFrame).
+    _convGrab: typeof opts._convGrab === 'function' ? opts._convGrab : undefined,
   };
 }
 

package/js/call/share.js

@@ -0,0 +1,147 @@
+// 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.
+
+import { isAppShareDevice, appNameFromLabel, APP_SHARE_ID_PREFIX, APP_SHARE_LABEL_RE } from '../camera/app-share.js';
+import { sanitizeName, CONV_MAX_FRAC } from './wire.js';
+
+export { isAppShareDevice, appNameFromLabel, APP_SHARE_ID_PREFIX, APP_SHARE_LABEL_RE };
+
+/** 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.
+ * @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 [];
+  }
+  return list
+    .filter((d) => d && d.kind === 'videoinput' && isAppShareDevice(d))
+    .map((d) => Object.freeze({ deviceId: d.deviceId, label: d.label || '', appName: sanitizeName(appNameFromLabel(d.label)) || sanitizeName(d.label) || null }));
+}
+
+/**
+ * `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]));
+    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;
+  const appName = sanitizeName(hint.appName) || sanitizeName(appNameFromLabel(track && track.label)) || sanitizeName(appNameFromLabel(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'`). 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;
+  if (!track || !(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.replaceVideoTrack(track) / 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();
@@ -501,6 +620,16 @@ export class MeshTransport {
     for (const pid of this.peers.keys()) this.send(pid, msg);
   }
 
+  /** An already-serialised message (the app channel: sized before it is sent). */
+  sendRaw(pid, json) {
+    const rec = this.peers.get(pid);
+    if (rec && rec.dc && rec.dc.readyState === 'open') {
+      rec.dc.send(json);
+      return true;
+    }
+    return false;
+  }
+
   peerConnection(pid) {
     const rec = this.peers.get(pid);
     return rec ? rec.pc : null;
@@ -513,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(() => {});
       }
@@ -537,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

@@ -8,7 +8,12 @@
 //     pill, never a plate congruent with the tile (it would match the canvas's own quad on a
 //     legacy browser and take the tile out of the weave). The bottom bar and self view live in a
 //     footer BELOW the grid, over no tile at all.
-//  2. NO `backdrop-filter`. The near-solid `--dxr-shell` (rgba(16,17,22,.92)) is the substitute.
+//  2. NO `backdrop-filter` in the SDK's own chrome. The near-solid `--dxr-shell`
+//     (rgba(16,17,22,.92)) is its choice, and it stays. A frosted element OVER a tile is no longer
+//     a defect on DisplayXR Browser 0.1.16+ (browser#120: the compositor draws the tile mono
+//     inside each frost rect; samples/composition is the validated case) — a page's own chrome may
+//     use it. Never frost a WHOLE visible tile, and rule 3 (effects on the canvas or an ancestor)
+//     is unchanged.
 //  3. Promotion is `will-change: transform`. No CSS filter / opacity / border-radius / shadow on a
 //     woven canvas OR ANY ANCESTOR of one — the tile, the grid and the host stay visually bare.
 //     A speaking highlight is a separate bar UNDER the stage, not an outline around it.
@@ -143,10 +148,15 @@ 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). */
 .dxr-call-grid[data-layout="none"]{display:contents;}
+/* …and so do the footer and the self slot, so the page places the self tile ([data-dxr-peer="self"]). */
+.dxr-call-host--none .dxr-call-foot,.dxr-call-host--none .dxr-call-self{display:contents;}
 .dxr-call-tile{position:relative;min-width:0;}
 .dxr-call-stage{position:relative;background:#000;}
 .dxr-call-stage>canvas{display:block;width:100%;height:100%;}