@crowdedkingdoms/construct 0.0.0 → 0.2.1-dev.1

package/src/platform/media/WebcamService.ts

@@ -0,0 +1,346 @@
+/**
+ * Proximity webcam over the realtime plane — engine-agnostic.
+ *
+ * Capture: `getUserMedia` at 128×96 / 10 fps → an offscreen canvas → a small
+ * JPEG (≤ `MAX_FRAME_BYTES`) → `udp.sendVideoFrame`, which cuts the frame into
+ * UDP-sized fragments and sends each as a `sendVideoPacket` addressed to the
+ * chunk the local actor stands in. Every receiver within `distance` chunks
+ * pays the bytes, so the defaults are deliberately small and the distance is
+ * 1 (this chunk and its neighbours), not the pose replication distance.
+ *
+ * Playback: every `video` notification is one fragment. The SDK's
+ * `VideoFrameAssembler` puts frames back together per sender; a completed
+ * frame is decoded to an `ImageBitmap` and handed to whoever listens
+ * (`frame(uuid, bitmap)`). Scenes draw it however they like — the holodeck
+ * puts it on the avatar's face, the paint program only shows a "camera on"
+ * ring. Listeners own the bitmap they receive and close it when they replace
+ * or drop it.
+ *
+ * Leaving: the server's `actorLeft` notice (and, as a fallback, the World
+ * Stores lane's `onLeave` reaper) ends the sender's stream at once —
+ * `ended(uuid)` — so no texture outlives the player.
+ *
+ * Permission: `use_video_chat` on the sender's tier (and any grid limit under
+ * them). Without it the API refuses `sendVideoPacket` with `UNAUTHORIZED`,
+ * which this service reports once and then stops sending. The Setup wizard
+ * grants the key on the Constructor tier.
+ *
+ * Mods do not get the camera: there is no host call for it, on purpose.
+ */
+import {
+  VideoFrameAssembler,
+  VideoCodec,
+  decodeBase64,
+  type AssembledVideoFrame,
+} from '@crowdedkingdoms/crowdyjs';
+
+import { Emitter } from '../util/Emitter';
+
+export interface WebcamEvents {
+  /** A complete frame from a nearby player (never the local player). */
+  frame: { uuid: string; bitmap: ImageBitmap; frameId: number };
+  /** The player's stream is over: they left, or their frames stopped. */
+  ended: { uuid: string };
+  /** Local capture state changed (for the HUD toggle and self-preview). */
+  local: { live: boolean; stream: MediaStream | null; error: string | null };
+}
+
+/** Capture size and rate. Small on purpose: every receiver pays the bytes. */
+export const CAPTURE_WIDTH = 128;
+export const CAPTURE_HEIGHT = 96;
+export const CAPTURE_FPS = 10;
+/** Frames above this are re-encoded at a lower quality, then dropped. */
+export const MAX_FRAME_BYTES = 8 * 1024;
+/** Chunks around the sender's that receive the frames (0 = own chunk only). */
+export const VIDEO_DISTANCE = 1;
+/** A sender with no frame for this long is treated as ended (fallback). */
+export const REMOTE_IDLE_MS = 3_000;
+
+/**
+ * What the service needs from the platform, as an interface so a unit test
+ * can drive it without a network or a browser. `NetworkManager` + `GameSession`
+ * satisfy it in `GameSession.webcam`.
+ */
+export interface WebcamTransport {
+  /** Subscribe to `video` / `actorLeft` notifications; returns unsubscribe. */
+  onVideo(handler: (n: { uuid: string; videoData: string }) => void): () => void;
+  onActorLeft(handler: (n: { uuid: string }) => void): () => void;
+  /** The World Stores reaper: fires when a stale actor is dropped. */
+  onLaneLeave(handler: (uuid: string) => void): () => void;
+  /** The local actor's uuid (frames from it are ignored on receive). */
+  selfUuid(): string | null;
+  /** Where the local actor is; null when not joined. */
+  selfChunk(): { x: string; y: string; z: string } | null;
+  appId(): string;
+  sendVideoFrame(input: {
+    appId: string;
+    chunk: { x: string; y: string; z: string };
+    uuid: string;
+    frame: Uint8Array;
+    frameId: number;
+    codec: VideoCodec;
+    distance: number;
+  }): Promise<number>;
+  log(message: string): void;
+}
+
+/** Decodes an encoded frame to a bitmap. Injected so tests need no canvas. */
+export type FrameDecoder = (frame: AssembledVideoFrame) => Promise<ImageBitmap>;
+
+export const decodeWithCreateImageBitmap: FrameDecoder = (frame) =>
+  createImageBitmap(
+    new Blob([frame.bytes as BlobPart], {
+      type: frame.codec === VideoCodec.WEBP ? 'image/webp' : 'image/jpeg',
+    }),
+  );
+
+export class WebcamService {
+  readonly events = new Emitter<WebcamEvents>();
+
+  private readonly assembler = new VideoFrameAssembler();
+  private readonly remoteLastFrame = new Map<string, number>();
+  private unsubscribes: Array<() => void> = [];
+  private idleTimer: ReturnType<typeof setInterval> | null = null;
+
+  private stream: MediaStream | null = null;
+  private video: HTMLVideoElement | null = null;
+  private canvas: OffscreenCanvas | HTMLCanvasElement | null = null;
+  private captureTimer: ReturnType<typeof setInterval> | null = null;
+  private encoding = false;
+  private frameId = 0;
+  /** Frames the API accepted since start(); for the HUD and the live test. */
+  framesSent = 0;
+  private quality = 0.6;
+  private errorValue: string | null = null;
+  private refusedOnce = false;
+
+  constructor(
+    private readonly transport: WebcamTransport,
+    private readonly decode: FrameDecoder = decodeWithCreateImageBitmap,
+    private readonly now: () => number = () => Date.now(),
+  ) {}
+
+  // ---------------------------------------------------------------------------
+  // Receiving
+  // ---------------------------------------------------------------------------
+
+  /** Begin receiving other players' frames. Idempotent. */
+  listen(): void {
+    if (this.unsubscribes.length > 0) return;
+    this.unsubscribes.push(
+      this.transport.onVideo((n) => void this.ingest(n.uuid, n.videoData)),
+      this.transport.onActorLeft((n) => this.end(n.uuid)),
+      this.transport.onLaneLeave((uuid) => this.end(uuid)),
+    );
+    this.idleTimer = setInterval(() => this.reapIdle(), 1_000);
+  }
+
+  /** True while frames are arriving from this player. */
+  isLive(uuid: string): boolean {
+    return this.remoteLastFrame.has(uuid);
+  }
+
+  /** Players currently sending video. */
+  liveSenders(): string[] {
+    return [...this.remoteLastFrame.keys()];
+  }
+
+  private async ingest(uuid: string, videoData: string): Promise<void> {
+    if (uuid === this.transport.selfUuid()) return;
+    let bytes: Uint8Array;
+    try {
+      bytes = decodeBase64(videoData);
+    } catch {
+      return;
+    }
+    const frame = this.assembler.ingest(uuid, bytes, this.now());
+    if (!frame) return;
+    let bitmap: ImageBitmap;
+    try {
+      bitmap = await this.decode(frame);
+    } catch (error) {
+      this.transport.log(
+        `video frame from ${uuid.slice(0, 8)} did not decode: ${messageOf(error)}`,
+      );
+      return;
+    }
+    // The sender may have left while we decoded; do not resurrect them.
+    if (!this.unsubscribes.length) {
+      bitmap.close();
+      return;
+    }
+    this.remoteLastFrame.set(uuid, this.now());
+    this.events.emit('frame', { uuid, bitmap, frameId: frame.frameId });
+  }
+
+  private end(uuid: string): void {
+    this.assembler.forget(uuid);
+    if (!this.remoteLastFrame.delete(uuid)) return;
+    this.events.emit('ended', { uuid });
+  }
+
+  private reapIdle(): void {
+    const cutoff = this.now() - REMOTE_IDLE_MS;
+    for (const [uuid, at] of this.remoteLastFrame) if (at < cutoff) this.end(uuid);
+    this.assembler.prune(this.now());
+  }
+
+  // ---------------------------------------------------------------------------
+  // Sending
+  // ---------------------------------------------------------------------------
+
+  get isTransmitting(): boolean {
+    return this.captureTimer !== null;
+  }
+
+  /** The local camera stream while live (for a self-preview), else null. */
+  get localStream(): MediaStream | null {
+    return this.stream;
+  }
+
+  get error(): string | null {
+    return this.errorValue;
+  }
+
+  async toggle(): Promise<void> {
+    if (this.isTransmitting) this.stop();
+    else await this.start();
+  }
+
+  /** Ask for the camera and start sending frames. Resolves once capturing. */
+  async start(): Promise<void> {
+    if (this.captureTimer) return;
+    if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia) {
+      this.fail('This browser has no camera access');
+      return;
+    }
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: { width: CAPTURE_WIDTH, height: CAPTURE_HEIGHT, frameRate: CAPTURE_FPS },
+        audio: false,
+      });
+    } catch (error) {
+      this.fail(`Camera unavailable: ${messageOf(error)}`);
+      return;
+    }
+    const video = document.createElement('video');
+    video.muted = true;
+    video.playsInline = true;
+    video.srcObject = this.stream;
+    await video.play().catch(() => undefined);
+    this.video = video;
+    this.canvas =
+      typeof OffscreenCanvas === 'undefined'
+        ? Object.assign(document.createElement('canvas'), {
+            width: CAPTURE_WIDTH,
+            height: CAPTURE_HEIGHT,
+          })
+        : new OffscreenCanvas(CAPTURE_WIDTH, CAPTURE_HEIGHT);
+    this.errorValue = null;
+    this.refusedOnce = false;
+    this.captureTimer = setInterval(() => void this.captureOnce(), 1000 / CAPTURE_FPS);
+    this.events.emit('local', { live: true, stream: this.stream, error: null });
+  }
+
+  /** Stop sending and release the camera. Receiving continues. */
+  stop(): void {
+    if (this.captureTimer) clearInterval(this.captureTimer);
+    this.captureTimer = null;
+    this.video?.pause();
+    this.video = null;
+    this.canvas = null;
+    for (const track of this.stream?.getTracks() ?? []) track.stop();
+    const wasLive = this.stream !== null;
+    this.stream = null;
+    if (wasLive) this.events.emit('local', { live: false, stream: null, error: this.errorValue });
+  }
+
+  private async captureOnce(): Promise<void> {
+    if (this.encoding || !this.video || !this.canvas) return;
+    const chunk = this.transport.selfChunk();
+    const uuid = this.transport.selfUuid();
+    if (!chunk || !uuid) return;
+    if (this.video.readyState < 2) return; // HAVE_CURRENT_DATA
+    this.encoding = true;
+    try {
+      const frame = await this.encodeFrame();
+      if (!frame) return;
+      this.frameId = (this.frameId + 1) & 0xffff;
+      await this.transport.sendVideoFrame({
+        appId: this.transport.appId(),
+        chunk,
+        uuid,
+        frame,
+        frameId: this.frameId,
+        codec: VideoCodec.JPEG,
+        distance: VIDEO_DISTANCE,
+      });
+      this.framesSent += 1;
+    } catch (error) {
+      const message = messageOf(error);
+      if (/UNAUTHORIZED|permission/i.test(message)) {
+        // The tier (or a grid under us) lacks use_video_chat. Say so once and
+        // stop rather than sending 10 refusals a second.
+        if (!this.refusedOnce) {
+          this.refusedOnce = true;
+          this.fail('Camera refused: this app does not grant use_video_chat here');
+          this.stop();
+        }
+      } else {
+        this.transport.log(`video send failed: ${message}`);
+      }
+    } finally {
+      this.encoding = false;
+    }
+  }
+
+  /** Draw the current video frame and encode it as a JPEG under the size cap. */
+  private async encodeFrame(): Promise<Uint8Array | null> {
+    const canvas = this.canvas;
+    const video = this.video;
+    if (!canvas || !video) return null;
+    const ctx = canvas.getContext('2d') as
+      OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;
+    if (!ctx) return null;
+    ctx.drawImage(video, 0, 0, CAPTURE_WIDTH, CAPTURE_HEIGHT);
+    for (let attempt = 0; attempt < 3; attempt++) {
+      const blob = await toBlob(canvas, this.quality);
+      if (!blob) return null;
+      if (blob.size <= MAX_FRAME_BYTES) {
+        // Creep the quality back up while there is headroom.
+        if (blob.size < MAX_FRAME_BYTES / 2 && this.quality < 0.8) this.quality += 0.05;
+        return new Uint8Array(await blob.arrayBuffer());
+      }
+      this.quality = Math.max(0.2, this.quality - 0.15);
+    }
+    return null; // still too big: skip this frame rather than send a partial one
+  }
+
+  private fail(message: string): void {
+    this.errorValue = message;
+    this.transport.log(message);
+    this.events.emit('local', { live: false, stream: null, error: message });
+  }
+
+  /** Stop everything: capture, receiving, and every remote stream. */
+  dispose(): void {
+    this.stop();
+    for (const unsubscribe of this.unsubscribes) unsubscribe();
+    this.unsubscribes = [];
+    if (this.idleTimer) clearInterval(this.idleTimer);
+    this.idleTimer = null;
+    for (const uuid of [...this.remoteLastFrame.keys()]) this.end(uuid);
+  }
+}
+
+function toBlob(
+  canvas: OffscreenCanvas | HTMLCanvasElement,
+  quality: number,
+): Promise<Blob | null> {
+  if ('convertToBlob' in canvas) return canvas.convertToBlob({ type: 'image/jpeg', quality });
+  return new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', quality));
+}
+
+function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}

