mediasfu-shared 1.0.6 → 1.2.0

package/src/consumers/socketReceiveMethods/joinConsumeRoom.ts

@@ -1,5 +1,5 @@
 import { joinConRoom } from '../../producers/producerEmits/joinConRoom';
-import type { Device, RtpCapabilities } from 'mediasoup-client/lib/types';
+import type { Device, RtpCapabilities } from 'mediasoup-client/types';
 import { Socket } from 'socket.io-client';
 import { ReceiveAllPipedTransportsParameters, ReceiveAllPipedTransportsType, CreateDeviceClientType } from '../../types/types';
 

package/src/consumers/socketReceiveMethods/newPipeProducer.ts

@@ -1,7 +1,7 @@
 import { Socket } from 'socket.io-client';
 import { signalNewConsumerTransport } from '../signalNewConsumerTransport';
 import { ReorderStreamsParameters, ReorderStreamsType, SignalNewConsumerTransportParameters, ConnectRecvTransportParameters, ConnectRecvTransportType, ShowAlert } from '../../types/types';
-import type { Device } from 'mediasoup-client/lib/types';
+import type { Device } from 'mediasoup-client/types';
 
 export interface TranslationMeta {
   speakerId: string;

package/src/consumers/streamSuccessAudio.ts

@@ -1,7 +1,7 @@
  
 
 import { Socket } from "socket.io-client";
-import type { ProducerOptions } from 'mediasoup-client/lib/types';
+import type { ProducerOptions } from 'mediasoup-client/types';
 import { Participant, PrepopulateUserMediaParameters, ShowAlert, CreateSendTransportParameters, ConnectSendTransportAudioParameters, ResumeSendTransportAudioParameters, PrepopulateUserMediaType, CreateSendTransportType, ConnectSendTransportAudioType, ResumeSendTransportAudioType } from "../types/types";
 export interface StreamSuccessAudioParameters extends CreateSendTransportParameters, ConnectSendTransportAudioParameters, ResumeSendTransportAudioParameters, PrepopulateUserMediaParameters {
   socket: Socket;
@@ -294,4 +294,3 @@ export const streamSuccessAudio = async ({
     }
   }
 };
-

package/src/consumers/streamSuccessAudioSwitch.ts

@@ -1,6 +1,6 @@
 
 
-import type { Producer, ProducerCodecOptions, ProducerOptions } from 'mediasoup-client/lib/types';
+import type { Producer, ProducerCodecOptions, ProducerOptions } from 'mediasoup-client/types';
 import { Socket } from "socket.io-client";
 import { PrepopulateUserMediaParameters, PrepopulateUserMediaType, CreateSendTransportParameters, CreateSendTransportType, ConnectSendTransportAudioParameters, ConnectSendTransportAudioType, SleepType } from "../types/types";
 
@@ -312,4 +312,3 @@ export const streamSuccessAudioSwitch = async ({
     }
   }
 };
-

package/src/consumers/streamSuccessVideo.ts

@@ -1,4 +1,4 @@
-import type { Device, Producer, ProducerOptions, RtpCodecCapability } from 'mediasoup-client/lib/types';
+import type { Device, Producer, ProducerOptions, RtpCodecCapability } from 'mediasoup-client/types';
 import { Socket } from "socket.io-client";
 import { ConnectSendTransportVideoParameters, Participant, ShowAlert, CreateSendTransportParameters, ReorderStreamsParameters, SleepType, CreateSendTransportType, ConnectSendTransportVideoType, ReorderStreamsType, HParamsType, VParamsType } from "../types/types";
 
@@ -31,6 +31,7 @@ export interface StreamSuccessVideoParameters extends CreateSendTransportParamet
   appliedBackground: boolean;
   videoProducer: Producer | null;
   removeSingleVideoEncoding?: boolean;
+  useNativeCodecSelection?: boolean;
 
   // Update functions
   updateTransportCreatedVideo: (created: boolean) => void;
