wenay-common2 1.0.70 → 1.0.74

package/doc/wenay-common2.md

@@ -151,8 +151,13 @@ Media.createAudioSource({format?: 'int16'|'float32', mode?: 'pcm'|'record', repl
 Media.createVideoSource({fps? = 3, codec? = 'jpeg', quality?, replay?}) -> [emit, listen] & control
 control: start() -> Promise<'idle'|'requesting'|'live'|'denied'|'no-device'|'error'> · stop() · getStats() · setDevice(id) · listDevices() · state
 Media.encodeMediaFrame(meta, payload) / Media.decodeMediaFrame(frame)     // one Uint8Array = 40-byte fixed header + raw payload
+
+// viewer/publisher one-liners (the demo stand is built on these):
+Media.attachVideoCanvas(line, canvas, {onError?}) -> {stats(), off}       // decode+render any video line; codec/size come from frame headers
+Media.attachAudioPlayer(line, {maxBacklogSec? = 0.35}) -> {enable(), disable(), enabled, stats(), off}   // live PCM playback, backlog drops
+Media.pipeMediaPublish(line, publish, {stamp? = true, onError?}) -> off   // source -> RPC publish fn; stamp lets viewers measure latency
 ```
-Audio default is PCM frames from `AudioWorklet` where available (`mode:'record'` uses MediaRecorder chunks). Video default is camera snapshots (`video->canvas`, JPEG, low fps for vision). Put `listen` into `createRpcServerAuto` like any other Listen; with `replay:true`, the returned listen is a replay line, so RPC auto exposes legacy + replay surfaces under the same key. Backpressure policy: audio is lossless queue; video `replay:true` defaults to keep-latest frame recovery. `transport:'webrtc'` is reserved for a future SFU/signaling adapter; socket binary is the default today.
+Audio default is PCM frames from `AudioWorklet` where available (`mode:'record'` uses MediaRecorder chunks). Video default is camera snapshots (JPEG, low fps for vision) captured hidden-tab-proof: a worker timer ticks (setInterval is throttled to ~1/s in hidden tabs), `ImageCapture.grabFrame()` reads the track (a hidden `<video>` stops painting), and JPEG encode runs in a worker (main-thread `convertToBlob` stalls ~1s hidden) — `worker:false` opts back into the plain in-page path. Screen share is the same video source with an injected stream: `createVideoSource({stream: () => navigator.mediaDevices.getDisplayMedia({video: true})})`. Put `listen` into `createRpcServerAuto` like any other Listen; with `replay:true`, the returned listen is a replay line, so RPC auto exposes legacy + replay surfaces under the same key. Backpressure policy: audio is lossless queue; video `replay:true` defaults to keep-latest frame recovery. `transport:'webrtc'` is reserved for a future SFU/signaling adapter; socket binary is the default today. Living example: the demo stand (`npm run demo`) streams camera / mic / screen share between two tabs through a tiny server-side relay of replay lines (`demo/server.ts` + `demo/client.ts`).
 
 ## 🤝 Peer — accounts see each other's stores (one-call SDK)
 > `import { Peer } from "wenay-common2"` or `import * as Peer from "wenay-common2/peer"`.
@@ -185,11 +190,54 @@ me.onRoute(ev => {})                // route transitions for metrics/UI
 ```
 Key property: the relay journal stores the owner's envelopes VERBATIM (owner seq space), so a
 relay <-> direct hand-off is a plain seq resume — no keyframe reset, no gaps, no dups. Late joiners
-get a keyframe folded server-side even while the owner is offline. Policy/session material:
+get a keyframe folded server-side even while the owner is offline.
+Reconnect correctness is self-healing: a publisher gap makes the relay reject the push WITH its last
+seq, and the client repairs from that coordinate automatically (`repair: 'tail'` lossless (default)
+| `'keyframe'` cheap reset for ephemeral state). Server declares journal semantics
+(`createPeerHost({gap: 'resume' | 'sacred'})`); a declared `journal: 'sacred'` TYPE-forbids the cheap
+repair. `me.resync()` after a transport reconnect repairs without waiting for the next write;
+failures surface via `onPublishError`, never silently. Policy/session material:
 `createPeerClient({session, accept, policy})` + host `authorize` — see rare docs for the envelope
 contract and the underlying primitives (`createRouteCoordinator`, `createSignalHub`,
 `createWebRtcConnector`). Oracle: `replay/peer-sdk.test.ts`.
 
+### Calls, presence and the media relay (messenger-style, on the same parts)
+```
+// presence rides in the fragment (host >= 1.0.74): subscribe FIRST, then list()
+c.app.func.peer.presence.changes.on(({account, online}) => {})
+await c.app.func.peer.presence.list()                       // ['a', 'b', ...] — connected right now
+
+// SERVER — media relay next to the fragment (per-account named lines, policy-gated watch):
+const media = Peer.createMediaRelay({
+    lines: {cam: 'video', mic: 'audio', screen: 'video'},
+    canWatch?: (watcher, owner, line) => bool,   // ACL, checked on paths + every forwarded frame
+})
+object: {peer: peer.fragment, media: {publish: media.publishOf(account), watch: media.watchOf(account)}}
+media.dropAccount(account)   // retire lines + keyspace (e.g. on presence offline); next publish revives
+
+// CLIENT — calls are envelopes over the SAME signal port; media attach stays app code:
+const calls = Peer.createCallManager({port: Peer.callPortOf(c.app.func.peer), self: 'a'})
+await calls.ready                                           // signal subscription confirmed server-side
+calls.rings.on(call => { call.accept() /* or call.decline() */ })
+const call = calls.call('b', {kinds: ['cam', 'mic']})       // meta rides opaquely
+call.changed.on(state => {})                                // 'active' | 'ended'
+await call.ended                                            // 'declined'|'busy'|'offline'|'timeout'|'hangup'|'canceled'
+call.hangup()
+// while active: publish own frames + attach the peer's lines (Media.attach* viewers)
+media.publish('cam', frame, Date.now());  attachVideoCanvas(c.app.func.media.watch.b.cam, canvas)
+```
+Relay-first is the privacy default (mainstream messengers route calls through their servers too);
+`promoteDirect` stays the policy-gated opt-in for the data path. Ring/accept/decline/hangup ride the
+existing signal hub — the host `authorize` hook sees them too (single server-side policy point), and
+an offline callee fails fast (`'offline'`), no timeout wait. The default incoming gate auto-declines
+with `'busy'` during a live call, which also settles simultaneous cross-calls. `video` relay lines
+are keep-latest (late joiner pulls `keyframe()` instantly), `audio` is a short lossless queue; frames
+ride as `[frame, sentAt]` so viewer latency stats work out of the box. Watch access is an ACL, not a
+convention: `watchOf(account)` views run `canWatch` on every new subscribe/keyframe and every live
+frame. "Media access follows the call" is a few lines of app code (grant on `'active'`, revoke on
+`'ended'`); after revocation an already-open policy view receives no more data. Oracle:
+`replay/peer-call.test.ts`.
+
 ## 🔁 Observe — reactive state + store/mirror API
 > `import { Observe } from "wenay-common2"` or `import * as Observe from "wenay-common2/observe"`.
 > This is the documented v2 reactive/store surface.
@@ -380,6 +428,3 @@ facade — details in rare docs. New code should declare `frame` on the line ins
 Wire-level proof/oracles: `npx ts-node replay/rpc-auto.test.ts` (real Socket.IO: auto-exposure, legacy
 parity, frame equivalence, gate lag sim), plus `replay/conflate-socket.test.ts`, `replay/conflate.test.ts`,
 `replay/coalesce.test.ts`. Full generic surface (history/time-travel, archive) → 🎞️ in rare docs.
-
-
-

package/lib/Common/events/route-signal-webrtc.d.ts

@@ -1,7 +1,7 @@
 import { ReplayRemote } from './replay-wire';
 import { RouteConnector } from './route-coordinator';
 import { ReplayMessageChannel } from './replay-channel';
-export type tSignalType = 'offer' | 'answer' | 'ice' | 'revoke' | 'close';
+export type tSignalType = 'offer' | 'answer' | 'ice' | 'revoke' | 'close' | 'ring' | 'accept' | 'decline' | 'hangup';
 export type SignalEnvelope = {
     type: tSignalType;
     pair: string;

package/lib/Common/events/route-signal-webrtc.js

@@ -11,28 +11,38 @@ function createSignalHub(deps = {}) {
     const ports = new Map();
     function register(account) {
         const [emit, signals] = (0, Listen_1.listen)();
-        ports.set(account, emit);
+        const accountPorts = ports.get(account) ?? [];
+        accountPorts.push(emit);
+        ports.set(account, accountPorts);
         async function send(env) {
             if (env == null || env.from != account)
                 return false;
             if (authorize && !(await authorize(env)))
                 return false;
-            const target = ports.get(env.to);
+            const targets = ports.get(env.to);
+            const target = targets?.[targets.length - 1];
             if (!target)
                 return false;
             target(env);
             return true;
         }
         function close() {
-            if (ports.get(account) == emit)
-                ports.delete(account);
+            const accountPorts = ports.get(account);
+            if (accountPorts) {
+                const i = accountPorts.indexOf(emit);
+                if (i >= 0)
+                    accountPorts.splice(i, 1);
+                if (!accountPorts.length)
+                    ports.delete(account);
+            }
             signals.close();
         }
         return { account, send, signals, close };
     }
     function revoke(pair, accounts, reason) {
         for (const account of accounts) {
-            ports.get(account)?.({ type: 'revoke', pair, from: '', to: account, reason });
+            const accountPorts = ports.get(account);
+            accountPorts?.[accountPorts.length - 1]?.({ type: 'revoke', pair, from: '', to: account, reason });
         }
     }
     return {

package/lib/Common/media/media-index.d.ts

@@ -1 +1,2 @@
 export * from './media-source';
+export * from './media-view';

package/lib/Common/media/media-index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./media-source"), exports);
+__exportStar(require("./media-view"), exports);

package/lib/Common/media/media-source.d.ts

@@ -14,6 +14,7 @@ export type MediaReplayOpts = true | ReplayListenUseOptions<[Uint8Array]>;
 export type AudioSourceOpts = {
     sourceId?: string;
     deviceId?: string;
+    stream?: any;
     mode?: 'pcm' | 'record';
     format?: 'int16' | 'float32';
     channels?: number;
@@ -28,6 +29,7 @@ export type AudioSourceOpts = {
 export type VideoSourceOpts = {
     sourceId?: string;
     deviceId?: string;
+    stream?: any;
     fps?: number;
     width?: number;
     height?: number;
@@ -88,6 +90,7 @@ export type DecodedMediaFrame = MediaFrameMeta & {
 export declare const MEDIA_FRAME_MAGIC = 1464028466;
 export declare const MEDIA_FRAME_VERSION = 1;
 export declare const MEDIA_FRAME_HEADER_BYTES = 40;
+export declare function toBytes(data: ArrayBuffer | ArrayBufferView): Uint8Array<ArrayBufferLike>;
 export declare function encodeMediaFrame(meta: MediaFrameMeta, payload: ArrayBuffer | ArrayBufferView): Uint8Array<ArrayBuffer>;
 export declare function decodeMediaFrame(frameLike: ArrayBuffer | ArrayBufferView): DecodedMediaFrame;
 export declare function createAudioSource(opts?: AudioSourceOpts): MediaSource;

package/lib/Common/media/media-source.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MEDIA_FRAME_HEADER_BYTES = exports.MEDIA_FRAME_VERSION = exports.MEDIA_FRAME_MAGIC = void 0;
+exports.toBytes = toBytes;
 exports.encodeMediaFrame = encodeMediaFrame;
 exports.decodeMediaFrame = decodeMediaFrame;
 exports.createAudioSource = createAudioSource;
@@ -356,7 +357,7 @@ function createAudioSource(opts = {}) {
     async function start() {
         try {
             ensureSocketTransport(transport);
-            if (!hasGetUserMedia()) {
+            if (!opts.stream && !hasGetUserMedia()) {
                 shell.setState('no-device');
                 return shell.state;
             }
@@ -364,7 +365,7 @@ function createAudioSource(opts = {}) {
             shell.setState('requesting');
             shell.stats.startedAt = nowMono();
             const constraints = { audio: { deviceId: deviceId ? { exact: deviceId } : undefined, channelCount: opts.channels, sampleRate: opts.sampleRate } };
-            stream = await globalThis.navigator.mediaDevices.getUserMedia(constraints);
+            stream = await resolveMediaStream(opts.stream, () => globalThis.navigator.mediaDevices.getUserMedia(constraints));
             if (opts.mode == 'record')
                 startRecord(stream);
             else
@@ -395,6 +396,50 @@ function createAudioSource(opts = {}) {
     };
     return attachControl([shell.emit, shell.listenApi], control);
 }
+async function resolveMediaStream(injected, fallback) {
+    if (!injected)
+        return fallback();
+    return typeof injected == 'function' ? await injected() : injected;
+}
+function videoEncodeWorkerCode() {
+    return `
+const canvas = new OffscreenCanvas(1, 1)
+const ctx = canvas.getContext('2d')
+onmessage = async function onEncodeRequest(ev) {
+    const req = ev.data
+    try {
+        canvas.width = req.w
+        canvas.height = req.h
+        ctx.drawImage(req.bitmap, 0, 0, req.w, req.h)
+        req.bitmap.close()
+        const blob = await canvas.convertToBlob({type: req.mime, quality: req.quality})
+        const buf = await blob.arrayBuffer()
+        postMessage({buf}, [buf])
+    } catch (e) {
+        postMessage({error: String((e && e.message) || e)})
+    }
+}
+`;
+}
+function startCaptureTicker(ms, tick, useWorker) {
+    const g = globalThis;
+    if (useWorker && g.Worker && g.Blob && g.URL) {
+        try {
+            const blob = new g.Blob([`setInterval(function () { postMessage(0) }, ${ms})`], { type: 'text/javascript' });
+            const url = g.URL.createObjectURL(blob);
+            const worker = new g.Worker(url);
+            worker.onmessage = function onCaptureTick() { tick(); };
+            return function stopWorkerTicker() {
+                worker.terminate();
+                g.URL.revokeObjectURL(url);
+            };
+        }
+        catch {
+        }
+    }
+    const timer = setInterval(tick, ms);
+    return function stopIntervalTicker() { clearInterval(timer); };
+}
 function mimeForVideo(codec) {
     if (codec == 'png')
         return 'image/png';
@@ -422,9 +467,37 @@ function createVideoSource(opts = {}) {
     let video = opts.video;
     let canvas = opts.canvas;
     let ctx = null;
-    let timer = null;
+    let stopTicker = null;
+    let imageCapture = null;
+    let encodeWorker = null;
     let busy = false;
     let seq = 0;
+    async function grabBitmap() {
+        if (imageCapture) {
+            try {
+                return await imageCapture.grabFrame();
+            }
+            catch { }
+        }
+        return null;
+    }
+    function emitVideoFrame(payload, codec, w, h) {
+        shell.emitFrame(encodeMediaFrame({
+            kind: 'video-frame',
+            codec,
+            seq: ++seq,
+            tMono: nowMono(),
+            width: w,
+            height: h,
+        }, payload), seq);
+    }
+    function encodeInWorker(bitmap, w, h, mime, quality) {
+        return new Promise(function encodeRoundtrip(resolve, reject) {
+            encodeWorker.onmessage = (ev) => ev.data?.error ? reject(new Error(ev.data.error)) : resolve(ev.data.buf);
+            encodeWorker.onerror = (e) => reject(new Error(String(e?.message ?? 'video encode worker error')));
+            encodeWorker.postMessage({ bitmap, w, h, mime, quality }, [bitmap]);
+        });
+    }
     async function captureOne() {
         if (busy || shell.state != 'live') {
             shell.stats.dropped++;
@@ -432,26 +505,40 @@ function createVideoSource(opts = {}) {
         }
         busy = true;
         try {
-            const w = opts.width ?? video.videoWidth ?? video.width ?? 0;
-            const h = opts.height ?? video.videoHeight ?? video.height ?? 0;
-            if (!w || !h)
+            const bitmap = await grabBitmap();
+            const srcW = (bitmap ? bitmap.width : video.videoWidth ?? video.width) ?? 0;
+            const srcH = (bitmap ? bitmap.height : video.videoHeight ?? video.height) ?? 0;
+            let w = opts.width ?? srcW;
+            let h = opts.height ?? srcH;
+            if (srcW && srcH) {
+                if (opts.width && opts.height == undefined) {
+                    w = Math.min(opts.width, srcW);
+                    h = Math.round(w * srcH / srcW);
+                }
+                else if (opts.height && opts.width == undefined) {
+                    h = Math.min(opts.height, srcH);
+                    w = Math.round(h * srcW / srcH);
+                }
+            }
+            if (!w || !h) {
+                bitmap?.close?.();
                 return;
+            }
+            const codec = opts.codec ?? 'jpeg';
+            const quality = opts.quality ?? 0.82;
+            if (encodeWorker && bitmap) {
+                const buf = await encodeInWorker(bitmap, w, h, mimeForVideo(codec), quality);
+                emitVideoFrame(new Uint8Array(buf), codec, w, h);
+                return;
+            }
             if (canvas.width != w)
                 canvas.width = w;
             if (canvas.height != h)
                 canvas.height = h;
-            ctx.drawImage(video, 0, 0, w, h);
-            const codec = opts.codec ?? 'jpeg';
-            const blob = await canvasToBlob(canvas, mimeForVideo(codec), opts.quality ?? 0.82);
-            const payload = new Uint8Array(await blob.arrayBuffer());
-            shell.emitFrame(encodeMediaFrame({
-                kind: 'video-frame',
-                codec,
-                seq: ++seq,
-                tMono: nowMono(),
-                width: w,
-                height: h,
-            }, payload), seq);
+            ctx.drawImage(bitmap ?? video, 0, 0, w, h);
+            bitmap?.close?.();
+            const blob = await canvasToBlob(canvas, mimeForVideo(codec), quality);
+            emitVideoFrame(new Uint8Array(await blob.arrayBuffer()), codec, w, h);
         }
         catch (e) {
             shell.setState('error', e);
@@ -461,10 +548,11 @@ function createVideoSource(opts = {}) {
         }
     }
     function stop() {
-        if (timer) {
-            clearInterval(timer);
-            timer = null;
-        }
+        stopTicker?.();
+        stopTicker = null;
+        imageCapture = null;
+        encodeWorker?.terminate?.();
+        encodeWorker = null;
         stopTracks(stream);
         stream = null;
         if (!opts.video && video) {
@@ -478,7 +566,7 @@ function createVideoSource(opts = {}) {
     async function start() {
         try {
             ensureSocketTransport(transport);
-            if (!hasGetUserMedia()) {
+            if (!opts.stream && !hasGetUserMedia()) {
                 shell.setState('no-device');
                 return shell.state;
             }
@@ -490,26 +578,47 @@ function createVideoSource(opts = {}) {
             stop();
             shell.setState('requesting');
             shell.stats.startedAt = nowMono();
-            stream = await globalThis.navigator.mediaDevices.getUserMedia({
+            stream = await resolveMediaStream(opts.stream, () => globalThis.navigator.mediaDevices.getUserMedia({
                 video: {
                     deviceId: deviceId ? { exact: deviceId } : undefined,
                     width: opts.width,
                     height: opts.height,
                 },
-            });
+            }));
             video = video ?? doc.createElement('video');
             video.muted = true;
             video.playsInline = true;
             video.srcObject = stream;
             await video.play?.();
-            canvas = canvas ?? doc.createElement('canvas');
+            const track = stream?.getVideoTracks?.()?.[0];
+            const ImageCaptureCtor = globalThis.ImageCapture;
+            try {
+                imageCapture = track && typeof ImageCaptureCtor == 'function' ? new ImageCaptureCtor(track) : null;
+            }
+            catch {
+                imageCapture = null;
+            }
+            const g = globalThis;
+            if (opts.worker != false && imageCapture && g.Worker && g.Blob && g.URL && g.OffscreenCanvas) {
+                try {
+                    const blob = new g.Blob([videoEncodeWorkerCode()], { type: 'text/javascript' });
+                    const url = g.URL.createObjectURL(blob);
+                    encodeWorker = new g.Worker(url);
+                    g.URL.revokeObjectURL(url);
+                }
+                catch {
+                    encodeWorker = null;
+                }
+            }
+            const OffscreenCanvasCtor = g.OffscreenCanvas;
+            canvas = canvas ?? (OffscreenCanvasCtor ? new OffscreenCanvasCtor(1, 1) : doc.createElement('canvas'));
             ctx = canvas.getContext('2d');
             if (!ctx)
                 throw new Error('2d canvas context is not available');
             shell.setState('live');
             const ms = Math.max(1, Math.round(1000 / (opts.fps ?? 3)));
             await captureOne();
-            timer = setInterval(captureOne, ms);
+            stopTicker = startCaptureTicker(ms, captureOne, opts.worker != false);
             return shell.state;
         }
         catch (e) {

package/lib/Common/media/media-view.d.ts

@@ -0,0 +1,42 @@
+type tMediaLine = {
+    on(cb: (frame: any, sentAt?: number) => void): any;
+};
+export type AttachVideoCanvasOpts = {
+    createBitmap?: (blob: any) => Promise<any>;
+    onError?: (e: unknown) => void;
+};
+export declare function attachVideoCanvas(line: tMediaLine, canvas: any, opts?: AttachVideoCanvasOpts): {
+    stats: () => {
+        frames: number;
+        drawn: number;
+        perSec: number;
+        ageMs: number;
+        width: number;
+        height: number;
+    };
+    off: () => void;
+};
+export type AttachAudioPlayerOpts = {
+    maxBacklogSec?: number;
+    audioContext?: () => any;
+    onError?: (e: unknown) => void;
+};
+export declare function attachAudioPlayer(line: tMediaLine, opts?: AttachAudioPlayerOpts): {
+    enable(): void;
+    disable(): void;
+    readonly enabled: boolean;
+    stats: () => {
+        frames: number;
+        played: number;
+        dropped: number;
+        perSec: number;
+        ageMs: number;
+    };
+    off: () => void;
+};
+export type PipeMediaPublishOpts = {
+    stamp?: boolean;
+    onError?: (e: unknown) => void;
+};
+export declare function pipeMediaPublish(line: tMediaLine, publish: (frame: Uint8Array, sentAt?: number) => unknown, opts?: PipeMediaPublishOpts): any;
+export {};

package/lib/Common/media/media-view.js

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.attachVideoCanvas = attachVideoCanvas;
+exports.attachAudioPlayer = attachAudioPlayer;
+exports.pipeMediaPublish = pipeMediaPublish;
+const media_source_1 = require("./media-source");
+function makeOff(raw) {
+    function unsubscribe(h) {
+        if (typeof h == 'function')
+            h();
+        else
+            h?.off?.();
+    }
+    return function off() {
+        if (typeof raw == 'function') {
+            raw();
+            return;
+        }
+        if (raw != null && typeof raw.then == 'function') {
+            void raw.then(unsubscribe);
+            return;
+        }
+        unsubscribe(raw);
+    };
+}
+function mimeForCodec(codec) {
+    if (codec == 'png')
+        return 'image/png';
+    if (codec == 'webp')
+        return 'image/webp';
+    return 'image/jpeg';
+}
+function createAgeMeter() {
+    let ageMs = 0;
+    return {
+        note(sentAt) {
+            if (typeof sentAt != 'number')
+                return;
+            const age = Date.now() - sentAt;
+            ageMs = ageMs ? Math.round(ageMs * 0.8 + age * 0.2) : age;
+        },
+        get ageMs() { return ageMs; },
+    };
+}
+function createRateMeter() {
+    let windowStart = 0;
+    let windowCount = 0;
+    let perSec = 0;
+    return {
+        note() {
+            const now = Date.now();
+            if (now - windowStart >= 1000) {
+                perSec = windowStart ? windowCount : 0;
+                windowStart = now;
+                windowCount = 0;
+            }
+            windowCount++;
+        },
+        get perSec() { return perSec; },
+    };
+}
+function attachVideoCanvas(line, canvas, opts = {}) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('2d canvas context is not available');
+    const makeBitmap = opts.createBitmap ?? function defaultBitmap(blob) {
+        const create = globalThis.createImageBitmap;
+        if (typeof create != 'function')
+            throw new Error('createImageBitmap is not available');
+        return create(blob);
+    };
+    const age = createAgeMeter();
+    const rate = createRateMeter();
+    let frames = 0;
+    let drawn = 0;
+    let width = 0;
+    let height = 0;
+    let busy = false;
+    const off = makeOff(line.on(async function onVideoFrame(raw, sentAt) {
+        frames++;
+        age.note(sentAt);
+        rate.note();
+        if (busy)
+            return;
+        busy = true;
+        try {
+            const f = (0, media_source_1.decodeMediaFrame)((0, media_source_1.toBytes)(raw));
+            if (f.kind != 'video-frame' || !f.width || !f.height)
+                return;
+            const bitmap = await makeBitmap(new Blob([f.payload.slice()], { type: mimeForCodec(f.codec) }));
+            if (canvas.width != f.width)
+                canvas.width = f.width;
+            if (canvas.height != f.height)
+                canvas.height = f.height;
+            ctx.drawImage(bitmap, 0, 0);
+            bitmap?.close?.();
+            width = f.width;
+            height = f.height;
+            drawn++;
+        }
+        catch (e) {
+            opts.onError?.(e);
+        }
+        finally {
+            busy = false;
+        }
+    }));
+    return {
+        stats: () => ({ frames, drawn, perSec: rate.perSec, ageMs: age.ageMs, width, height }),
+        off,
+    };
+}
+function attachAudioPlayer(line, opts = {}) {
+    const maxBacklogSec = opts.maxBacklogSec ?? 0.35;
+    const age = createAgeMeter();
+    const rate = createRateMeter();
+    let audioCtx = null;
+    let playhead = 0;
+    let frames = 0;
+    let played = 0;
+    let dropped = 0;
+    function makeContext() {
+        if (opts.audioContext)
+            return opts.audioContext();
+        const Ctor = globalThis.AudioContext ?? globalThis.webkitAudioContext;
+        if (!Ctor)
+            throw new Error('AudioContext is not available');
+        return new Ctor();
+    }
+    function toSamples(codec, payload) {
+        const copy = payload.slice();
+        if (codec == 'float32')
+            return new Float32Array(copy.buffer);
+        if (codec != 'pcm16')
+            return null;
+        const pcm = new Int16Array(copy.buffer);
+        const out = new Float32Array(pcm.length);
+        for (let i = 0; i < pcm.length; i++)
+            out[i] = pcm[i] / 0x8000;
+        return out;
+    }
+    function push(raw) {
+        const f = (0, media_source_1.decodeMediaFrame)((0, media_source_1.toBytes)(raw));
+        if (f.kind != 'audio-pcm')
+            return;
+        const samples = toSamples(f.codec, f.payload);
+        if (!samples)
+            return;
+        const channels = f.channels || 1;
+        const sampleRate = f.sampleRate || 48000;
+        const nFrames = Math.floor(samples.length / channels);
+        if (!nFrames)
+            return;
+        if (playhead - audioCtx.currentTime > maxBacklogSec) {
+            playhead = audioCtx.currentTime + 0.05;
+            dropped++;
+        }
+        const buf = audioCtx.createBuffer(channels, nFrames, sampleRate);
+        for (let ch = 0; ch < channels; ch++) {
+            const chan = buf.getChannelData(ch);
+            for (let i = 0; i < nFrames; i++)
+                chan[i] = samples[i * channels + ch];
+        }
+        const node = audioCtx.createBufferSource();
+        node.buffer = buf;
+        node.connect(audioCtx.destination);
+        const at = Math.max(audioCtx.currentTime + 0.05, playhead);
+        node.start(at);
+        playhead = at + nFrames / sampleRate;
+        played++;
+    }
+    const off = makeOff(line.on(function onAudioFrame(raw, sentAt) {
+        frames++;
+        age.note(sentAt);
+        rate.note();
+        if (!audioCtx)
+            return;
+        try {
+            push(raw);
+        }
+        catch (e) {
+            opts.onError?.(e);
+        }
+    }));
+    return {
+        enable() {
+            audioCtx = audioCtx ?? makeContext();
+            playhead = 0;
+            void audioCtx.resume?.();
+        },
+        disable() {
+            void audioCtx?.close?.();
+            audioCtx = null;
+        },
+        get enabled() { return !!audioCtx; },
+        stats: () => ({ frames, played, dropped, perSec: rate.perSec, ageMs: age.ageMs }),
+        off,
+    };
+}
+function pipeMediaPublish(line, publish, opts = {}) {
+    return line.on(function publishFrame(frame) {
+        try {
+            Promise.resolve(publish(frame, opts.stamp == false ? undefined : Date.now()))
+                .catch(function onPublishFail(e) { opts.onError?.(e); });
+        }
+        catch (e) {
+            opts.onError?.(e);
+        }
+    });
+}