@stream-io/video-react-native-sdk 1.12.0 → 1.13.0

package/src/contexts/internal/ScreenshotIosContext.tsx

@@ -0,0 +1,145 @@
+import {
+  StreamVideoParticipant,
+  type VideoTrackType,
+  getLogger,
+} from '@stream-io/video-client';
+import React, {
+  createContext,
+  useContext,
+  RefObject,
+  useCallback,
+  useMemo,
+} from 'react';
+import { NativeModules, findNodeHandle, Platform } from 'react-native';
+
+const { StreamVideoReactNative } = NativeModules;
+
+type ScreenshotIosContextType = {
+  register: (
+    participant: StreamVideoParticipant,
+    videoTrackType: VideoTrackType,
+    ref: RefObject<any>,
+  ) => void;
+  deregister: (
+    participant: StreamVideoParticipant,
+    videoTrackType: VideoTrackType,
+  ) => void;
+  take: (
+    participant: StreamVideoParticipant,
+    videoTrackType: VideoTrackType,
+  ) => Promise<string | null>;
+};
+
+// Create the context with a default undefined value
+const ScreenshotIosContext = createContext<
+  ScreenshotIosContextType | undefined
+>(undefined);
+
+const participantVideoViewRefMap: Map<string, RefObject<any>> = new Map();
+
+export const ScreenshotIosContextProvider = ({
+  children,
+}: React.PropsWithChildren<{}>) => {
+  // Register a participant's RTCView ref
+  const register = useCallback(
+    (
+      participant: StreamVideoParticipant,
+      videoTrackType: VideoTrackType,
+      ref: RefObject<any>,
+    ) => {
+      if (ref && participant.userId) {
+        participantVideoViewRefMap.set(
+          `${participant.userId}-${videoTrackType}`,
+          ref,
+        );
+      }
+    },
+    [],
+  );
+
+  const deregister = useCallback(
+    (participant: StreamVideoParticipant, videoTrackType: VideoTrackType) => {
+      if (participant.userId) {
+        participantVideoViewRefMap.delete(
+          `${participant.userId}-${videoTrackType}`,
+        );
+      }
+    },
+    [],
+  );
+
+  // Take a snapshot of a specific participant's view
+  const take = useCallback(
+    async (
+      participant: StreamVideoParticipant,
+      videoTrackType: VideoTrackType,
+    ): Promise<string | null> => {
+      try {
+        if (Platform.OS !== 'ios') {
+          throw new Error(
+            'ScreenshotIosContextProvider is only supported on iOS',
+          );
+        }
+
+        const ref = participantVideoViewRefMap.get(
+          `${participant.userId}-${videoTrackType}`,
+        );
+        if (!ref || !ref.current) {
+          getLogger(['ScreenshotIosContextProvider'])(
+            'error',
+            'Cannot take snapshot: No registered view for this participant',
+          );
+          return null;
+        }
+
+        // Get the native handle for the view
+        const tag = findNodeHandle(ref.current);
+        if (!tag) {
+          getLogger(['ScreenshotIosContextProvider'])(
+            'error',
+            'Cannot take snapshot: Cannot get native handle for view',
+          );
+          return null;
+        }
+
+        // Take the snapshot using our native module
+        const base64Image = await StreamVideoReactNative.captureRef(tag, {});
+
+        return base64Image;
+      } catch (error) {
+        getLogger(['ScreenshotIosContextProvider'])(
+          'error',
+          'Error taking participant snapshot:',
+          error,
+        );
+        return null;
+      }
+    },
+    [],
+  );
+
+  const value = useMemo(
+    () => ({
+      register,
+      deregister,
+      take,
+    }),
+    [register, deregister, take],
+  );
+
+  return (
+    <ScreenshotIosContext.Provider value={value}>
+      {children}
+    </ScreenshotIosContext.Provider>
+  );
+};
+
+export const useScreenshotIosContext = (): ScreenshotIosContextType => {
+  const context = useContext(ScreenshotIosContext);
+  if (!context) {
+    throw new Error(
+      'useScreenshotIosContext must be used within a ScreenshotIosContextProvider',
+    );
+  }
+  return context;
+};

