From 71468ae21d049ab86cbd490107058263b240c11b Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@chovy.com>
Date: Tue, 1 Sep 2026 18:28:52 +0000
Subject: [PATCH] fix(webrtc): make audio and remote control work with three
 participants
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two defects that only appear once a session has more than one guest.

**Every guest but one was inaudible.** The SFU viewer folded every
subscribed track from every participant into the single MediaStream
behind the <video> element, and a media element plays only the *first*
audio track a stream carries. With one other person in the room that is
invisible; with two, each viewer heard whichever of the others was
subscribed first and the other was silent for the whole session. Remote
audio now gets one element and one gain stage per participant, mirroring
how the host has always played its viewers back, and remoteStream
carries video only. The speaker toggle moves with it, since muting the
video element no longer silences anyone.

**Control decisions were broadcast, and acted on by the wrong guest.**
A guest releasing control published control-revoke to the whole room
without naming a recipient, and receivers never checked who a message
was addressed to — so releasing control silently stripped it from
whoever actually held it. Receivers now ignore anything addressed to
someone else, and requests, releases and input are addressed to the
participant sharing their screen. Input alone runs at up to 60 messages
a second and was reaching every guest in the room.

The server-side control signal was never delivered at all: it addressed
the session_participants row id, which is not a LiveKit identity in
either client (desktop joins as the auth user id, web as a generated
UUID). It now resolves the real identity from the room via the userId
each token embeds, and skips with a warning when the target is not
connected.

Screen-share handoff between participants is a separate, larger gap and
is not addressed here.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JurkDGA8erL3ecmZwN8J5H
---
 .../hooks/useWebRTCViewerSFUAPI.test.ts       | 236 +++++++++++++--
 .../renderer/hooks/useWebRTCViewerSFUAPI.ts   | 285 +++++++++++++++---
 apps/desktop/src/renderer/routes/viewer.tsx   |  18 ++
 .../[participantId]/control/route.test.ts     |  95 +++++-
 .../[participantId]/control/route.ts          |  70 ++++-
 5 files changed, 614 insertions(+), 90 deletions(-)

diff --git a/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.test.ts b/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.test.ts
index c364bde8..78294086 100644
--- a/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.test.ts
+++ b/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.test.ts
@@ -39,6 +39,52 @@ vi.mock('@/lib/ipc', () => ({
   }),
 }));
 
+// Remote audio now plays through one element per participant, each fronted by a
+// Web Audio gain stage. jsdom has no AudioContext, so stand in for the graph and
+// record which tracks were wired up.
+interface AmplifiedStub {
+  track: { id?: string };
+  disposed: boolean;
+  setGain: ReturnType<typeof vi.fn>;
+  dispose: () => void;
+}
+const amplified: AmplifiedStub[] = [];
+vi.mock('@/lib/remoteAudioGain', () => ({
+  amplifyRemoteAudio: (track: { id?: string }) => {
+    const entry: AmplifiedStub = {
+      track,
+      disposed: false,
+      setGain: vi.fn(),
+      dispose: () => {
+        entry.disposed = true;
+      },
+    };
+    (entry as unknown as { stream: unknown }).stream = new MockMediaStream([track]);
+    amplified.push(entry);
+    return entry;
+  },
+}));
+
+/** The audio elements the hook created, in creation order. */
+const audioElements: { muted: boolean; paused: boolean; srcObject: unknown }[] = [];
+class MockAudio {
+  muted = false;
+  paused = false;
+  autoplay = false;
+  volume = 1;
+  srcObject: unknown = null;
+  constructor() {
+    audioElements.push(this);
+  }
+  play() {
+    return Promise.resolve();
+  }
+  pause() {
+    this.paused = true;
+  }
+}
+(globalThis as Record<string, unknown>).Audio = MockAudio;
+
 // Mock LiveKit Room
 const mockPublishData = vi.fn();
 const mockSetMicrophoneEnabled = vi.fn().mockResolvedValue(undefined);