package/src/platform/media/mulaw.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+
+import { acceptVoiceSequence, muLawDecode, muLawEncode } from './mulaw';
+
+describe('mu-law', () => {
+  it('round-trips silence and a peak within a loose tolerance', () => {
+    expect(muLawDecode(muLawEncode(0))).toBeCloseTo(0, 2);
+    expect(muLawDecode(muLawEncode(0.5))).toBeGreaterThan(0.4);
+    expect(muLawDecode(muLawEncode(-0.5))).toBeLessThan(-0.4);
+  });
+});
+
+describe('acceptVoiceSequence', () => {
+  it('drops duplicates and stale wraps, and resets after a gap', () => {
+    expect(acceptVoiceSequence(5, 5, 10, 1500).accept).toBe(false);
+    expect(acceptVoiceSequence(5, 4, 10, 1500).accept).toBe(false);
+    expect(acceptVoiceSequence(5, 6, 10, 1500)).toEqual({ accept: true, nextSequence: 6 });
+    expect(acceptVoiceSequence(5, 1, 2000, 1500)).toEqual({ accept: true, nextSequence: 1 });
+  });
+});

package/src/platform/media/mulaw.ts

@@ -0,0 +1,56 @@
+/**
+ * G.711 µ-law — the codec BWF and this starter send over `udp.sendAudioPacket`.
+ * The platform never looks inside `audioData`; this is a client convention.
+ */
+
+const MU_BIAS = 0x84;
+const MU_CLIP = 32635;
+
+export function muLawEncode(sample: number): number {
+  let value = Math.max(-1, Math.min(1, sample)) * 32767;
+  const sign = value < 0 ? 0x80 : 0;
+  value = Math.abs(value);
+  if (value > MU_CLIP) value = MU_CLIP;
+  value += MU_BIAS;
+  let exponent = 7;
+  for (let mask = 0x4000; (value & mask) === 0 && exponent > 0; mask >>= 1) exponent--;
+  const mantissa = (value >> (exponent + 3)) & 0x0f;
+  return ~(sign | (exponent << 4) | mantissa) & 0xff;
+}
+
+export function muLawDecode(byte: number): number {
+  const inverted = ~byte & 0xff;
+  const sign = inverted & 0x80;
+  const exponent = (inverted >> 4) & 0x07;
+  const mantissa = inverted & 0x0f;
+  let value = ((mantissa << 3) + MU_BIAS) << exponent;
+  value -= MU_BIAS;
+  return (sign ? -value : value) / 32767;
+}
+
+export function encodeSamples(samples: Float32Array): Uint8Array {
+  const encoded = new Uint8Array(samples.length);
+  for (let i = 0; i < samples.length; i++) encoded[i] = muLawEncode(samples[i] ?? 0);
+  return encoded;
+}
+
+export function decodeSamples(bytes: Uint8Array): Float32Array {
+  const samples = new Float32Array(bytes.length);
+  for (let i = 0; i < bytes.length; i++) samples[i] = muLawDecode(bytes[i]!);
+  return samples;
+}
+
+/** Drop duplicate / stale 8-bit sequence numbers; a long gap starts a new utterance. */
+export function acceptVoiceSequence(
+  lastSequence: number,
+  sequence: number,
+  gapMs: number,
+  resetAfterMs: number,
+): { accept: boolean; nextSequence: number } {
+  if (gapMs > resetAfterMs) lastSequence = -1;
+  if (sequence >= 0 && lastSequence >= 0) {
+    const advance = (sequence - lastSequence + 256) % 256;
+    if (advance === 0 || advance > 128) return { accept: false, nextSequence: lastSequence };
+  }
+  return { accept: true, nextSequence: sequence >= 0 ? sequence : lastSequence };
+}