@@ -68,6 +69,30 @@ export interface StreamSuccessVideoOptions {
 // Export the type definition for the function
 export type StreamSuccessVideoType = (options: StreamSuccessVideoOptions) => Promise<void>;
 
+const auxiliaryVideoCodecs = new Set([
+  'video/rtx',
+  'video/red',
+  'video/ulpfec',
+  'video/flexfec-03',
+]);
+
+export function selectVideoProducerCodec({
+  device,
+  useNativeCodecSelection = false,
+}: {
+  device: Pick<Device, 'rtpCapabilities'> | null;
+  useNativeCodecSelection?: boolean;
+}): RtpCodecCapability | undefined {
+  if (useNativeCodecSelection) return undefined;
+
+  return device?.rtpCapabilities?.codecs?.find((codec: RtpCodecCapability) => {
+    const mimeType = codec.mimeType.toLowerCase();
+    return codec.kind === 'video' &&
+      mimeType !== 'video/vp9' &&
+      !auxiliaryVideoCodecs.has(mimeType);
+  });
+}
+
 
 /**
  * Handles the successful streaming of video by managing the local stream, updating parameters, and handling video transport.
@@ -272,9 +297,14 @@ export const streamSuccessVideo = async ({
         videoParamse = { ...params };
       }
 
-      let codec = device?.rtpCapabilities?.codecs?.filter(
-        (codec: RtpCodecCapability) => codec.mimeType.toLowerCase() !== "video/vp9" && codec.kind === "video"
-      ) || [];
+      const useNativeCodecSelection =
+        parameters.useNativeCodecSelection ??
+        parameters.removeSingleVideoEncoding ??
+        false;
+      const codec = selectVideoProducerCodec({
+        device,
+        useNativeCodecSelection,
+      });
 
       if (parameters.removeSingleVideoEncoding && videoParamse.encodings && videoParamse.encodings.length <= 1) {
         delete videoParamse.encodings;
@@ -283,7 +313,7 @@ export const streamSuccessVideo = async ({
       videoParams = {
         track: localStream.getVideoTracks()[0],
         ...videoParamse,
-        codec: codec[0],
+        ...(codec ? { codec } : {}),
       };
       updateVideoParams(videoParams);
 
@@ -375,4 +405,3 @@ export const streamSuccessVideo = async ({
     } catch { /* Handle error */}
   }
 };
-

package/src/index.native.ts

@@ -1,3 +1,4 @@
+export * from './types/types';
 export * from './consumers/autoAdjust';
 export * from './consumers/calculateRowsAndColumns';
 export * from './consumers/changeVids';
@@ -217,4 +218,26 @@ export * from './producers/producerEmits/joinRoom';
 
 export * from './sockets/SocketManager';
 
-export * from './methods/stream/clickVideo';
+export * from './methods/stream/clickVideo';
+
+// Native headless exports deliberately omit virtualBackground because native
+// runtimes do not provide the browser canvas-backed captureStream() pipeline.
+export * from './methods/utils/headless/headlessTypes';
+export * from './methods/utils/headless/getRoomReadiness';
+export * from './methods/utils/headless/getMediaStreams';
+export * from './methods/utils/headless/getCurrentParams';
+export * from './methods/utils/headless/roomActions';
+export * from './methods/utils/headless/participantState';
+export * from './methods/utils/headless/mediaPermissions';
+export * from './methods/utils/headless/moderation';
+export * from './methods/utils/headless/sessionFeatures';
+export * from './methods/utils/headless/sessionExtras';
+export * from './methods/utils/headless/sessionControls';
+// WHEP works through a compatible native WebRTC implementation. HLS requires a
+// platform player and reports a clear unsupported error when none is supplied.
+export * from './methods/utils/headless/playback';
+export * from './methods/utils/headless/viewerSession';
+export * from './methods/utils/headless/mediaProduction';
+export * from './methods/utils/getParticipantMedia';
+
+export * from './ProducerClient/producerClientEmits/createDeviceClient';

package/src/index.ts

@@ -223,3 +223,10 @@ export * from './producers/producerEmits/joinRoom';
 export * from './sockets/SocketManager';
 // Stream method exports (clickVideo)
 export * from './methods/stream/clickVideo';
+
+// Framework-neutral headless helper suite. The web entry includes
+// virtualBackground, which requires an offscreen canvas and captureStream().
+export * from './methods/utils/headless';
+export * from './methods/utils/getParticipantMedia';
+// Shared web compositor used by headless virtual-background processing.
+export * from './methods/utils/virtualBackgroundCompositor';

package/src/methods/exit/confirmExit.ts

@@ -6,6 +6,8 @@ export interface ConfirmExitOptions {
   member: string
   roomName: string
   ban?: boolean
+  /** Whether a host exit should end the room for everyone. Defaults to true. */
+  endRoomOnHostExit?: boolean
 }
 
 // Export the type definition for the function
