@voltkit-rtc/client 0.7.1 → 0.7.2

package/src/index.ts

@@ -349,7 +349,11 @@ export interface ClientEvents extends ChatEvents {
   localStreamChanged: (stream: MediaStream | null) => void;
   /** Media stopped arriving but the connection is intact -- the publisher is reconnecting. */
   streamInterrupted: (e: { reason: string }) => void;
-  /** The session ended and will not recover. Nothing further will be emitted. */
+  /**
+   * The session ended and will not recover. Nothing further will be emitted.
+   * Whatever the reason, the camera, microphone, screen, music and recording
+   * are released with it, as close() does.
+   */
   closed: (reason: ClosedReason) => void;
   /**
    * The account behind this session ran out of minutes or reached a usage
@@ -411,6 +415,8 @@ interface Pending {
   resolve: (v: unknown) => void;
   reject: (e: Error) => void;
   timer: ReturnType<typeof setTimeout>;
+  /** The socket it was sent on: only that socket can answer it. */
+  ws: WebSocket;
 }
 
 const RPC_TIMEOUT_MS = 15_000;
@@ -491,6 +497,16 @@ export class StreamClient {
   /** In-app music being published, kept across reconnects so it can be published again. */
   private music: MusicSource | null = null;
   private musicProducerId: string | null = null;
+  /**
+   * Bumped by every publishMusic() and stopMusic(). A music producer still
+   * being made when it changes belongs to a publish that is over: it is
+   * closed, not kept. publishGeneration alone missed stopMusic(), and the
+   * music went out after stopMusic() had returned.
+   */
+  private musicOperation = 0;
+  // Music publishes run one at a time: the server takes one producer per
+  // source, so the next is produced only once the last one is settled.
+  private musicQueue: Promise<unknown> = Promise.resolve();
   private screenStream: MediaStream | null = null;
   private screenMode: ScreenMode = 'detail';
   private screenAudioEnabled = true;
@@ -507,6 +523,8 @@ export class StreamClient {
   private frameRateWarmupSamples = 2;
   /** What each remote producer carries, so a pause can say "music" rather than just "audio". */
   private readonly remoteSources = new Map<string, TrackSource>();
+  /** Identity of each pending/active subscription; cleared on close/reconnect. */
+  private readonly subscriptions = new Map<string, object>();
   /**
    * The layers asked for each remote video, by producerId. A reconnect
    * consumes everything again, and the new consumer would otherwise start at
@@ -550,6 +568,17 @@ export class StreamClient {
   /** When the token held for reconnects expires (unix ms), and the timer that warns before it does. */
   private tokenExpiry: number | null;
   private tokenTimer: ReturnType<typeof setTimeout> | null = null;
+  /**
+   * Bumped whenever the server hands this client a token (its own refresh, a
+   * promotion's). An updateToken() that started before then keeps the token
+   * it was given only if nothing newer arrived while it waited: its reply,
+   * or its fallback once the socket closed, used to replace a promotion's
+   * token, and the reconnect joined with the old one.
+   */
+  private serverTokenRevision = 0;
+  /** updateToken() calls in call order, and the newest one whose token is held: a later call wins over an earlier one answered after it. */
+  private tokenRequests = 0;
+  private tokenRequestHeld = 0;
   /** Whose each received track is and whether it is switched off, by producerId. */
   private readonly remoteInfo = new Map<string, { identity: string; kind: 'audio' | 'video'; paused: boolean }>();
   /** Videos left unconsumed at the fan-out limit, oldest first; consumed as others end. */
@@ -613,6 +642,18 @@ export class StreamClient {
     this.emit('closed', reason);
   }
 
+  /**
+   * Over for good without the app asking: finish, then release everything
+   * local as close() does -- camera, microphone, screen, music, recording.
+   * kicked and roomClosed always did; a replaced socket, a close without
+   * roomClosed and a reconnect that gave up left them capturing (and the
+   * recording uploading) after `closed`, until the app called close().
+   */
+  private end(reason: ClosedReason): void {
+    this.finish(reason);
+    this.close();
+  }
+
   private stopTimers(): void {
     if (this.tokenTimer) clearTimeout(this.tokenTimer);
     this.tokenTimer = null;
@@ -640,8 +681,13 @@ export class StreamClient {
     const closed = () => lifecycle !== this.lifecycle;
     let result: JoinResult;
     if (this.state === 'idle' || this.state === 'closed') this.setState('connecting');
+    // The socket this call opens. A later connect() replaces it, and this
+    // call's failure must then leave the newer socket, and the state, alone.
+    let socket: WebSocket | null = null;
     try {
-      await this.openSocket();
+      const opening = this.openSocket();
+      socket = this.ws;
+      await opening;
       result = (await this.rpc('join', { token: this.token })) as JoinResult;
       this.joinResult = result;
 
@@ -654,7 +700,8 @@ export class StreamClient {
       // A session that never got going: the app has the error. Left open,
       // the socket would be closed by the server's join deadline instead, and
       // that close would start reconnecting a session that never began.
-      if (!this.joinedOnce) {
+      const superseded = this.ws !== null && this.ws !== socket;
+      if (!this.joinedOnce && !superseded) {
         this.detachSocket();
         if (this.state === 'connecting') this.setState('idle');
       }
@@ -756,17 +803,16 @@ export class StreamClient {
           // Another session for this identity is live. Reconnecting would
           // displace it, and it would displace us right back, forever.
           this.emit('error', new RpcError('replaced', 'this identity connected from somewhere else'));
-          // The producers outlive this close until the app calls close(); the
-          // videoLimited sampling must not, or it reports after `closed`.
+          // The videoLimited sampling stops first, or it reports after `closed`.
           this.limitWatch.reset();
-          this.finish('replaced');
+          this.end('replaced');
           return;
         }
         if (ev.code === CLOSE_ENDED) {
           // Normally roomClosed has already ended the session; this covers a
           // close that arrived without it.
           this.limitWatch.reset();
-          this.finish('room-closed');
+          this.end('room-closed');
           return;
         }
         // Before a first successful join the app is still waiting on
@@ -779,16 +825,21 @@ export class StreamClient {
     });
   }
 
-  private detachSocket(reason = 'superseded'): void {
+  private detachSocket(reason = 'superseded', why = 'the connection was replaced'): void {
     const ws = this.ws;
     this.ws = null;
-    if (ws && ws.readyState <= WebSocket.OPEN) {
+    if (!ws) return;
+    if (ws.readyState <= WebSocket.OPEN) {
       try {
         ws.close(1000, reason);
       } catch {
         /* already closing */
       }
     }
+    // Its replies are no longer read, so what waits on it would only wait out
+    // its 15 s timeout: it fails now, as on a close. Never replayed -- the
+    // server may already have acted on it.
+    this.failPending(ws, new RpcError('not-connected', why));
   }
 
   /**
@@ -798,7 +849,7 @@ export class StreamClient {
    * still sending.
    */
   private releaseSocket(): void {
-    this.detachSocket('gave up');
+    this.detachSocket('gave up', 'the session has ended');
     this.failAllPending(new RpcError('not-connected', 'the session has ended'));
   }
 
@@ -819,7 +870,7 @@ export class StreamClient {
         if (this.reconnectAttempt > MAX_RECONNECT_ATTEMPTS) {
           this.emit('error', new RpcError('reconnect-gave-up', `gave up after ${MAX_RECONNECT_ATTEMPTS} reconnect attempts`));
           this.releaseSocket();
-          this.finish('gave-up');
+          this.end('gave-up');
           return;
         }
         const backoff = Math.min(500 * 2 ** (this.reconnectAttempt - 1), 15_000);
@@ -843,7 +894,7 @@ export class StreamClient {
           // attempt forever and drowns out whatever actually went wrong.
           if (err instanceof RpcError && isTerminalError(err.code)) {
             this.releaseSocket();
-            this.finish('gave-up');
+            this.end('gave-up');
             return;
           }
         }
@@ -888,6 +939,7 @@ export class StreamClient {
   }
 
   private teardownMedia(): void {
+    this.subscriptions.clear();
     for (const c of this.consumers.values()) c.close();
     this.consumers.clear();
     this.remoteInfo.clear();
@@ -962,17 +1014,27 @@ export class StreamClient {
    * `tokenExpiring`. On a live connection the server checks it like a join
    * token (`bad-token`, or `token-mismatch` for another room or identity; the
    * session then keeps its token); otherwise it is kept for the next join,
-   * which checks it there. Resolves to when it expires (unix ms), when known.
+   * which checks it there. Resolves to when the token now held expires (unix
+   * ms), when known. A newer token that arrives while this waits is kept
+   * instead of this one: the server's (its own refresh, or a promotion's,
+   * which carries the new role) or a later updateToken()'s.
    */
   async updateToken(token: string): Promise<{ expiresAt: number | null }> {
     if (typeof token !== 'string' || token.trim() === '') throw new TypeError('updateToken needs a token');
     if (this.state === 'closed') throw new RpcError('not-connected', 'this session is closed; create a new client');
+    const request = ++this.tokenRequests;
+    const revision = this.serverTokenRevision;
+    const keep = (expiresAt: number | null) => {
+      if (revision === this.serverTokenRevision && request > this.tokenRequestHeld) {
+        this.tokenRequestHeld = request;
+        this.setToken(token, expiresAt);
+      }
+      return { expiresAt: this.tokenExpiry };
+    };
     if (this.state === 'connected' && this.ws?.readyState === WebSocket.OPEN) {
       try {
         const res = (await this.rpc('refreshToken', { token })) as { expiresAt?: unknown } | undefined;
-        const at = typeof res?.expiresAt === 'number' && res.expiresAt > 0 ? res.expiresAt * 1000 : null;
-        this.setToken(token, at);
-        return { expiresAt: this.tokenExpiry };
+        return keep(typeof res?.expiresAt === 'number' && res.expiresAt > 0 ? res.expiresAt * 1000 : null);
       } catch (err) {
         // An older server has no refreshToken, and a socket that dropped
         // during the call is reconnecting: either way keep the token for the
@@ -980,8 +1042,7 @@ export class StreamClient {
         if (!(err instanceof RpcError) || (err.code !== 'unknown-method' && err.code !== 'not-connected')) throw err;
       }
     }
-    this.setToken(token, null);
-    return { expiresAt: this.tokenExpiry };
+    return keep(null);
   }
 
   /** The token reconnects use from now on, with its expiry (read from the token when not given). */
@@ -1045,11 +1106,21 @@ export class StreamClient {
         this.pending.delete(id);
         reject(new RpcError('timeout', `${method} timed out`));
       }, RPC_TIMEOUT_MS);
-      this.pending.set(id, { resolve, reject, timer });
+      this.pending.set(id, { resolve, reject, timer, ws: this.ws });
       this.ws.send(JSON.stringify({ id, method, params }));
     });
   }
 
+  /** Fail what was sent on `ws` and is still waiting. */
+  private failPending(ws: WebSocket, err: Error): void {
+    for (const [id, p] of this.pending) {
+      if (p.ws !== ws) continue;
+      clearTimeout(p.timer);
+      this.pending.delete(id);
+      p.reject(err);
+    }
+  }
+
   private failAllPending(err: Error): void {
     for (const p of this.pending.values()) {
       clearTimeout(p.timer);
@@ -1093,21 +1164,20 @@ export class StreamClient {
         break;
       case 'producerClosed': {
         const { producerId, identity } = data as { producerId: string; identity: string };
+        this.subscriptions.delete(producerId);
         this.preferredLayers.delete(producerId);
         this.receiveQualities.delete(producerId);
         this.remoteVideoLayers.delete(producerId);
         this.skippedVideos.delete(producerId);
         const consumer = this.consumers.get(producerId);
-        if (!consumer) break; // never consumed it, or already cleaned up
-        this.videoSlots.delete(producerId);
-        consumer.close();
+        consumer?.close();
         this.consumers.delete(producerId);
         this.remoteSources.delete(producerId);
         this.remoteInfo.delete(producerId);
-        this.emit('trackEnded', { producerId, identity });
+        if (consumer) this.emit('trackEnded', { producerId, identity });
         // A video slot opened under the fan-out limit: the oldest video left
         // waiting takes it.
-        if (consumer.kind === 'video') void this.consumeSkipped().catch((err) => this.emit('error', err as Error));
+        this.releaseVideoSlot(producerId);
         break;
       }
       case 'producerPaused': {
@@ -1203,13 +1273,19 @@ export class StreamClient {
         // fresh one periodically so a reconnect at any point still works --
         // without this, any disconnect after the token's lifetime is terminal.
         const e = data as { token?: string; role?: Role; expiresAt?: number };
-        if (e.token) this.setToken(e.token, typeof e.expiresAt === 'number' && e.expiresAt > 0 ? e.expiresAt * 1000 : null);
+        if (e.token) {
+          this.serverTokenRevision += 1;
+          this.setToken(e.token, typeof e.expiresAt === 'number' && e.expiresAt > 0 ? e.expiresAt * 1000 : null);
+        }
         break;
       }
       case 'mustReconnect': {
         const e = data as { reason: string; token?: string; retry: boolean };
         // A promotion hands us a fresh token carrying the new role.
-        if (e.token) this.setToken(e.token, null);
+        if (e.token) {
+          this.serverTokenRevision += 1;
+          this.setToken(e.token, null);
+        }
         this.emit('mustReconnect', e);
         if (e.retry) {
           this.teardownMedia();
@@ -1972,7 +2048,11 @@ export class StreamClient {
       if (this.screenStream === screen) await this.stopScreen('stopped');
       this.emit('error', err as Error);
     });
-    if (this.music) await this.produceMusic(this.music, generation).catch((err) => this.emit('error', err as Error));
+    if (this.music) {
+      const music = this.music;
+      const operation = this.musicOperation;
+      await this.musicTask(() => this.produceMusic(music, generation, operation)).catch((err) => this.emit('error', err as Error));
+    }
     if (generation !== this.publishGeneration) return;
 
     let stream = this.localStream;
@@ -2183,26 +2263,41 @@ export class StreamClient {
   async publishMusic(input: MusicInput, options?: MusicOptions): Promise<void> {
     if (!this.mediaPermissions.audio) throw new RpcError('media-disabled', 'audio is switched off for this project');
     const generation = this.publishGeneration;
-    if (this.music) await this.stopMusic();
-    const music = new MusicSource(input, options);
-    try {
-      await this.produceMusic(music, generation);
-      // Checked again here: an unpublish() after the producer was kept has
-      // already closed it, and the music must not be remembered for a
-      // reconnect to publish again.
-      if (generation !== this.publishGeneration) throw unpublishedWhile('music');
-    } catch (err) {
-      music.close();
-      throw err;
-    }
-    this.music = music;
-    this.wasPublishing = true;
-    this.emitLocalMedia();
+    // Taken now, in call order: a music publish still under way is over, and
+    // a stopMusic() from here on ends this one.
+    const operation = ++this.musicOperation;
+    await this.musicTask(async () => {
+      if (generation !== this.publishGeneration || operation !== this.musicOperation) throw unpublishedWhile('music');
+      if (this.music) await this.closeMusic();
+      const music = new MusicSource(input, options);
+      try {
+        await this.produceMusic(music, generation, operation);
+        // Checked again here: an unpublish() or stopMusic() after the
+        // producer was kept has already closed it, and the music must not be
+        // remembered for a reconnect to publish again.
+        if (generation !== this.publishGeneration || operation !== this.musicOperation) throw unpublishedWhile('music');
+      } catch (err) {
+        music.close();
+        throw err;
+      }
+      this.music = music;
+      this.wasPublishing = true;
+      this.emitLocalMedia();
+    });
+  }
+
+  private musicTask<T>(task: () => Promise<T>): Promise<T> {
+    const run = this.musicQueue.then(task, task);
+    this.musicQueue = run.catch(() => undefined);
+    return run;
   }
 
-  private async produceMusic(music: MusicSource, generation: number): Promise<void> {
+  private async produceMusic(music: MusicSource, generation: number, operation: number): Promise<void> {
+    // unpublish(), stopMusic() or a newer publishMusic() can run at any wait
+    // below, and wins.
+    const current = () => generation === this.publishGeneration && operation === this.musicOperation;
     const transport = await this.ensureSendTransport();
-    if (generation !== this.publishGeneration) throw unpublishedWhile('music');
+    if (!current()) throw unpublishedWhile('music');
     const producer = await transport.produce({
       track: music.track,
       stopTracks: false,
@@ -2211,7 +2306,14 @@ export class StreamClient {
       codecOptions: { opusStereo: true, opusDtx: false, opusFec: true, opusMaxAverageBitrate: 128_000 },
       appData: { source: 'music' },
     });
-    await this.keepProducer(producer, generation, 'music');
+    if (!current()) {
+      producer.close();
+      await this.rpc('closeProducer', { producerId: producer.id }).catch(() => undefined);
+      throw unpublishedWhile('music');
+    }
+    // Kept and named the music in one step, with no wait between: stopMusic()
+    // finds the music producer by that name.
+    this.producers.set(producer.id, producer);
     this.musicProducerId = producer.id;
     // Music switched off before a reconnect comes back paused here.
     await this.pauseOnServer(producer);
@@ -2242,8 +2344,18 @@ export class StreamClient {
     this.emitLocalMedia();
   }
 
-  /** Stop publishing music. The element or stream it came from is left as it was. */
+  /**
+   * Stop publishing music. The element or stream it came from is left as it
+   * was. A publishMusic() still under way is stopped too: it rejects with
+   * `unpublished` and publishes nothing.
+   */
   async stopMusic(): Promise<void> {
+    this.musicOperation += 1;
+    await this.closeMusic();
+  }
+
+  /** Close the music being published, here and at the server. */
+  private async closeMusic(): Promise<void> {
     const id = this.musicProducerId;
     this.musicProducerId = null;
     this.music?.close();
@@ -2265,8 +2377,9 @@ export class StreamClient {
   }
 
   private async consume(remote: RemoteProducer): Promise<void> {
+    if (this.closedByUs) return;
     if (!this.device) throw new RpcError('not-connected', 'not connected');
-    if (this.consumers.has(remote.producerId)) return;
+    if (this.subscriptions.has(remote.producerId)) return;
     // Your own camera is already local; pulling it back off the SFU wastes a
     // consumer and shows you a delayed copy of yourself.
     if (remote.identity === this.joinResult?.identity) return;
@@ -2285,34 +2398,67 @@ export class StreamClient {
       }
       this.videoSlots.add(remote.producerId);
     }
+    const operation = {};
+    this.subscriptions.set(remote.producerId, operation);
     try {
-      await this.consumeNow(remote);
+      await this.consumeNow(remote, operation);
     } catch (err) {
-      if (!this.consumers.has(remote.producerId)) this.videoSlots.delete(remote.producerId);
+      // A closed producer or replaced session has already released its slot.
+      // Its late failure must neither release a newer slot nor report a ghost error.
+      if (this.subscriptions.get(remote.producerId) !== operation) return;
+      this.subscriptions.delete(remote.producerId);
+      this.consumers.get(remote.producerId)?.close();
+      this.consumers.delete(remote.producerId);
+      this.remoteVideoLayers.delete(remote.producerId);
+      this.remoteSources.delete(remote.producerId);
+      this.remoteInfo.delete(remote.producerId);
+      this.releaseVideoSlot(remote.producerId);
       throw err;
     }
   }
 
+  /**
+   * Free a video slot, and let the oldest video waiting take it -- whatever
+   * freed it: an ended video, or a subscription that failed. Not while
+   * reconnecting: a failure caused by the socket dropping would otherwise
+   * start every waiting video on a dead connection, each failing with
+   * not-connected; the reconnect's join lists them all again anyway.
+   */
+  private releaseVideoSlot(producerId: string): void {
+    if (this.videoSlots.delete(producerId) && !this.closedByUs && this.state !== 'reconnecting') this.consumeSkipped();
+  }
+
   /** The oldest videos left waiting at the fan-out limit take the slots that opened. */
-  private async consumeSkipped(): Promise<void> {
+  private consumeSkipped(): void {
     for (const [producerId, remote] of this.skippedVideos) {
       const limit = this.mediaPermissions.maxVideoSubscriptions;
       if (limit !== null && this.videoSlots.size >= limit) return;
       this.skippedVideos.delete(producerId);
-      await this.consume(remote);
+      // consume reserves synchronously, before its first await. Consecutive
+      // releases cannot admit the same producer or exceed the limit.
+      void this.consume(remote).catch((err) => this.emit('error', err as Error));
     }
   }
 
-  private async consumeNow(remote: RemoteProducer): Promise<void> {
+  private async consumeNow(remote: RemoteProducer, operation: object): Promise<void> {
     if (!this.device) throw new RpcError('not-connected', 'not connected');
+    const device = this.device;
+    const current = (made?: Consumer) => {
+      if (!this.closedByUs && this.subscriptions.get(remote.producerId) === operation) return;
+      made?.close();
+      throw new RpcError('not-connected', 'subscription ended during setup');
+    };
     const transport = await this.ensureRecvTransport();
+    current();
     const params = (await this.rpc('consume', {
       transportId: transport.id,
       producerId: remote.producerId,
-      rtpCapabilities: this.device.rtpCapabilities,
+      rtpCapabilities: device.rtpCapabilities,
     })) as { id: string; producerId: string; kind: 'audio' | 'video'; rtpParameters: never };
 
+    current();
     const consumer = await transport.consume(params);
+    current(consumer);
     this.consumers.set(remote.producerId, consumer);
     this.remoteVideoLayers.set(remote.producerId, remote.videoLayers ?? remote.appData?.videoLayers ?? (params as { videoLayers?: VideoLayer[] }).videoLayers ?? []);
 
@@ -2328,10 +2474,12 @@ export class StreamClient {
     if (layers) {
       await this.rpc('setPreferredLayers', { consumerId: consumer.id, ...layers }).catch((err) => this.emit('error', err as Error));
     }
+    current(consumer);
 
     // The server created it paused. Resume only now that our end exists,
     // otherwise the first frames arrive before there is anything to decode them.
     await this.rpc('resumeConsumer', { consumerId: consumer.id });
+    current(consumer);
 
     const kind = consumer.kind as 'audio' | 'video';
     const source = remote.source ?? defaultSource(kind);