@stream-io/video-react-sdk 1.41.0 → 1.43.0

package/dist/index.cjs.js

@@ -458,6 +458,138 @@ function useDragToScroll(element, options = {}) {
     }, [element, enabled, decay, minVelocity, dragThreshold]);
 }
 
+const attachHiddenMediaSink = (stream) => {
+    const logger = videoClient.videoLoggerSystem.getLogger('useLoopbackRecording');
+    const element = document.createElement('video');
+    element.muted = true;
+    element.autoplay = true;
+    element.playsInline = true;
+    element.srcObject = stream;
+    element.play().catch((error) => {
+        logger.warn('sink element failed to play; recording may be empty', error);
+    });
+    return () => {
+        element.pause();
+        element.srcObject = null;
+    };
+};
+/** Records SFU loopback streams for pre-call testing. */
+const useLoopbackRecording = () => {
+    const call = videoReactBindings.useCall();
+    const { useCallCallingState, useParticipantCount, useLocalParticipant } = videoReactBindings.useCallStateHooks();
+    const callingState = useCallCallingState();
+    const participantCount = useParticipantCount();
+    const localParticipant = useLocalParticipant();
+    const [recordingState, setRecordingState] = react.useState('idle');
+    const recordingStateRef = react.useRef('idle');
+    const isMountedRef = react.useRef(true);
+    const awaitAbortRef = react.useRef(null);
+    const stopRef = react.useRef(null);
+    const runRef = react.useRef(null);
+    const loopbackStreams = react.useMemo(() => videoClient.getLoopbackStreams(call, localParticipant), [call, localParticipant]);
+    const updateState = react.useCallback((next) => {
+        recordingStateRef.current = next;
+        if (isMountedRef.current) {
+            setRecordingState(next);
+        }
+    }, []);
+    const stopRecording = react.useCallback(async () => {
+        const current = recordingStateRef.current;
+        if (current === 'idle')
+            return;
+        if (current === 'awaiting-streams') {
+            videoClient.videoLoggerSystem
+                .getLogger('useLoopbackRecording')
+                .debug('aborting the awaiting-streams wait');
+            awaitAbortRef.current?.abort();
+            return;
+        }
+        stopRef.current?.();
+        await runRef.current;
+    }, []);
+    const startRecording = react.useCallback(async ({ includeVideo = true, maxDurationMs = videoClient.DEFAULT_LOOPBACK_RECORDING_DURATION_MS, } = {}) => {
+        const logger = videoClient.videoLoggerSystem.getLogger('useLoopbackRecording');
+        if (!call)
+            return null;
+        if (recordingStateRef.current !== 'idle') {
+            logger.warn('a recording is already running');
+            return null;
+        }
+        if (call.state.participantCount > 1) {
+            logger.warn('cannot start recording with other participants present');
+            return null;
+        }
+        const run = async () => {
+            awaitAbortRef.current = new AbortController();
+            updateState('awaiting-streams');
+            try {
+                const tracks = await videoClient.waitForLoopbackStreams(call, {
+                    includeVideo,
+                    signal: awaitAbortRef.current.signal,
+                    timeoutMs: videoClient.LOOPBACK_STREAMS_WAIT_TIMEOUT_MS,
+                });
+                if (tracks === null) {
+                    logger.debug('loopback stream wait was aborted');
+                    return null;
+                }
+                updateState('recording');
+                const restoreAudio = videoClient.enableLoopbackAudio(tracks);
+                const stream = new MediaStream([tracks.audioTrack, tracks.videoTrack].filter((track) => !!track));
+                const detachSink = attachHiddenMediaSink(stream);
+                const recorder = new videoClient.MediaStreamRecorder(stream, {
+                    maxDurationMs: videoClient.clampLoopbackRecordingDuration(maxDurationMs),
+                });
+                stopRef.current = recorder.stop;
+                try {
+                    return await recorder.start();
+                }
+                finally {
+                    detachSink();
+                    restoreAudio();
+                }
+            }
+            catch (err) {
+                logger.error('loopback recording failed', err);
+                throw err;
+            }
+            finally {
+                awaitAbortRef.current = null;
+                stopRef.current = null;
+                updateState('idle');
+            }
+        };
+        const promise = run();
+        runRef.current = promise.catch(() => undefined);
+        return promise;
+    }, [call, updateState]);
+    react.useEffect(() => {
+        if (callingState === videoClient.CallingState.LEFT ||
+            callingState === videoClient.CallingState.IDLE) {
+            stopRecording().catch(() => { });
+        }
+    }, [callingState, stopRecording]);
+    react.useEffect(() => {
+        if (recordingState !== 'idle' && participantCount > 1) {
+            stopRecording().catch(() => { });
+        }
+    }, [participantCount, recordingState, stopRecording]);
+    react.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+            awaitAbortRef.current?.abort('the component unmounted');
+            stopRef.current?.();
+        };
+    }, []);
+    return {
+        startRecording,
+        stopRecording,
+        recordingState,
+        loopbackVideoStream: loopbackStreams.loopbackVideoStream,
+        loopbackAudioStream: loopbackStreams.loopbackAudioStream,
+    };
+};
+
 exports.MenuVisualType = void 0;
 (function (MenuVisualType) {
     MenuVisualType["PORTAL"] = "portal";
@@ -827,7 +959,7 @@ const AvatarFallback = ({ className, names, style, }) => {
     return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
 };
 
-const BackgroundFiltersProviderImpl = react.lazy(() => Promise.resolve().then(function () { return require('./background-filters-folwWrgs.cjs.js'); }).then((m) => ({
+const BackgroundFiltersProviderImpl = react.lazy(() => Promise.resolve().then(function () { return require('./background-filters-DMStbSEg.cjs.js'); }).then((m) => ({
     default: m.BackgroundFiltersProvider,
 })));
 /**
@@ -1406,7 +1538,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.41.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.43.0"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -3279,7 +3411,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.41.0").split('.');
+const [major, minor, patch] = ("1.43.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3379,6 +3511,7 @@ exports.useBackgroundFilters = useBackgroundFilters;
 exports.useDeviceList = useDeviceList;
 exports.useFilteredParticipants = useFilteredParticipants;
 exports.useHorizontalScrollPosition = useHorizontalScrollPosition;
+exports.useLoopbackRecording = useLoopbackRecording;
 exports.useMenuContext = useMenuContext;
 exports.useModeration = useModeration;
 exports.useNoiseCancellation = useNoiseCancellation;