package/src/hooks/index.ts

@@ -8,3 +8,4 @@ export * from './useAutoEnterPiPEffect';
 export * from './useApplyDefaultMediaStreamSettings';
 export * from './useScreenShareButton';
 export * from './useTrackDimensions';
+export * from './useScreenshot';

package/src/hooks/useScreenshot.ts

@@ -0,0 +1,78 @@
+import { useCallback } from 'react';
+import { useScreenshotIosContext } from '../contexts/internal/ScreenshotIosContext';
+import { NativeModules, Platform } from 'react-native';
+import type { MediaStream } from '@stream-io/react-native-webrtc';
+import {
+  StreamVideoParticipant,
+  getLogger,
+  type VideoTrackType,
+} from '@stream-io/video-client';
+
+const { StreamVideoReactNative } = NativeModules;
+
+/**
+ * Hook that provides functionality to take screenshots of participant video streams.
+ *
+ * @returns An object containing the `takeScreenShot` function that captures a participant's video.
+ */
+type UseScreenshotResult = {
+  /**
+   * Takes a screenshot of a participant's video stream.
+   *
+   * @param participant - The participant whose video stream to capture
+   * @param videoTrackType - The type of video track to capture ('videoTrack' or 'screenShareTrack')
+   * @returns A Promise that resolves to a base64-encoded png image string or null if the screenshot fails
+   */
+  takeScreenshot: (
+    participant: StreamVideoParticipant,
+    videoTrackType: VideoTrackType,
+  ) => Promise<string | null>;
+};
+
+export function useScreenshot(): UseScreenshotResult {
+  const { take } = useScreenshotIosContext();
+  const takeScreenshot = useCallback(
+    async (
+      participant: StreamVideoParticipant,
+      videoTrackType: VideoTrackType,
+    ) => {
+      if (Platform.OS === 'android') {
+        const { videoStream, screenShareStream } = participant;
+
+        const videoStreamForScreenshot = (videoTrackType === 'screenShareTrack'
+          ? screenShareStream
+          : videoStream) as unknown as MediaStream | undefined;
+
+        if (videoStreamForScreenshot) {
+          try {
+            return await StreamVideoReactNative.takeScreenshot(
+              videoStreamForScreenshot.toURL(),
+            );
+          } catch (error) {
+            getLogger(['useScreenshot'])(
+              'error',
+              'Error taking screenshot',
+              error,
+            );
+            return null;
+          }
+        }
+        return null;
+      } else {
+        try {
+          return await take(participant, videoTrackType);
+        } catch (error) {
+          getLogger(['useScreenshot'])(
+            'error',
+            'Error taking screenshot',
+            error,
+          );
+          return null;
+        }
+      }
+    },
+    [take],
+  );
+
+  return { takeScreenshot };
+}

package/src/providers/StreamVideo.tsx

@@ -10,6 +10,7 @@ import { usePushRegisterEffect } from '../hooks';
 import { translations } from '../translations';
 import { type DeepPartial, StreamTheme } from '../contexts/ThemeContext';
 import { type Theme } from '../theme/theme';
+import { ScreenshotIosContextProvider } from '../contexts/internal/ScreenshotIosContext';
 
 /**
  *
@@ -61,8 +62,10 @@ export const StreamVideo = (
     >
       <StreamTheme style={style}>
         <StreamVideoStoreProvider>
-          <PushRegister />
-          {children}
+          <ScreenshotIosContextProvider>
+            <PushRegister />
+            {children}
+          </ScreenshotIosContextProvider>
         </StreamVideoStoreProvider>
       </StreamTheme>
     </StreamVideoProvider>

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.12.0';
+export const version = '1.13.0';