@@ -20,6 +22,7 @@ export type ConfirmExitType = (options: ConfirmExitOptions) => Promise<void>
  * @param {string} options.member - The member who is exiting.
  * @param {string} options.roomName - The name of the room the member is exiting from.
  * @param {boolean} [options.ban=false] - Whether to ban the member from the room.
+ * @param {boolean} [options.endRoomOnHostExit=true] - Whether a host exit ends the room for everyone.
  * @returns {Promise<void>} A promise that resolves when the exit is confirmed.
  *
  * @example
@@ -29,7 +32,8 @@ export type ConfirmExitType = (options: ConfirmExitOptions) => Promise<void>
  *   localSocket: localSocketInstance,
  *   member: "JohnDoe",
  *   roomName: "Room123",
- *   ban: true,
+ *   ban: false,
+ *   endRoomOnHostExit: false, // Let the host rejoin without ending the room.
  * };
  * await confirmExit(options);
  * ```
@@ -40,13 +44,15 @@ export const confirmExit = async ({
   localSocket,
   member,
   roomName,
-  ban = false
+  ban = false,
+  endRoomOnHostExit = true
 }: ConfirmExitOptions): Promise<void> => {
   // Emit a socket event to disconnect the user from the room
   socket.emit('disconnectUser', {
     member: member,
     roomName: roomName,
-    ban: ban
+    ban: ban,
+    endRoomOnHostExit
   })
 
   if (localSocket && localSocket.id) {
@@ -54,7 +60,8 @@ export const confirmExit = async ({
     localSocket.emit('disconnectUser', {
       member: member,
       roomName: roomName,
-      ban: ban
+      ban: ban,
+      endRoomOnHostExit
     })
   }
 }

package/src/methods/socketReceive/getDomains.ts

@@ -1,4 +1,4 @@
-import type { RtpCapabilities } from 'mediasoup-client/lib/types';
+import type { RtpCapabilities } from 'mediasoup-client/types';
 import type {
   AltDomains,
   ConsumeSocket,

package/src/methods/utils/getParticipantMedia.ts

@@ -0,0 +1,112 @@
+import { Participant, Stream } from '../../types/types';
+
+export interface GetParticipantMediaOptions {
+  /**
+   * A participant id, or a producer id when the caller already holds one.
+   */
+  id?: string;
+  /** A participant display name. Used when `id` resolves nothing. */
+  name?: string;
+  /** Which media to resolve. Defaults to `video`. */
+  kind?: 'video' | 'audio';
+  /**
+   * The MediaSFU parameter bag — the object handed to `updateSourceParameters`,
+   * or anything exposing `participants`, `allVideoStreams` and `allAudioStreams`.
+   */
+  parameters: {
+    participants?: Participant[];
+    allVideoStreams?: (Participant | Stream)[];
+    allAudioStreams?: (Participant | Stream)[];
+    getCurrentParams?: () => any;
+    getUpdatedAllParams?: () => any;
+    [key: string]: any;
+  };
+}
+
+export type GetParticipantMediaType = (
+  options: GetParticipantMediaOptions
+) => Promise<MediaStream | null>;
+
+/**
+ * Resolve a participant's live MediaStream from a MediaSFU parameter bag.
+ *
+ * This is the SDK-level counterpart of the `getParticipantMedia` helper that
+ * MediaSFU components publish through `sourceParameters`. That helper remains
+ * available for backwards compatibility; prefer this export when you drive the
+ * SDK headlessly (`returnUI={false}`) and only hold the parameter bag.
+ *
+ * Resolution order:
+ *  1. `parameters.participants` matched by `id`, then by `name`.
+ *  2. The matched participant's `videoID` / `audioID`, looked up against
+ *     `allVideoStreams` / `allAudioStreams` by `producerId`. These collections
+ *     are keyed by producer id only — a participant's `id` is its membership id
+ *     and never matches, which is why an id-keyed lookup silently returns null.
+ *  3. `id` treated directly as a producer id, for callers that already hold one.
+ *
+ * @example
+ * ```ts
+ * import { getParticipantMedia } from 'mediasfu-reactjs';
+ *
+ * const stream = await getParticipantMedia({
+ *   name: 'Paul',
+ *   kind: 'video',
+ *   parameters: sourceParameters.current,
+ * });
+ * if (stream) videoElement.srcObject = stream;
+ * ```
+ */
+export async function getParticipantMedia({
+  id = '',
+  name = '',
+  kind = 'video',
+  parameters,
+}: GetParticipantMediaOptions): Promise<MediaStream | null> {
+  try {
+    if (!parameters) return null;
+    // Prefer the freshest bag when the caller holds an older snapshot.
+    const live =
+      typeof parameters.getCurrentParams === 'function'
+        ? parameters.getCurrentParams() || parameters
+        : parameters;
+
+    const participants: Participant[] = Array.isArray(live.participants)
+      ? live.participants
+      : [];
+    const streams: (Participant | Stream)[] = Array.isArray(
+      kind === 'video' ? live.allVideoStreams : live.allAudioStreams
+    )
+      ? kind === 'video'
+        ? live.allVideoStreams
+        : live.allAudioStreams
+      : [];
+    if (streams.length === 0) return null;
+
+    let participant = id
+      ? participants.find((part) => part.id === id)
+      : undefined;
+    if (!participant && name) {
+      participant = participants.find((part) => part.name === name);
+    }
+
+    const producerId = participant
+      ? kind === 'video'
+        ? participant.videoID
+        : participant.audioID
+      : '';
+    if (producerId) {
+      const match = streams.find((stream) => stream.producerId === producerId);
+      if (match && match.stream) return match.stream;
+    }
+
+    if (id) {
+      const direct = streams.find((stream) => stream.producerId === id);
+      if (direct && direct.stream) return direct.stream;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export default getParticipantMedia;

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

@@ -0,0 +1,44 @@
+import { HeadlessOptions, HeadlessParameters } from './headlessTypes';
+
+export type GetCurrentParamsType = (
+  options: HeadlessOptions
+) => HeadlessParameters;
+
+/**
+ * Read the freshest parameter bag **without** triggering a republish.
+ *
+ * `parameters.getUpdatedAllParams()` looks like a getter but is not one: it
+ * reassigns `sourceParameters` and calls `updateSourceParameters` as a side
+ * effect. Calling it from a React event handler or a polling loop therefore
+ * re-enters your own update path, which at best causes a render storm and at
+ * worst locks the tab before `getUserMedia` resolves.
+ *
+ * MediaSFU components now publish a pure `getCurrentParams()` on the bag; this
+ * helper uses it when present and otherwise returns the bag you already hold.
+ * It never calls `getUpdatedAllParams()` and never throws.
+ *
+ * @example
+ * ```ts
+ * import { getCurrentParams } from 'mediasfu-shared';
+ *
+ * // Safe inside a click handler — no re-entrant publish.
+ * const live = getCurrentParams({ parameters: parameterStore.getCurrent() });
+ * await live.clickVideo({ parameters: live });
+ * ```
+ */
+export function getCurrentParams({
+  parameters,
+}: HeadlessOptions): HeadlessParameters {
+  const source = parameters || {};
+  if (typeof source.getCurrentParams === 'function') {
+    try {
+      const refreshed = source.getCurrentParams();
+      if (refreshed && typeof refreshed === 'object') return refreshed;
+    } catch {
+      // Fall through to the bag the caller already holds.
+    }
+  }
+  return source;
+}
+
+export default getCurrentParams;

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

@@ -0,0 +1,256 @@
+import { Participant, Stream } from '../../../types/types';
+import { HeadlessOptions, HeadlessParameters, ResolvedMedia } from './headlessTypes';
+
+/**
+ * MediaSFU seeds its own grid collections with a self marker rather than a real
+ * producer. Rendering it as a remote peer shows the local user twice.
+ */
+const SELF_PRODUCER_IDS = new Set(['youyou', 'youyouyou']);
+
+function toMediaStream(value: any): MediaStream | null {
+  if (value && typeof value.getTracks === 'function') return value as MediaStream;
+  const nested = value?.stream;
+  return nested && typeof nested.getTracks === 'function'
+    ? (nested as MediaStream)
+    : null;
+}
+
+
+/**
+ * A stream is only renderable if it still carries a live track of that kind.
+ *
+ * MediaSFU keeps `localStreamVideo` assigned after the camera is switched off —
+ * the track goes `enabled: false` or `readyState: 'ended'` rather than the
+ * field being cleared. Returning it regardless paints a black <video> instead
+ * of falling back to an audio or identity card.
+ *
+ * `enabled` is only meaningful for local media: the app clears it when the user
+ * turns their own camera off. It is never applied to remote tracks, where
+ * `muted: true` is a normal transient state before the first frame decodes.
+ */
+function hasRenderableTrack(
+  stream: MediaStream | null,
+  kind: 'video' | 'audio',
+  requireEnabled: boolean
+): stream is MediaStream {
+  if (!stream || typeof stream.getTracks !== 'function') return false;
+  try {
+    return stream.getTracks().some(
+      (track) =>
+        track.kind === kind &&
+        track.readyState === 'live' &&
+        (!requireEnabled || track.enabled !== false)
+    );
+  } catch {
+    return false;
+  }
+}
+
+function collect(
+  entries: (Participant | Stream)[] | undefined
+): (Participant | Stream)[] {
+  return Array.isArray(entries) ? entries : [];
+}
+
+function dedupe(entries: (Participant | Stream)[]): ResolvedMedia[] {
+  const seen = new Set<string>();
+  const resolved: ResolvedMedia[] = [];
+  for (const entry of entries) {
+    const producerId = (entry as any)?.producerId || '';
+    if (SELF_PRODUCER_IDS.has(producerId)) continue;
+    const stream = toMediaStream(entry);
+    if (!hasRenderableTrack(stream, 'video', false)) continue;
+    const key = producerId || stream.id || '';
+    if (key && seen.has(key)) continue;
+    if (key) seen.add(key);
+    resolved.push({
+      stream,
+      producerId,
+      name: (entry as any)?.name || '',
+    });
+  }
+  return resolved;
+}
+
+export type GetRemoteVideoStreamsType = (
+  options: HeadlessOptions
+) => ResolvedMedia[];
+
+/**
+ * Every remote camera in the room, in render order.
+ *
+ * Two details make this hard to get right by hand, and both are why headless
+ * integrations lose the host's video:
+ *
+ *  - **`oldAllStreams` matters.** During normal conference layout processing the
+ *    SDK moves a stream out of `allVideoStreams` into `oldAllStreams`. Reading
+ *    only `allVideoStreams` makes the host disappear mid-call.
+ *  - **The self marker must go.** `allVideoStreams` is seeded with a
+ *    `producerId: 'youyou'` placeholder for the local user.
+ *
+ * Entries are de-duplicated by `producerId`, falling back to the stream id, so a
+ * stream present in both collections is returned once.
+ *
+ * @example
+ * ```ts
+ * import { getRemoteVideoStreams } from 'mediasfu-shared';
+ *
+ * const remotes = getRemoteVideoStreams({ parameters });
+ * const primary = remotes[0]?.stream ?? null;
+ * ```
+ */
+export function getRemoteVideoStreams({
+  parameters,
+}: HeadlessOptions): ResolvedMedia[] {
+  const source: HeadlessParameters = parameters || {};
+  return dedupe([
+    ...collect(source.oldAllStreams),
+    ...collect(source.allVideoStreams),
+  ]);
+}
+
+export type GetRemoteAudioStreamsType = (
+  options: HeadlessOptions
+) => ResolvedMedia[];
+
+/**
+ * Every remote audio producer in the room.
+ *
+ * Note that for *hearing* participants you normally want
+ * {@link getAudioGridComponents} instead — MediaSFU prepares its own audio
+ * elements and mounting those is what actually plays sound. This helper is for
+ * cases where you need the raw `MediaStream` (recording, analysis, metering).
+ */
+export function getRemoteAudioStreams({
+  parameters,
+}: HeadlessOptions): ResolvedMedia[] {
+  const source: HeadlessParameters = parameters || {};
+  return dedupe(collect(source.allAudioStreams));
+}
+
+export type GetLocalVideoStreamType = (
+  options: HeadlessOptions
+) => MediaStream | null;
+
+/**
+ * The local camera stream to render as the self-view.
+ *
+ * The virtual-background case is the one everyone misses: when `keepBackground`
+ * is on, the stream that carries the processed frames is `virtualStream`, and
+ * `localStreamVideo` still holds the raw camera. Rendering the wrong one shows
+ * the user their unprocessed background. This mirrors the SDK's own grid rule.
+ *
+ * Returns `null` when the camera is off, so a falsy result is a truthful
+ * "no self-view" rather than something to paint black.
+ *
+ * Note: transport state such as `videoParams` or `videoProducer` is **not**
+ * renderable media and is deliberately never consulted here.
+ */
+export function getLocalVideoStream({
+  parameters,
+}: HeadlessOptions): MediaStream | null {
+  const source: HeadlessParameters = parameters || {};
+  if (source.keepBackground && source.virtualStream) {
+    const virtual = toMediaStream(source.virtualStream);
+    if (hasRenderableTrack(virtual, 'video', true)) return virtual;
+  }
+  const camera = toMediaStream(source.localStreamVideo);
+  if (hasRenderableTrack(camera, 'video', true)) return camera;
+  const combined = toMediaStream(source.localStream);
+  return hasRenderableTrack(combined, 'video', true) ? combined : null;
+}
+
+export type GetLocalAudioStreamType = (
+  options: HeadlessOptions
+) => MediaStream | null;
+
+/** The local microphone stream, or `null` when the mic is off. */
+export function getLocalAudioStream({
+  parameters,
+}: HeadlessOptions): MediaStream | null {
+  const source: HeadlessParameters = parameters || {};
+  const mic = toMediaStream(source.localStreamAudio);
+  if (hasRenderableTrack(mic, 'audio', true)) return mic;
+  const combined = toMediaStream(source.localStream);
+  return hasRenderableTrack(combined, 'audio', true) ? combined : null;
+}
+
+export interface ScreenShareState {
+  /** The stream to render, local or remote, or `null` when nobody is sharing. */
+  stream: MediaStream | null;
+  /** True when the stream is this user's own screen. */
+  isLocal: boolean;
+  /** True when any screen share is active in the room. */
+  active: boolean;
+}
+
+export type GetScreenShareStreamType = (
+  options: HeadlessOptions
+) => ScreenShareState;
+
+/**
+ * The active screen share, remote first.
+ *
+ * `remoteScreenStream` is an array in some SDK paths and a bare object in
+ * others; both shapes are handled here so callers do not have to guess.
+ *
+ * @example
+ * ```ts
+ * const share = getScreenShareStream({ parameters });
+ * const primary = share.stream ?? remotes[0]?.stream ?? localVideo;
+ * ```
+ */
+export function getScreenShareStream({
+  parameters,
+}: HeadlessOptions): ScreenShareState {
+  const source: HeadlessParameters = parameters || {};
+  const remoteRaw: any = source.remoteScreenStream;
+  const remote = Array.isArray(remoteRaw)
+    ? toMediaStream(remoteRaw[0])
+    : toMediaStream(remoteRaw);
+  // Liveness matters most here. When a sharer stops, the SDK ends the track but
+  // `remoteScreenStream` keeps referencing it, so a viewer that trusts the field
+  // renders a dead track — a screen share that "ends" into a black stage.
+  // `enabled` is not required: it is a local-only flag and never set on a
+  // received screen track.
+  if (hasRenderableTrack(remote, 'video', false)) {
+    return { stream: remote, isLocal: false, active: true };
+  }
+
+  const local = toMediaStream(source.localStreamScreen);
+  if (hasRenderableTrack(local, 'video', true)) {
+    return { stream: local, isLocal: true, active: true };
+  }
+
+  return {
+    stream: null,
+    isLocal: false,
+    active: Boolean(source.shareScreenStarted || source.shared),
+  };
+}
+
+export type GetAudioGridComponentsType = (options: HeadlessOptions) => any[];
+
+/**
+ * The prepared audio elements to mount so participants are actually audible.
+ *
+ * Mount **all** of them. Truncating this list to the participants you happen to
+ * draw on screen silently mutes everyone else — audio playback is decoupled from
+ * your video layout. The usual pattern is a visually hidden container:
+ *
+ * @example
+ * ```tsx
+ * import { getAudioGridComponents } from 'mediasfu-shared';
+ *
+ * <div style={{ position: 'absolute', width: 1, height: 1, opacity: 0 }}>
+ *   <AudioGrid componentsToRender={getAudioGridComponents({ parameters })} />
+ * </div>
+ * ```
+ */
+export function getAudioGridComponents({ parameters }: HeadlessOptions): any[] {
+  const source: HeadlessParameters = parameters || {};
+  return [
+    ...(Array.isArray(source.audioOnlyStreams) ? source.audioOnlyStreams : []),
+    ...(Array.isArray(source.translationStreams) ? source.translationStreams : []),
+  ].filter(Boolean);
+}