mediasfu-shared 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediasfu-shared",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "mediasfu-shared – framework-agnostic WebRTC runtime for MediaSFU. Room helpers, mediasoup signaling, socket management, media state, and TypeScript types for React, Vue, Angular, Svelte, and plain TS.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/consumers/connectIps.ts

@@ -50,10 +50,22 @@ const normalizeConsumeEndpoint = (ip: string): string =>
 const hasConsumeEndpoint = (
   consumeSockets: ConsumeSocket[],
   endpoint: string
-): boolean => consumeSockets.some((socketObj) => {
-  const ip = Object.keys(socketObj)[0];
-  return Boolean(ip) && normalizeConsumeEndpoint(ip) === endpoint;
-});
+): boolean => {
+  for (let index = consumeSockets.length - 1; index >= 0; index -= 1) {
+    const socketObj = consumeSockets[index];
+    const ip = Object.keys(socketObj)[0];
+    if (!ip || normalizeConsumeEndpoint(ip) !== endpoint) continue;
+
+    const socket = socketObj[ip];
+    if (socket?.connected && socket.id) return true;
+
+    socket?.removeAllListeners?.();
+    socket?.disconnect?.();
+    consumeSockets.splice(index, 1);
+  }
+
+  return false;
+};
 
 async function reserveConsumeEndpoint(
   consumeSockets: ConsumeSocket[],
@@ -87,6 +99,9 @@ async function reserveConsumeEndpoint(
     return (didConnect = false) => {
       if (pendingForSockets?.get(endpoint) === reservation) {
         pendingForSockets.delete(endpoint);
+        if (pendingForSockets.size === 0) {
+          pendingConsumeConnections.delete(reservationOwner);
+        }
       }
       resolvePending(didConnect === true);
     };
@@ -170,9 +185,10 @@ export const connectIps = async ({
       if (!releaseReservation) continue;
 
       let connected = false;
+      let remote_sock: Awaited<ReturnType<typeof connectSocket>> | null = null;
       try {
         // Connect to the remote socket using socket.io-client
-        const remote_sock = await connectSocket({ apiUserName, apiKey, apiToken, link: `https://${ip}.mediasfu.com` });
+        remote_sock = await connectSocket({ apiUserName, apiKey, apiToken, link: `https://${ip}.mediasfu.com` });
 
         if (remote_sock.id) {
           // Check if the IP is in the roomRecvIPs, if not, add it
@@ -187,7 +203,7 @@ export const connectIps = async ({
               await newProducerMethod({
                 producerId,
                 islevel,
-                nsock: remote_sock,
+                nsock: remote_sock!,
                 parameters,
                 isTranslation,
                 translationMeta,
@@ -211,7 +227,7 @@ export const connectIps = async ({
               parameters,
             });
             if (!data.rtpCapabilities) {
-              return [consume_sockets, roomRecvIPs];
+              throw new Error(`Consume room ${ip} did not return RTP capabilities.`);
             }
           }
 
@@ -219,11 +235,34 @@ export const connectIps = async ({
           consume_sockets.push({ [ip]: remote_sock });
           updateConsume_sockets(consume_sockets);
           connected = true;
+
+          remote_sock.on("disconnect", () => {
+            const socketIndex = consume_sockets.findIndex(
+              (socketObj) => socketObj[ip] === remote_sock
+            );
+            if (socketIndex >= 0) {
+              consume_sockets.splice(socketIndex, 1);
+              updateConsume_sockets(consume_sockets);
+            }
+
+            const recvIndex = roomRecvIPs.indexOf(ip);
+            if (recvIndex >= 0) {
+              roomRecvIPs.splice(recvIndex, 1);
+              updateRoomRecvIPs(roomRecvIPs);
+            }
+
+            remote_sock?.removeAllListeners?.();
+            remote_sock?.disconnect();
+          });
         }
       } catch (error) {
         // Handle the error
         console.log("connectIps error", error);
       } finally {
+        if (!connected && remote_sock) {
+          remote_sock.removeAllListeners?.();
+          remote_sock.disconnect();
+        }
         releaseReservation(connected);
       }
     }

package/src/methods/utils/headless/virtualBackground.ts

@@ -3,7 +3,10 @@ import { HeadlessOptions } from './headlessTypes';
 import { getCurrentParams } from './getCurrentParams';
 import { getLocalVideoStream } from './getMediaStreams';
 import { HeadlessActionResult } from './roomActions';
-import { compositeVirtualBackgroundFrame } from '../virtualBackgroundCompositor';
+import {
+  compositeVirtualBackgroundFrame,
+  DEFAULT_BACKGROUND_BLUR_PIXELS,
+} from '../virtualBackgroundCompositor';
 
 const MEDIAPIPE_CDN = 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation';
 
@@ -57,6 +60,11 @@ export interface ApplyVirtualBackgroundOptions extends HeadlessOptions {
    * A trailing slash is added if missing.
    */
   assetPath?: string;
+  /**
+   * Blur the area behind the segmented person by this many pixels. When this
+   * is greater than zero it takes precedence over `image`. Defaults to 0.
+   */
+  blurPixels?: number;
 }
 
 export type ApplyVirtualBackgroundType = (
@@ -98,6 +106,7 @@ export async function applyVirtualBackground({
   modelSelection = 1,
   publish = true,
   assetPath = MEDIAPIPE_CDN,
+  blurPixels = 0,
 }: ApplyVirtualBackgroundOptions): Promise<HeadlessActionResult & { stream: MediaStream | null }> {
   const live = getCurrentParams({ parameters });
   if (live.audioOnlyRoom) {
@@ -124,7 +133,10 @@ export async function applyVirtualBackground({
     const width = Number(settings.width) || 640;
     const height = Number(settings.height) || 360;
 
-    const backgroundImage = typeof image === 'string' ? await loadImage(image) : image;
+    const resolvedBlurPixels = Math.max(0, Number(blurPixels) || 0);
+    const backgroundImage = resolvedBlurPixels > 0
+      ? null
+      : (typeof image === 'string' ? await loadImage(image) : image);
     const producer = publish ? (live.videoProducer || live.localVideoProducer) : null;
 
     // mediasoup Producers normally own their track (`stopTracks: true`). Their
@@ -169,6 +181,7 @@ export async function applyVirtualBackground({
           backgroundImage: backgroundImage as CanvasImageSource | null,
           width: canvas.width,
           height: canvas.height,
+          blurFallbackPixels: resolvedBlurPixels,
         });
       } catch {
         // A dropped frame must never kill the loop.
@@ -236,6 +249,25 @@ export async function applyVirtualBackground({
   }
 }
 
+export interface ApplyBackgroundBlurOptions extends Omit<ApplyVirtualBackgroundOptions, 'image'> {
+  /** Blur strength in CSS pixels. Defaults to 16. */
+  blurPixels?: number;
+}
+
+/** Apply person-aware background blur through the standard processed-track lifecycle. */
+export function applyBackgroundBlur({
+  blurPixels = DEFAULT_BACKGROUND_BLUR_PIXELS,
+  ...options
+}: ApplyBackgroundBlurOptions): ReturnType<ApplyVirtualBackgroundType> {
+  return applyVirtualBackground({
+    ...options,
+    image: null,
+    blurPixels,
+  });
+}
+
+export type ApplyBackgroundBlurType = typeof applyBackgroundBlur;
+
 export type ClearVirtualBackgroundType = (
   options: HeadlessOptions
 ) => Promise<HeadlessActionResult>;

package/src/methods/utils/virtualBackgroundCompositor.ts

@@ -10,6 +10,14 @@ export interface CompositeVirtualBackgroundFrameOptions {
   blurFallbackPixels?: number;
 }
 
+/** Stable room-state value used by every web UI surface for background blur. */
+export const VIRTUAL_BACKGROUND_BLUR = 'blur';
+export const DEFAULT_BACKGROUND_BLUR_PIXELS = 16;
+
+export function isVirtualBackgroundBlur(value: unknown): boolean {
+  return value === VIRTUAL_BACKGROUND_BLUR;
+}
+
 /**
  * Paint the segmented person over a replacement background.
  *
@@ -43,7 +51,16 @@ export function compositeVirtualBackgroundFrame({
       ctx.fillRect(0, 0, width, height);
     } else if (blurFallbackPixels > 0) {
       ctx.filter = `blur(${blurFallbackPixels}px)`;
-      ctx.drawImage(sourceImage, 0, 0, width, height);
+      // Draw beyond the visible bounds so the blur kernel does not expose a
+      // transparent/black fringe around the processed frame.
+      const bleed = Math.max(2, blurFallbackPixels * 2);
+      ctx.drawImage(
+        sourceImage,
+        -bleed,
+        -bleed,
+        width + bleed * 2,
+        height + bleed * 2,
+      );
     }
   } finally {
     ctx.filter = previousFilter || 'none';

package/src/sockets/SocketManager.ts

@@ -80,6 +80,9 @@ export type ConnectLocalSocketType = (options: ConnectLocalSocketOptions) => Pro
  * ```
  */
 
+/** How long to wait for `connection-success` before giving up. */
+const CONNECT_TIMEOUT_MS = 12000;
+
 async function connectSocket(
   { apiUserName, apiKey, apiToken, link }: ConnectSocketOptions,
 ): Promise<Socket> {
@@ -132,8 +135,24 @@ async function connectSocket(
       });
     }
 
-    // Handle socket connection events
-    socket.on('connection-success', ({ socketId }: { socketId: string }) => {
+    // Dispose failed handshakes immediately. Otherwise Socket.IO continues
+    // reconnecting a client that was never handed to the room lifecycle.
+    let settled = false;
+    let timeoutHandle: ReturnType<typeof setTimeout> | undefined;
+    const cleanupHandshake = () => {
+      if (timeoutHandle) clearTimeout(timeoutHandle);
+      socket.off('connection-success', handleConnectionSuccess);
+      socket.off('connect_error', handleConnectError);
+      socket.off('disconnect', handleDisconnectBeforeReady);
+    };
+    const settle = (action: () => void) => {
+      if (settled) return;
+      settled = true;
+      cleanupHandshake();
+      action();
+    };
+
+    const handleConnectionSuccess = ({ socketId }: { socketId: string }) => {
       //check if link contains mediasfu.com and contains more than one c
       let conn = 'media';
       try {
@@ -145,12 +164,40 @@ async function connectSocket(
       }
 
       console.log(`Connected to ${conn} socket with ID: ${socketId}`);
-      resolve(socket);
-    });
+      settle(() => resolve(socket));
+    };
 
-    socket.on('connect_error', (error: Error) => {
-      reject(new Error('Error connecting to media socket: ' + error.message));
-    });
+    const handleConnectError = (error: Error) => {
+      settle(() => {
+        socket.disconnect();
+        reject(new Error('Error connecting to media socket: ' + error.message));
+      });
+    };
+
+    const handleDisconnectBeforeReady = (reason: string) => {
+      settle(() =>
+        reject(
+          new Error(
+            'Media socket closed before the room was ready (' + reason + ').'
+          )
+        )
+      );
+    };
+
+    socket.on('connection-success', handleConnectionSuccess);
+    socket.on('connect_error', handleConnectError);
+    socket.on('disconnect', handleDisconnectBeforeReady);
+
+    timeoutHandle = setTimeout(() => {
+      settle(() => {
+        try {
+          socket.disconnect();
+        } catch {
+          // Nothing useful to do here.
+        }
+        reject(new Error('Timed out connecting to media socket.'));
+      });
+    }, CONNECT_TIMEOUT_MS);
   });
 }