package/src/platform/media/videoFrames.test.ts

@@ -0,0 +1,197 @@
+/**
+ * WebcamService's receive path over the SDK's real fragmenter/assembler, with
+ * the platform and the browser mocked: a frame arrives once and whole, the
+ * server's actor-left notice ends the stream at once, the idle fallback ends
+ * a silent one, and dispose releases everything.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+// The SDK root barrel pulls Monaco, which does not load under happy-dom, so the
+// service's import is answered from the two pure modules it actually uses.
+vi.mock('@crowdedkingdoms/crowdyjs', async () => {
+  // Hoisted above the imports, so everything it needs is computed inside.
+  // The package exports only its barrels, so walk to node_modules directly
+  // (vitest runs from the repo root, where vitest.config.ts is).
+  const sdkDist = `${process.cwd()}/node_modules/@crowdedkingdoms/crowdyjs/dist/`;
+  const media = await vi.importActual<Record<string, unknown>>(`${sdkDist}media/video-frames.js`);
+  const utils = await vi.importActual<Record<string, unknown>>(`${sdkDist}utils.js`);
+  return { ...media, decodeBase64: utils.decodeBase64, encodeBase64: utils.encodeBase64 };
+});
+
+import { encodeBase64, fragmentFrame } from '@crowdedkingdoms/crowdyjs';
+
+import { REMOTE_IDLE_MS, WebcamService, type WebcamTransport } from './WebcamService';
+
+type Handler<T> = (n: T) => void;
+
+function fakeTransport() {
+  const video = new Set<Handler<{ uuid: string; videoData: string }>>();
+  const left = new Set<Handler<{ uuid: string }>>();
+  const lane = new Set<Handler<string>>();
+  const transport: WebcamTransport & {
+    emitVideo(uuid: string, packet: Uint8Array): void;
+    emitLeft(uuid: string): void;
+    emitLaneLeave(uuid: string): void;
+    subscriptions(): number;
+  } = {
+    onVideo: (h) => {
+      video.add(h);
+      return () => video.delete(h);
+    },
+    onActorLeft: (h) => {
+      left.add(h);
+      return () => left.delete(h);
+    },
+    onLaneLeave: (h) => {
+      lane.add(h);
+      return () => lane.delete(h);
+    },
+    selfUuid: () => 'self-uuid',
+    selfChunk: () => ({ x: '0', y: '0', z: '0' }),
+    appId: () => '1',
+    sendVideoFrame: vi.fn(async () => 1),
+    log: vi.fn(),
+    emitVideo: (uuid, packet) => {
+      for (const h of video) h({ uuid, videoData: encodeBase64(packet) });
+    },
+    emitLeft: (uuid) => {
+      for (const h of left) h({ uuid });
+    },
+    emitLaneLeave: (uuid) => {
+      for (const h of lane) h(uuid);
+    },
+    subscriptions: () => video.size + left.size + lane.size,
+  };
+  return transport;
+}
+
+function fakeBitmap(): ImageBitmap {
+  return { width: 128, height: 96, close: vi.fn() } as unknown as ImageBitmap;
+}
+
+// Decoding is awaited inside `ingest`; drain the microtask queue (fake timers
+// are on, so a setTimeout-based flush would hang).
+const flush = async () => {
+  for (let i = 0; i < 8; i++) await Promise.resolve();
+};
+
+describe('WebcamService receive path', () => {
+  let now = 1_000_000;
+  const clock = () => now;
+
+  beforeEach(() => {
+    now = 1_000_000;
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('delivers a fragmented frame exactly once, decoded, and never its own', async () => {
+    const transport = fakeTransport();
+    const decode = vi.fn(async () => fakeBitmap());
+    const service = new WebcamService(transport, decode, clock);
+    const frames: string[] = [];
+    service.events.on('frame', ({ uuid, frameId }) => frames.push(`${uuid}:${frameId}`));
+    service.listen();
+    expect(transport.subscriptions()).toBe(3);
+
+    const jpeg = new Uint8Array(3_000).fill(0xab);
+    for (const packet of fragmentFrame(jpeg, 7)) transport.emitVideo('peer-a', packet);
+    await flush();
+    expect(frames).toEqual(['peer-a:7']);
+    expect(decode).toHaveBeenCalledTimes(1);
+    expect(service.isLive('peer-a')).toBe(true);
+    expect(service.liveSenders()).toEqual(['peer-a']);
+
+    // Our own fragments are echoed by the fan-out; they must not become a face.
+    for (const packet of fragmentFrame(jpeg, 8)) transport.emitVideo('self-uuid', packet);
+    await flush();
+    expect(frames).toEqual(['peer-a:7']);
+    service.dispose();
+  });
+
+  it('ends the stream at once on the server actor-left notice', async () => {
+    const transport = fakeTransport();
+    const service = new WebcamService(transport, async () => fakeBitmap(), clock);
+    const ended: string[] = [];
+    service.events.on('ended', ({ uuid }) => ended.push(uuid));
+    service.listen();
+    for (const packet of fragmentFrame(new Uint8Array(500).fill(1), 1))
+      transport.emitVideo('peer-b', packet);
+    await flush();
+    expect(service.isLive('peer-b')).toBe(true);
+
+    transport.emitLeft('peer-b');
+    expect(ended).toEqual(['peer-b']);
+    expect(service.isLive('peer-b')).toBe(false);
+    // A second notice, or the lane reaper following up, does not fire twice.
+    transport.emitLeft('peer-b');
+    transport.emitLaneLeave('peer-b');
+    expect(ended).toEqual(['peer-b']);
+    service.dispose();
+  });
+
+  it('ends a stream whose frames stopped (fallback), via the lane reaper too', async () => {
+    const transport = fakeTransport();
+    const service = new WebcamService(transport, async () => fakeBitmap(), clock);
+    const ended: string[] = [];
+    service.events.on('ended', ({ uuid }) => ended.push(uuid));
+    service.listen();
+    for (const packet of fragmentFrame(new Uint8Array(500).fill(1), 1))
+      transport.emitVideo('peer-c', packet);
+    for (const packet of fragmentFrame(new Uint8Array(500).fill(1), 1))
+      transport.emitVideo('peer-d', packet);
+    await flush();
+
+    transport.emitLaneLeave('peer-d');
+    expect(ended).toEqual(['peer-d']);
+
+    now += REMOTE_IDLE_MS + 1;
+    vi.advanceTimersByTime(1_000);
+    expect(ended).toEqual(['peer-d', 'peer-c']);
+    service.dispose();
+  });
+
+  it('dispose ends every live stream and unsubscribes', async () => {
+    const transport = fakeTransport();
+    const service = new WebcamService(transport, async () => fakeBitmap(), clock);
+    const ended: string[] = [];
+    service.events.on('ended', ({ uuid }) => ended.push(uuid));
+    service.listen();
+    for (const packet of fragmentFrame(new Uint8Array(500).fill(1), 1))
+      transport.emitVideo('peer-e', packet);
+    await flush();
+    service.dispose();
+    expect(ended).toEqual(['peer-e']);
+    expect(transport.subscriptions()).toBe(0);
+    expect(service.isTransmitting).toBe(false);
+  });
+
+  it('drops a frame whose bytes do not decode, without ending a live stream', async () => {
+    const transport = fakeTransport();
+    let fail = false;
+    const service = new WebcamService(
+      transport,
+      async () => {
+        if (fail) throw new Error('bad jpeg');
+        return fakeBitmap();
+      },
+      clock,
+    );
+    const frames: number[] = [];
+    service.events.on('frame', ({ frameId }) => frames.push(frameId));
+    service.listen();
+    for (const packet of fragmentFrame(new Uint8Array(500).fill(1), 1))
+      transport.emitVideo('peer-f', packet);
+    await flush();
+    fail = true;
+    for (const packet of fragmentFrame(new Uint8Array(500).fill(2), 2))
+      transport.emitVideo('peer-f', packet);
+    await flush();
+    expect(frames).toEqual([1]);
+    expect(service.isLive('peer-f')).toBe(true);
+    expect(transport.log).toHaveBeenCalledWith(expect.stringContaining('did not decode'));
+    service.dispose();
+  });
+});