@stream-io/video-react-sdk 0.0.1-alpha.9

package/src/core/hooks/useAudioPublisher.ts

@@ -0,0 +1,118 @@
+import { useCallback, useEffect } from 'react';
+import { map } from 'rxjs';
+import {
+  CallingState,
+  getAudioStream,
+  OwnCapability,
+  SfuModels,
+  watchForAddedDefaultAudioDevice,
+  watchForDisconnectedAudioDevice,
+} from '@stream-io/video-client';
+import {
+  useCall,
+  useCallCallingState,
+  useCallState,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
+
+/**
+ * @internal
+ */
+export type AudioPublisherInit = {
+  initialAudioMuted?: boolean;
+  audioDeviceId?: string;
+};
+
+/**
+ * @internal
+ * @category Device Management
+ */
+export const useAudioPublisher = ({
+  initialAudioMuted,
+  audioDeviceId,
+}: AudioPublisherInit) => {
+  const call = useCall();
+  const callState = useCallState();
+  const callingState = useCallCallingState();
+  const participant = useLocalParticipant();
+  const { localParticipant$ } = callState;
+
+  const isPublishingAudio = participant?.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
+
+  const publishAudioStream = useCallback(async () => {
+    if (!call) return;
+    if (!call.permissionsContext.hasPermission(OwnCapability.SEND_AUDIO)) {
+      throw new Error(`No permission to publish audio`);
+    }
+    try {
+      const audioStream = await getAudioStream(audioDeviceId);
+      await call.publishAudioStream(audioStream);
+    } catch (e) {
+      console.log('Failed to publish audio stream', e);
+    }
+  }, [audioDeviceId, call]);
+
+  useEffect(() => {
+    if (callingState === CallingState.JOINED && !initialAudioMuted) {
+      publishAudioStream().catch((e) => {
+        console.error('Failed to publish audio stream', e);
+      });
+    }
+  }, [callingState, initialAudioMuted, publishAudioStream]);
+
+  useEffect(() => {
+    if (!localParticipant$) return;
+    const subscription = watchForDisconnectedAudioDevice(
+      localParticipant$.pipe(map((p) => p?.audioDeviceId)),
+    ).subscribe(async () => {
+      if (!call) return;
+      call.setAudioDevice(undefined);
+      await call.stopPublish(SfuModels.TrackType.AUDIO);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [localParticipant$, call]);
+
+  useEffect(() => {
+    if (!participant?.audioStream || !call || !isPublishingAudio) return;
+
+    const [track] = participant.audioStream.getAudioTracks();
+    const selectedAudioDeviceId = track.getSettings().deviceId;
+
+    const republishDefaultDevice = watchForAddedDefaultAudioDevice().subscribe(
+      async () => {
+        if (
+          !(
+            call &&
+            participant.audioStream &&
+            selectedAudioDeviceId === 'default'
+          )
+        )
+          return;
+        // We need to stop the original track first in order
+        // we can retrieve the new default device stream
+        track.stop();
+        const audioStream = await getAudioStream('default');
+        await call.publishAudioStream(audioStream);
+      },
+    );
+
+    const handleTrackEnded = async () => {
+      if (selectedAudioDeviceId === audioDeviceId) {
+        const audioStream = await getAudioStream(audioDeviceId);
+        await call.publishAudioStream(audioStream);
+      }
+    };
+
+    track.addEventListener('ended', handleTrackEnded);
+    return () => {
+      track.removeEventListener('ended', handleTrackEnded);
+      republishDefaultDevice.unsubscribe();
+    };
+  }, [audioDeviceId, call, participant?.audioStream, isPublishingAudio]);
+
+  return publishAudioStream;
+};

package/src/core/hooks/useVideoPublisher.ts

@@ -0,0 +1,120 @@
+import { useCallback, useEffect } from 'react';
+import { map } from 'rxjs';
+import {
+  CallingState,
+  getVideoStream,
+  OwnCapability,
+  SfuModels,
+  watchForAddedDefaultVideoDevice,
+  watchForDisconnectedVideoDevice,
+} from '@stream-io/video-client';
+import {
+  useCall,
+  useCallCallingState,
+  useCallState,
+  useLocalParticipant,
+} from '@stream-io/video-react-bindings';
+import { useDebugPreferredVideoCodec } from '../../components/Debug/useIsDebugMode';
+
+/**
+ * @internal
+ */
+export type VideoPublisherInit = {
+  initialVideoMuted?: boolean;
+  videoDeviceId?: string;
+};
+
+/**
+ * @internal
+ * @category Device Management
+ */
+export const useVideoPublisher = ({
+  initialVideoMuted,
+  videoDeviceId,
+}: VideoPublisherInit) => {
+  const call = useCall();
+  const callState = useCallState();
+  const callingState = useCallCallingState();
+  const participant = useLocalParticipant();
+  const { localParticipant$ } = callState;
+
+  const preferredCodec = useDebugPreferredVideoCodec();
+  const isPublishingVideo = participant?.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+
+  const publishVideoStream = useCallback(async () => {
+    if (!call) return;
+    if (!call.permissionsContext.hasPermission(OwnCapability.SEND_VIDEO)) {
+      throw new Error(`No permission to publish video`);
+    }
+    try {
+      const videoStream = await getVideoStream(videoDeviceId);
+      await call.publishVideoStream(videoStream, { preferredCodec });
+    } catch (e) {
+      console.log('Failed to publish video stream', e);
+    }
+  }, [call, preferredCodec, videoDeviceId]);
+
+  useEffect(() => {
+    if (callingState === CallingState.JOINED && !initialVideoMuted) {
+      publishVideoStream().catch((e) => {
+        console.error('Failed to publish video stream', e);
+      });
+    }
+  }, [callingState, initialVideoMuted, publishVideoStream]);
+
+  useEffect(() => {
+    if (!localParticipant$) return;
+    const subscription = watchForDisconnectedVideoDevice(
+      localParticipant$.pipe(map((p) => p?.videoDeviceId)),
+    ).subscribe(async () => {
+      if (!call) return;
+      call.setVideoDevice(undefined);
+      await call.stopPublish(SfuModels.TrackType.VIDEO);
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [localParticipant$, call]);
+
+  useEffect(() => {
+    if (!participant?.videoStream || !call || !isPublishingVideo) return;
+
+    const [track] = participant.videoStream.getVideoTracks();
+    const selectedVideoDeviceId = track.getSettings().deviceId;
+
+    const republishDefaultDevice = watchForAddedDefaultVideoDevice().subscribe(
+      async () => {
+        if (
+          !(
+            call &&
+            participant.videoStream &&
+            selectedVideoDeviceId === 'default'
+          )
+        )
+          return;
+        // We need to stop the original track first in order
+        // we can retrieve the new default device stream
+        track.stop();
+        const videoStream = await getVideoStream('default');
+        await call.publishVideoStream(videoStream);
+      },
+    );
+
+    const handleTrackEnded = async () => {
+      if (selectedVideoDeviceId === videoDeviceId) {
+        const videoStream = await getVideoStream(videoDeviceId);
+        await call.publishVideoStream(videoStream);
+      }
+    };
+
+    track.addEventListener('ended', handleTrackEnded);
+    return () => {
+      track.removeEventListener('ended', handleTrackEnded);
+      republishDefaultDevice.unsubscribe();
+    };
+  }, [videoDeviceId, call, participant?.videoStream, isPublishingVideo]);
+
+  return publishVideoStream;
+};

package/src/core/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './contexts';
+export * from './hooks';

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useRtcStats';
+export * from './useFloatingUIPreset';

package/src/hooks/useFloatingUIPreset.ts

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import {
+  offset,
+  autoUpdate,
+  size,
+  useFloating,
+  shift,
+} from '@floating-ui/react';
+import type { UseFloatingProps } from '@floating-ui/react';
+
+export const useFloatingUIPreset = ({
+  placement,
+  strategy,
+}: Pick<UseFloatingProps, 'placement' | 'strategy'>) => {
+  const {
+    refs,
+    x,
+    y,
+    update,
+    elements: { domReference, floating },
+  } = useFloating({
+    placement,
+    strategy,
+    middleware: [
+      offset(10),
+      shift(),
+      size({
+        padding: 10,
+        apply({ availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+      }),
+    ],
+  });
+
+  // handle window resizing
+  useEffect(() => {
+    if (!domReference || !floating) return;
+
+    const cleanup = autoUpdate(domReference, floating, update);
+
+    return () => cleanup();
+  }, [domReference, floating, update]);
+
+  return { refs, x, y, domReference, floating, strategy };
+};

package/src/hooks/useRtcStats.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { Call } from '@stream-io/video-client';
+
+/**
+ *
+ * @param call
+ * @param kind
+ * @param mediaStream
+ * @returns
+ *
+ * @category Call State
+ */
+export const useRtcStats = (
+  call: Call,
+  kind: 'subscriber' | 'publisher',
+  mediaStream?: MediaStream,
+) => {
+  const [stats, setStats] = useState<Record<string, string>>();
+  useEffect(() => {
+    const intervalId = setInterval(async () => {
+      const [track] = mediaStream?.getVideoTracks() ?? [];
+      const rawStats = await call.getStats(kind, track);
+      const decodedStats: Record<string, string> = {};
+      rawStats?.forEach((s) => {
+        decodedStats[s.id] = s;
+      });
+      setStats(decodedStats);
+    }, 1500);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [call, kind, mediaStream]);
+
+  return stats;
+};

package/src/types/components.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export type ChildrenOnly = { children: ReactNode };
+
+export type Readable<T> = {
+  [k in keyof T]: T[k];
+} & {};

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './components';