@@ -118,6 +164,8 @@ describe('useWebRTCViewerSFUAPI', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockRemoteParticipants.clear();
+    amplified.length = 0;
+    audioElements.length = 0;
 
     // Re-set mock implementations (vi.restoreAllMocks clears them)
     mockFetch.mockResolvedValue({
@@ -270,7 +318,7 @@ describe('useWebRTCViewerSFUAPI', () => {
     expect(hookResult!.current.remoteStream).not.toBeNull();
   });
 
-  it('should merge subscribed audio and video tracks into one remote stream', async () => {
+  it('should keep remote audio out of the remote stream and play it per participant', async () => {
     let hookResult: { current: ReturnType<typeof useWebRTCViewerSFUAPI> };
 
     await act(async () => {
@@ -282,44 +330,87 @@ describe('useWebRTCViewerSFUAPI', () => {
       await Promise.resolve();
     });
 
-    const mockAudioTrack = {
-      kind: 'audio',
-      mediaStreamTrack: { id: 'audio-1', kind: 'audio' },
-    };
-    const mockVideoTrack = {
-      kind: 'video',
-      mediaStreamTrack: { id: 'video-1', kind: 'video' },
-    };
+    const hostAudio = { kind: 'audio', mediaStreamTrack: { id: 'audio-host', kind: 'audio' } };
+    const peerAudio = { kind: 'audio', mediaStreamTrack: { id: 'audio-peer', kind: 'audio' } };
+    const mockVideoTrack = { kind: 'video', mediaStreamTrack: { id: 'video-1', kind: 'video' } };
 
+    // A media element plays only the FIRST audio track of the stream it is
+    // given, so folding both of these into remoteStream made whichever arrived
+    // second inaudible for the whole session. Each one gets its own element.
     act(() => {
-      mockRoomInstance.emit('trackSubscribed', mockAudioTrack, {}, { identity: 'host-1' });
+      mockRoomInstance.emit('trackSubscribed', hostAudio, {}, { identity: 'host-1' });
+      mockRoomInstance.emit('trackSubscribed', peerAudio, {}, { identity: 'viewer-2' });
     });
 
-    const firstStream = hookResult!.current.remoteStream;
-    expect(firstStream).not.toBeNull();
-    expect(firstStream?.getAudioTracks()).toHaveLength(1);
-    expect(firstStream?.getVideoTracks()).toHaveLength(0);
+    expect(hookResult!.current.remoteStream).toBeNull();
+    expect(audioElements).toHaveLength(2);
+    expect(amplified.map((a) => a.track.id)).toEqual(['audio-host', 'audio-peer']);
 
     act(() => {
       mockRoomInstance.emit('trackSubscribed', mockVideoTrack, {}, { identity: 'host-1' });
     });
 
-    const mergedStream = hookResult!.current.remoteStream;
-    // A NEW reference, not a mutated one: React bails on setState with the same
-    // object, so VideoViewer's srcObject effect would never re-bind.
-    expect(mergedStream).not.toBe(firstStream);
-    expect(mergedStream?.getAudioTracks()).toHaveLength(1);
-    expect(mergedStream?.getVideoTracks()).toHaveLength(1);
+    // The stream carries video and nothing else.
+    const videoStream = hookResult!.current.remoteStream;
+    expect(videoStream?.getVideoTracks()).toHaveLength(1);
+    expect(videoStream?.getAudioTracks()).toHaveLength(0);
 
+    // One participant leaving tears down only their own playback.
     act(() => {
-      mockRoomInstance.emit('trackUnsubscribed', mockAudioTrack);
+      mockRoomInstance.emit('trackUnsubscribed', peerAudio);
     });
 
-    expect(hookResult!.current.remoteStream).not.toBe(mergedStream);
-    expect(hookResult!.current.remoteStream?.getAudioTracks()).toHaveLength(0);
+    expect(amplified.find((a) => a.track.id === 'audio-peer')?.disposed).toBe(true);
+    expect(amplified.find((a) => a.track.id === 'audio-host')?.disposed).toBe(false);
     expect(hookResult!.current.remoteStream?.getVideoTracks()).toHaveLength(1);
   });
 
+  it('should mute every remote participant through setSpeakerMuted', async () => {
+    let hookResult: { current: ReturnType<typeof useWebRTCViewerSFUAPI> };
+
+    await act(async () => {
+      const { result } = renderHook(() => useWebRTCViewerSFUAPI(defaultOptions));
+      hookResult = result;
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    act(() => {
+      mockRoomInstance.emit(
+        'trackSubscribed',
+        { kind: 'audio', mediaStreamTrack: { id: 'audio-host', kind: 'audio' } },
+        {},
+        { identity: 'host-1' }
+      );
+    });
+
+    // Remote audio no longer lives in the <video>, so muting that element is not
+    // enough — the speaker button has to reach these.
+    act(() => {
+      hookResult!.current.setSpeakerMuted(true);
+    });
+    expect(audioElements.every((el) => el.muted)).toBe(true);
+
+    // Somebody joining while muted stays muted.
+    act(() => {
+      mockRoomInstance.emit(
+        'trackSubscribed',
+        { kind: 'audio', mediaStreamTrack: { id: 'audio-late', kind: 'audio' } },
+        {},
+        { identity: 'viewer-3' }
+      );
+    });
+    expect(audioElements).toHaveLength(2);
+    expect(audioElements.every((el) => el.muted)).toBe(true);
+
+    act(() => {
+      hookResult!.current.setSpeakerMuted(false);
+    });
+    expect(audioElements.every((el) => el.muted)).toBe(false);
+  });
+
   it('should disable adaptiveStream so the screen share is never auto-paused', async () => {
     await act(async () => {
       renderHook(() => useWebRTCViewerSFUAPI(defaultOptions));
@@ -360,16 +451,15 @@ describe('useWebRTCViewerSFUAPI', () => {
     const sharing = hookResult!.current.remoteStream;
     expect(sharing?.getVideoTracks()).toHaveLength(1);
 
-    // Host stops sharing. Their mic stays subscribed, so the stream survives —
-    // this is the case that used to keep a stale reference alive.
+    // Host stops sharing. Their mic stays subscribed but is played elsewhere,
+    // so the video stream empties out rather than surviving as a stale
+    // reference that a replacement track gets added to in place.
     act(() => {
       mockRoomInstance.emit('trackUnsubscribed', firstVideo);
     });
 
-    const audioOnly = hookResult!.current.remoteStream;
-    expect(audioOnly).not.toBeNull();
-    expect(audioOnly).not.toBe(sharing);
-    expect(audioOnly?.getVideoTracks()).toHaveLength(0);
+    expect(hookResult!.current.remoteStream).toBeNull();
+    expect(amplified.find((a) => a.track.id === 'audio-1')?.disposed).toBe(false);
 
     // Host starts a new share.
     act(() => {
@@ -377,7 +467,7 @@ describe('useWebRTCViewerSFUAPI', () => {
     });
 
     const restarted = hookResult!.current.remoteStream;
-    expect(restarted).not.toBe(audioOnly);
+    expect(restarted).not.toBe(sharing);
     expect(restarted?.getVideoTracks()).toHaveLength(1);
     expect((restarted?.getVideoTracks()[0] as { id?: string } | undefined)?.id).toBe('video-2');
   });
@@ -466,6 +556,92 @@ describe('useWebRTCViewerSFUAPI', () => {
     expect(hookResult!.current.controlState).toBe('granted');
   });
 
+  it('should ignore control messages addressed to another participant', async () => {
+    let hookResult: { current: ReturnType<typeof useWebRTCViewerSFUAPI> };
+
+    await act(async () => {
+      const { result } = renderHook(() => useWebRTCViewerSFUAPI(defaultOptions));
+      hookResult = result;
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    const encode = (message: unknown) => new TextEncoder().encode(JSON.stringify(message));
+
+    act(() => {
+      mockRoomInstance.emit(
+        'dataReceived',
+        encode({ type: 'control-grant', participantId: 'viewer-1', timestamp: Date.now() }),
+        { identity: 'host-1' }
+      );
+    });
+    expect(hookResult!.current.controlState).toBe('granted');
+
+    // Another guest releasing control used to be broadcast untargeted, and
+    // every other guest applied it to themselves — so the person actually
+    // driving was silently dropped back to view-only.
+    act(() => {
+      mockRoomInstance.emit(
+        'dataReceived',
+        encode({ type: 'control-revoke', participantId: 'viewer-2', timestamp: Date.now() }),
+        { identity: 'viewer-2' }
+      );
+    });
+    expect(hookResult!.current.controlState).toBe('granted');
+
+    // A revoke that really is ours still lands.
+    act(() => {
+      mockRoomInstance.emit(
+        'dataReceived',
+        encode({ type: 'control-revoke', participantId: 'viewer-1', timestamp: Date.now() }),
+        { identity: 'host-1' }
+      );
+    });
+    expect(hookResult!.current.controlState).toBe('view-only');
+  });
+
+  it('should address control requests to the participant sharing their screen', async () => {
+    let hookResult: { current: ReturnType<typeof useWebRTCViewerSFUAPI> };
+
+    mockRemoteParticipants.set('host-1', {
+      identity: 'host-1',
+      metadata: JSON.stringify({ role: 'host' }),
+      videoTrackPublications: new Map([['screen', { source: 'screen_share' }]]),
+    });
+    mockRemoteParticipants.set('viewer-2', {
+      identity: 'viewer-2',
+      metadata: JSON.stringify({ role: 'viewer' }),
+      videoTrackPublications: new Map(),
+    });
+
+    await act(async () => {
+      const { result } = renderHook(() => useWebRTCViewerSFUAPI(defaultOptions));
+      hookResult = result;
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    // Simulate connected state setting dataChannelReady
+    act(() => {
+      mockRoomInstance.emit('connectionStateChanged', 'connected');
+    });
+
+    mockPublishData.mockClear();
+    act(() => {
+      hookResult!.current.requestControl();
+    });
+
+    // Only the presenter can act on it, and only the presenter should see it.
+    expect(mockPublishData).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ destinationIdentities: ['host-1'] })
+    );
+  });
+
   it('should send control request via publishData', async () => {
     let hookResult: { current: ReturnType<typeof useWebRTCViewerSFUAPI> };
 
diff --git a/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.ts b/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.ts
index 38e45066..2c671e69 100644
--- a/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.ts
+++ b/apps/desktop/src/renderer/hooks/useWebRTCViewerSFUAPI.ts
@@ -18,6 +18,7 @@ import { API_BASE_URL } from '../../shared/config';
 import { getElectronAPI } from '@/lib/ipc';
 import { announceTailnet, buildTailnetHello } from '@/lib/tailnetHello';
 import { buildSfuRtcConfig } from '@/lib/iceConfig';
+import { amplifyRemoteAudio, type AmplifiedAudioTrack } from '@/lib/remoteAudioGain';
 import type {
   ConnectionState,
   QualityMetrics,
@@ -59,6 +60,27 @@ interface UseWebRTCViewerSFUAPIReturn {
   micEnabled: boolean;
   hasMic: boolean;
   toggleMic: () => void;
+  /**
+   * Mute or unmute every remote participant at once.
+   *
+   * Remote audio no longer travels inside `remoteStream`, so muting the video
+   * element no longer silences anybody. The speaker toggle has to reach the
+   * per-participant elements instead.
+   */
+  setSpeakerMuted: (muted: boolean) => void;
+}
+
+/**
+ * One remote participant's audio playback.
+ *
+ * Each subscribed audio track gets its own element and its own gain stage,
+ * mirroring how the host already plays viewers back. See `attachRemoteAudio`
+ * for why they cannot share one.
+ */
+interface RemoteAudioPlayback {
+  track: MediaStreamTrack;
+  element: HTMLAudioElement;
+  amplified: AmplifiedAudioTrack;
 }
 
 function mapConnectionState(lkState: LKConnectionState): ConnectionState {
@@ -97,6 +119,9 @@ export function useWebRTCViewerSFUAPI({
 
   const roomRef = useRef<Room | null>(null);
   const inputSequenceRef = useRef(0);
+  // Remote audio, one entry per subscribed track, keyed by track id.
+  const remoteAudioRef = useRef(new Map<string, RemoteAudioPlayback>());
+  const speakerMutedRef = useRef(false);
   const statsIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const remoteMediaStreamRef = useRef<MediaStream | null>(null);
   // Track previous bytesReceived for delta-based bitrate calculation
@@ -116,33 +141,167 @@ export function useWebRTCViewerSFUAPI({
   onStreamReadyRef.current = onStreamReady;
   onStreamEndedRef.current = onStreamEnded;
 
+  /**
+   * Give one remote participant their own audio element.
+   *
+   * Every subscribed track used to be folded into the single `MediaStream`
+   * behind the `<video>` element, and a media element plays only the *first*
+   * audio track a stream carries. With one other person in the room that is
+   * invisible — there is only ever one. With three, each viewer heard whichever
+   * of the other two was subscribed first, and the other stayed silent for the
+   * whole session.
+   *
+   * So audio is played per participant, exactly as the host already plays its
+   * viewers back, and `remoteStream` carries video only.
+   */
+  const attachRemoteAudio = useCallback((track: MediaStreamTrack) => {
+    if (remoteAudioRef.current.has(track.id)) return;
+
+    // An element's volume tops out at 1.0, so the track passes through a gain
+    // stage first — the same one the host uses, for the same reason.
+    const amplified = amplifyRemoteAudio(track);
+
+    const element = new Audio();
+    element.srcObject = amplified.stream;
+    element.autoplay = true;
+    element.volume = 1.0;
+    element.muted = speakerMutedRef.current;
+    // Wrapped because `play()` predates its own promise and still returns
+    // undefined on some implementations; a bare `.catch` there would throw.
+    void Promise.resolve(element.play()).catch((err: unknown) => {
+      console.warn('[WebRTCViewerSFU] Failed to play remote audio:', err);
+    });
+
+    remoteAudioRef.current.set(track.id, { track, element, amplified });
+    console.log('[WebRTCViewerSFU] Remote audio attached', {
+      trackId: track.id,
+      total: remoteAudioRef.current.size,
+    });
+  }, []);
+
+  /** Stop and tear down one participant's playback. */
+  const detachRemoteAudio = useCallback((trackId: string) => {
+    const playback = remoteAudioRef.current.get(trackId);
+    if (!playback) return;
+
+    playback.element.pause();
+    playback.element.srcObject = null;
+    playback.amplified.dispose();
+    remoteAudioRef.current.delete(trackId);
+    console.log('[WebRTCViewerSFU] Remote audio detached', {
+      trackId,
+      total: remoteAudioRef.current.size,
+    });
+  }, []);
+
+  /** Tear down every participant's playback. */
+  const detachAllRemoteAudio = useCallback(() => {
+    for (const trackId of [...remoteAudioRef.current.keys()]) {
+      detachRemoteAudio(trackId);
+    }
+  }, [detachRemoteAudio]);
+
+  /**
+   * Mute or unmute every remote participant.
+   *
+   * Elements are created as tracks arrive, so the wanted state is held in a ref
+   * and applied to whoever joins later as well.
+   */
+  const setSpeakerMuted = useCallback((muted: boolean) => {
+    speakerMutedRef.current = muted;
+    for (const playback of remoteAudioRef.current.values()) {
+      playback.element.muted = muted;
+    }
+  }, []);
+
   // Handle incoming data messages from LiveKit
   // Send data through LiveKit
-  const sendData = useCallback((message: unknown, reliable = true) => {
+  /**
+   * Send to the room, or to one participant when `targetIdentity` is given.
+   *
+   * Control messages must be addressed. Broadcasting them means the other
+   * *viewers* act on decisions that were never about them: an untargeted
+   * `control-revoke` from whoever was driving put every other guest into
+   * `view-only` too, so releasing control silently stripped it from the
+   * person who actually held it. Harmless with one guest, wrong with two.
+   */
+  const sendData = useCallback((message: unknown, reliable = true, targetIdentity?: string) => {
     const room = roomRef.current;
     if (room?.state !== LKConnectionState.Connected) return;
 
     const data = encoder.encode(JSON.stringify(message));
-    void room.localParticipant.publishData(data, { reliable });
+    const opts: { reliable: boolean; destinationIdentities?: string[] } = { reliable };
+    if (targetIdentity) {
+      opts.destinationIdentities = [targetIdentity];
+    }
+    void room.localParticipant.publishData(data, opts);
+  }, []);
+
+  /**
+   * The identity of whoever is publishing screen video, i.e. the peer that
+   * control messages and input belong to.
+   *
+   * Everything a guest sends about control is for the presenter alone. Falling
+   * back to the participant marked `host` in metadata keeps a voice-only
+   * session (nobody sharing yet) working.
+   */
+  const findHostIdentity = useCallback((): string | undefined => {
+    const room = roomRef.current;
+    if (!room) return undefined;
+
+    let hostByMetadata: string | undefined;
+    for (const participant of room.remoteParticipants.values()) {
+      for (const publication of participant.videoTrackPublications.values()) {
+        if (publication.source === Track.Source.ScreenShare) return participant.identity;
+      }
+      if (hostByMetadata === undefined) {
+        try {
+          const meta = JSON.parse(participant.metadata ?? '{}') as { role?: string };
+          if (meta.role === 'host') hostByMetadata = participant.identity;
+        } catch {
+          // metadata parse failed; fall through
+        }
+      }
+    }
+    return hostByMetadata;
   }, []);
 
   const handleDataReceived = useCallback(
-    (payload: Uint8Array, _participant?: RemoteParticipant) => {
+    (payload: Uint8Array, sender?: RemoteParticipant) => {
       try {
         const text = decoder.decode(payload);
         const message = JSON.parse(text) as ControlMessage | KickMessage | MuteMessage;
 
         if ('type' in message) {
+          // A control decision names who it is about. Acting on one addressed
+          // to somebody else is how a third participant in the room lost the
+          // control they had been granted: a guest releasing control broadcast
+          // `control-revoke`, and every other guest applied it to themselves.
+          //
+          // `tailnet-hello` is excluded because its `participantId` is the
+          // *sender*, not the addressee — it is a greeting, and dropping it
+          // here would silently kill the handshake. `kick` omits the field and
+          // is addressed by delivery alone.
+          const addressee = (message as { participantId?: unknown }).participantId;
+          if (
+            message.type !== 'tailnet-hello' &&
+            typeof addressee === 'string' &&
+            addressee !== participantId
+          ) {
+            return;
+          }
+
           switch (message.type) {
             case 'tailnet-hello': {
               // Diagnostic only. Reply once with our own addresses so the host
               // can test whether a direct WireGuard path exists; never reply to
               // a reply, or the two sides ping-pong forever.
               if (message.reply) break;
+              const replyTo = sender?.identity;
               void getElectronAPI()
                 .invoke('tailscale:info', undefined)
                 .then((info) => {
-                  sendData(buildTailnetHello(participantId, info.ips, true));
+                  sendData(buildTailnetHello(participantId, info.ips, true), true, replyTo);
                 })
                 .catch(() => {
                   // Diagnostics must never disturb a session.
@@ -194,8 +353,8 @@ export function useWebRTCViewerSFUAPI({
       participantId,
       timestamp: Date.now(),
     };
-    sendData(message);
-  }, [participantId, dataChannelReady, sendData]);
+    sendData(message, true, findHostIdentity());
+  }, [participantId, dataChannelReady, sendData, findHostIdentity]);
 
   // Release control
   const releaseControl = useCallback(() => {
@@ -209,8 +368,8 @@ export function useWebRTCViewerSFUAPI({
       participantId,
       timestamp: Date.now(),
     };
-    sendData(message);
-  }, [participantId, dataChannelReady, sendData]);
+    sendData(message, true, findHostIdentity());
+  }, [participantId, dataChannelReady, sendData, findHostIdentity]);
 
   // Send input event
   const sendInput = useCallback(
@@ -228,9 +387,12 @@ export function useWebRTCViewerSFUAPI({
       // queueing it behind a flood of reliable data packets.
       const isContinuous =
         event.type === 'mouse' && (event.action === 'move' || event.action === 'scroll');
-      sendData(message, !isContinuous);
+      // Addressed to the presenter. Input runs at up to 60 messages a second
+      // and only one machine can act on it; broadcasting sent every keystroke
+      // and mouse position to every other guest in the room as well.
+      sendData(message, !isContinuous, findHostIdentity());
     },
-    [controlState, dataChannelReady, sendData]
+    [controlState, dataChannelReady, sendData, findHostIdentity]
   );
 
   // Collect stats
@@ -307,6 +469,10 @@ export function useWebRTCViewerSFUAPI({
       roomRef.current = null;
     }
 
+    // Every participant's playback holds an element and a Web Audio graph;
+    // leaving them behind leaks a device connection per reconnect.
+    detachAllRemoteAudio();
+
     remoteMediaStreamRef.current = null;
     setRemoteStream(null);
     setConnectionState('disconnected');
@@ -315,7 +481,7 @@ export function useWebRTCViewerSFUAPI({
     setControlState('view-only');
     setMicEnabled(false);
     setHasMic(false);
-  }, []);
+  }, [detachAllRemoteAudio]);
 
   disconnectRef.current = disconnect;
 
@@ -386,53 +552,63 @@ export function useWebRTCViewerSFUAPI({
       room.on(
         RoomEvent.TrackSubscribed,
         (track, _publication: RemoteTrackPublication, _participant: RemoteParticipant) => {
-          if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
-            const mediaTrack = track.mediaStreamTrack;
-            const existingTracks = remoteMediaStreamRef.current?.getTracks() ?? [];
-            if (existingTracks.some((t) => t.id === mediaTrack.id)) return;
-
-            // Emit a NEW MediaStream reference on every track change. React bails
-            // on setState with the same object, so VideoViewer's srcObject effect
-            // (keyed on the stream identity) never re-runs — and a track added to
-            // a MediaStream that is already attached to a <video> is not reliably
-            // rendered. When a host stops and restarts sharing while their mic
-            // stays subscribed, the stream still holds the audio track, so the
-            // ref survives and the replacement video track was added in place:
-            // invisible to the viewer while the host's own preview looked fine.
-            // A fresh reference forces srcObject to re-bind.
-            const nextStream = new MediaStream([...existingTracks, mediaTrack]);
-            remoteMediaStreamRef.current = nextStream;
-            setRemoteStream(nextStream);
-
-            if (track.kind === Track.Kind.Video) {
-              onStreamReadyRef.current?.(nextStream);
-            }
+          const mediaTrack = track.mediaStreamTrack;
+
+          // Audio plays through its own element, one per participant, so that
+          // a third person in the room is not silently dropped. See
+          // attachRemoteAudio.
+          if (track.kind === Track.Kind.Audio) {
+            attachRemoteAudio(mediaTrack);
+            return;
           }
+
+          if (track.kind !== Track.Kind.Video) return;
+
+          const existingTracks = remoteMediaStreamRef.current?.getTracks() ?? [];
+          if (existingTracks.some((t) => t.id === mediaTrack.id)) return;
+
+          // Emit a NEW MediaStream reference on every track change. React bails
+          // on setState with the same object, so VideoViewer's srcObject effect
+          // (keyed on the stream identity) never re-runs — and a track added to
+          // a MediaStream that is already attached to a <video> is not reliably
+          // rendered. When a host stops and restarts sharing, a stream that
+          // survived in place was invisible to the viewer while the host's own
+          // preview looked fine. A fresh reference forces srcObject to re-bind.
+          const nextStream = new MediaStream([...existingTracks, mediaTrack]);
+          remoteMediaStreamRef.current = nextStream;
+          setRemoteStream(nextStream);
+          onStreamReadyRef.current?.(nextStream);
         }
       );
 
       // Track unsubscribed
       room.on(RoomEvent.TrackUnsubscribed, (track) => {
-        if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
-          const prev = remoteMediaStreamRef.current;
-          if (!prev) return;
+        const mediaTrack = track.mediaStreamTrack;
 
-          const mediaTrack = track.mediaStreamTrack;
-          const remaining = prev.getTracks().filter((t) => t.id !== mediaTrack.id);
-          if (remaining.length === prev.getTracks().length) return; // not present
+        if (track.kind === Track.Kind.Audio) {
+          detachRemoteAudio(mediaTrack.id);
+          return;
+        }
 
-          if (track.kind === Track.Kind.Video && !remaining.some((t) => t.kind === 'video')) {
-            onStreamEndedRef.current?.();
-          }
+        if (track.kind !== Track.Kind.Video) return;
 
-          if (remaining.length === 0) {
-            remoteMediaStreamRef.current = null;
-            setRemoteStream(null);
-          } else {
-            const nextStream = new MediaStream(remaining);
-            remoteMediaStreamRef.current = nextStream;
-            setRemoteStream(nextStream);
-          }
+        const prev = remoteMediaStreamRef.current;
+        if (!prev) return;
+
+        const remaining = prev.getTracks().filter((t) => t.id !== mediaTrack.id);
+        if (remaining.length === prev.getTracks().length) return; // not present
+
+        if (!remaining.some((t) => t.kind === 'video')) {
+          onStreamEndedRef.current?.();
+        }
+
+        if (remaining.length === 0) {
+          remoteMediaStreamRef.current = null;
+          setRemoteStream(null);
+        } else {
+          const nextStream = new MediaStream(remaining);
+          remoteMediaStreamRef.current = nextStream;
+          setRemoteStream(nextStream);
         }
       });
 
@@ -511,7 +687,15 @@ export function useWebRTCViewerSFUAPI({
       setConnectionState('failed');
       setError(err instanceof Error ? err.message : 'Failed to connect');
     }
-  }, [sessionId, participantId, handleDataReceived, collectStats, sendData]);
+  }, [
+    sessionId,
+    participantId,
+    handleDataReceived,
+    collectStats,
+    sendData,
+    attachRemoteAudio,
+    detachRemoteAudio,
+  ]);
 
   // Manual reconnect
   const reconnect = useCallback(() => {
@@ -543,5 +727,6 @@ export function useWebRTCViewerSFUAPI({
     micEnabled,
     hasMic,
     toggleMic,
+    setSpeakerMuted,
   };
 }
diff --git a/apps/desktop/src/renderer/routes/viewer.tsx b/apps/desktop/src/renderer/routes/viewer.tsx
index 88d75538..bff9f59a 100644
--- a/apps/desktop/src/renderer/routes/viewer.tsx
+++ b/apps/desktop/src/renderer/routes/viewer.tsx
@@ -44,6 +44,16 @@ interface ViewerHookResult {
   micEnabled: boolean;
   hasMic: boolean;
   toggleMic: () => void;
+  /**
+   * Mute every remote participant, where the transport plays them back itself.
+   *
+   * The SFU path gives each participant their own audio element so that a third
+   * person in the room is audible at all, which puts their audio outside the
+   * `<video>` element the speaker button used to mute. The P2P path still
+   * carries its single remote track inside `remoteStream`, so it has no need
+   * for this and does not provide it.
+   */
+  setSpeakerMuted?: (muted: boolean) => void;
 }
 
 const PARTICIPANT_REFRESH_DEBOUNCE_MS = 250;
@@ -306,8 +316,16 @@ function ViewerContent({ session, participants, userId, hookResult }: ViewerCont
     micEnabled,
     hasMic,
     toggleMic,
+    setSpeakerMuted: setTransportSpeakerMuted,
   } = hookResult;
 
+  // Reach the per-participant audio elements the SFU transport owns. Muting the
+  // video element alone stopped silencing anybody once remote audio moved out
+  // of it, so the speaker button has to drive both.
+  useEffect(() => {
+    setTransportSpeakerMuted?.(speakerMuted);
+  }, [setTransportSpeakerMuted, speakerMuted]);
+
   // Whether the host allows guests to ask for control at all. Fixed when the
   // session was created, so sessions made before it defaulted on stay off.
   const allowControl = session.settings.allowControl ?? false;
diff --git a/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.test.ts b/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.test.ts
index 939580ef..b305401e 100644
--- a/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.test.ts
+++ b/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.test.ts
@@ -6,10 +6,11 @@ const mockGetAuthenticatedUser = vi.fn();
 const mockAdminCreateClient = vi.fn();
 const livekitMocks = vi.hoisted(() => {
   const sendData = vi.fn();
+  const listParticipants = vi.fn();
   const roomServiceClient = vi.fn(function MockRoomServiceClient() {
-    return { sendData };
+    return { sendData, listParticipants };
   });
-  return { sendData, roomServiceClient };
+  return { sendData, listParticipants, roomServiceClient };
 });
 
 vi.mock('@/lib/supabase/server', () => ({
@@ -47,6 +48,13 @@ describe('PATCH /api/sessions/[sessionId]/participants/[participantId]/control',
     vi.spyOn(console, 'info').mockImplementation(() => {});
     vi.spyOn(console, 'warn').mockImplementation(() => {});
     livekitMocks.sendData.mockResolvedValue(undefined);
+    // A participant row id is not a LiveKit identity: the desktop client joins
+    // as the auth user id, the web client as a generated UUID. The default room
+    // here reflects that — the target is present, under a different name.
+    livekitMocks.listParticipants.mockResolvedValue([
+      { identity: 'host-identity', metadata: JSON.stringify({ userId: 'host-user' }) },
+      { identity: 'lk-viewer-identity', metadata: JSON.stringify({ userId: 'viewer-user' }) },
+    ]);
     process.env.NEXT_PUBLIC_SUPABASE_URL = 'https://example.supabase.co';
     process.env.SUPABASE_SERVICE_ROLE_KEY = 'service-key';
     process.env.NEXT_PUBLIC_LIVEKIT_URL = 'wss://livekit.example.com';
@@ -86,7 +94,12 @@ describe('PATCH /api/sessions/[sessionId]/participants/[participantId]/control',
       is: vi.fn().mockReturnThis(),
       select: vi.fn().mockReturnThis(),
       single: vi.fn().mockResolvedValue({
-        data: { id: 'p-2', control_state: 'granted', display_name: 'Viewer' },
+        data: {
+          id: 'p-2',
+          user_id: 'viewer-user',
+          control_state: 'granted',
+          display_name: 'Viewer',
+        },
         error: null,
       }),
     };
@@ -111,12 +124,77 @@ describe('PATCH /api/sessions/[sessionId]/participants/[participantId]/control',
     expect(livekitMocks.sendData).toHaveBeenCalledTimes(1);
     const firstSendCall = livekitMocks.sendData.mock.calls[0];
     expect(firstSendCall).toBeDefined();
-    const [roomName, , kind, options] = firstSendCall!;
+    const [roomName, encodedPayload, kind, options] = firstSendCall!;
     expect(roomName).toBe('session-session-1');
     expect(kind).toBe(0);
+    // Addressed to the identity that participant actually joined under, not to
+    // their database row id — which matched nobody, in any client, so the
+    // signal was silently dropped by the SFU.
     expect(options).toEqual({
-      destinationIdentities: ['p-2'],
+      destinationIdentities: ['lk-viewer-identity'],
     });
+    // And the payload names the same identity, because the recipient checks a
+    // control message is addressed to it before acting on it.
+    const payload = JSON.parse(new TextDecoder().decode(encodedPayload as Uint8Array)) as {
+      type: string;
+      participantId: string;
+    };
+    expect(payload.type).toBe('control-grant');
+    expect(payload.participantId).toBe('lk-viewer-identity');
+  });
+
+  it('skips the LiveKit signal when the participant is not in the room', async () => {
+    let callCount = 0;
+    const mockFrom = vi.fn().mockReturnValue({
+      select: vi.fn().mockReturnThis(),
+      eq: vi.fn().mockReturnThis(),
+      is: vi.fn().mockReturnThis(),
+      single: vi.fn().mockImplementation(() => {
+        callCount++;
+        if (callCount === 1) {
+          return Promise.resolve({
+            data: {
+              id: 'session-1',
+              host_user_id: 'host-user',
+              current_host_id: 'host-user',
+              mode: 'sfu',
+            },
+            error: null,
+          });
+        }
+        return Promise.resolve({ data: { id: 'participant-self' }, error: null });
+      }),
+    });
+
+    const mockSupabase = createMockSupabaseClient({ from: mockFrom });
+    vi.mocked(createClient).mockResolvedValue(mockSupabase as never);
+    mockGetAuthenticatedUser.mockResolvedValue({ user: mockUser, error: null });
+
+    const adminUpdateChain = {
+      eq: vi.fn().mockReturnThis(),
+      is: vi.fn().mockReturnThis(),
+      select: vi.fn().mockReturnThis(),
+      single: vi.fn().mockResolvedValue({
+        data: {
+          id: 'p-2',
+          user_id: 'absent-user',
+          control_state: 'granted',
+          display_name: 'Viewer',
+        },
+        error: null,
+      }),
+    };
+    mockAdminCreateClient.mockReturnValue({
+      from: vi.fn().mockReturnValue({ update: vi.fn().mockReturnValue(adminUpdateChain) }),
+    });
+
+    const response = await PATCH(createRequest('granted'), createParams('session-1', 'p-2'));
+
+    // The database write is the source of truth and still stands; there is just
+    // nobody connected to signal.
+    expect(response.status).toBe(200);
+    expect(livekitMocks.sendData).not.toHaveBeenCalled();
+    expect(console.warn).toHaveBeenCalled();
   });
 
   it('rejects non-participant non-host', async () => {
@@ -185,7 +263,12 @@ describe('PATCH /api/sessions/[sessionId]/participants/[participantId]/control',
       is: vi.fn().mockReturnThis(),
       select: vi.fn().mockReturnThis(),
       single: vi.fn().mockResolvedValue({
-        data: { id: 'p-2', control_state: 'granted', display_name: 'Viewer' },
+        data: {
+          id: 'p-2',
+          user_id: 'viewer-user',
+          control_state: 'granted',
+          display_name: 'Viewer',
+        },
         error: null,
       }),
     };
diff --git a/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.ts b/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.ts
index b53a5871..78e65df4 100644
--- a/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.ts
+++ b/apps/web/src/app/api/sessions/[sessionId]/participants/[participantId]/control/route.ts
@@ -32,9 +32,49 @@ function normalizeLiveKitServiceUrl(url: string): string {
   return url;
 }
 
+/**
+ * Find the LiveKit identity belonging to a `session_participants` row.
+ *
+ * A participant row id is not a LiveKit identity, and the two have never
+ * matched: the desktop client joins as the auth user id and the web client as a
+ * freshly generated UUID. Addressing a data packet to the row id therefore
+ * reached nobody at all, in either client — the signal below has been silently
+ * dropped since it was written.
+ *
+ * What every client does carry is the `userId` its token embeds in metadata, so
+ * that is what the row is matched against. Identity is still checked directly
+ * first, so a client that ever does join under the row id keeps working.
+ */
+async function resolveLiveKitIdentity(
+  roomService: RoomServiceClient,
+  roomName: string,
+  participantId: string,
+  targetUserId: string | null
+): Promise<string | null> {
+  const participants = await roomService.listParticipants(roomName);
+
+  for (const participant of participants) {
+    if (participant.identity === participantId) return participant.identity;
+  }
+
+  if (targetUserId === null) return null;
+
+  for (const participant of participants) {
+    try {
+      const meta = JSON.parse(participant.metadata || '{}') as { userId?: string | null };
+      if (meta.userId === targetUserId) return participant.identity;
+    } catch {
+      // Metadata is client-supplied; a malformed blob is not a reason to fail.
+    }
+  }
+
+  return null;
+}
+
 async function sendLiveKitControlSignal(
   sessionId: string,
   participantId: string,
+  targetUserId: string | null,
   controlState: ControlSignalState
 ): Promise<void> {
   const livekitUrl = process.env.NEXT_PUBLIC_LIVEKIT_URL;
@@ -56,22 +96,38 @@ async function sendLiveKitControlSignal(
     livekitApiSecret
   );
 
+  const roomName = `session-${sessionId}`;
+  const identity = await resolveLiveKitIdentity(roomService, roomName, participantId, targetUserId);
+
+  if (identity === null) {
+    console.warn('[ControlAPI] LiveKit control signal skipped (participant not in room)', {
+      sessionId,
+      participantId,
+      controlState,
+      roomName,
+    });
+    return;
+  }
+
+  // The recipient checks that a control message is addressed to it before
+  // acting, so this has to name the identity it is delivered to rather than the
+  // database row id.
   const payload = new TextEncoder().encode(
     JSON.stringify({
       type: controlState === 'granted' ? 'control-grant' : 'control-revoke',
-      participantId,
+      participantId: identity,
       timestamp: Date.now(),
     })
   );
 
-  const roomName = `session-${sessionId}`;
   await roomService.sendData(roomName, payload, DataPacket_Kind.RELIABLE, {
-    destinationIdentities: [participantId],
+    destinationIdentities: [identity],
   });
 
   console.info('[ControlAPI] LiveKit control signal sent', {
     sessionId,
     participantId,
+    identity,
     controlState,
     roomName,
   });
@@ -178,7 +234,13 @@ export async function PATCH(request: Request, { params }: RouteParams) {
 
     if ((control_state === 'granted' || control_state === 'view-only') && session.mode === 'sfu') {
       try {
-        await sendLiveKitControlSignal(sessionId, participantId, control_state);
+        // The updated row carries the user the grant is about, which is what
+        // maps this participant onto a LiveKit identity.
+        const targetUserId =
+          typeof (updatedParticipant as { user_id?: unknown } | null)?.user_id === 'string'
+            ? (updatedParticipant as { user_id: string }).user_id
+            : null;
+        await sendLiveKitControlSignal(sessionId, participantId, targetUserId, control_state);
       } catch (signalError) {
         console.error('[ControlAPI] Failed to send LiveKit control signal', {
           sessionId,