@stream-io/video-react-native-sdk 1.39.0 → 1.40.0

package/ios/TracksRecorder/VideoPipeline.swift

@@ -0,0 +1,297 @@
+//
+// Copyright © 2026 Stream.io Inc. All rights reserved.
+//
+
+import AVFoundation
+import CoreMedia
+import CoreVideo
+import Foundation
+import WebRTC
+
+/// Video pipeline owned by `TracksRecorderManager`. Encapsulates the H.264
+/// video path:
+///  - the `RecorderVideoSink` attached to the source `RTCVideoTrack`,
+///  - an `AVAssetWriterInput` configured for H.264 encoding (codec, bitrate,
+///    profile, key-frame interval) paired with an
+///    `AVAssetWriterInputPixelBufferAdaptor` — AVFoundation owns the encoder
+///    and picks hardware/software automatically. No manual VT session.
+///  - per-recording counters / PTS range surfaced via `logSummary` at stop.
+///
+/// All state mutation runs on the host's serial queue. Frames arrive on the
+/// WebRTC sink thread and re-dispatch onto `host.queue` before touching
+/// pipeline state.
+internal final class VideoPipeline {
+
+    private static let bitRate: NSNumber = NSNumber(value: 1_000_000)
+
+    private weak var host: PipelineHost?
+    private let videoTrack: RTCVideoTrack
+    private let targetWidth: Int32
+    private let targetHeight: Int32
+
+    private var sink: RecorderVideoSink?
+    private var videoInput: AVAssetWriterInput?
+    private var pixelBufferAdaptor: AVAssetWriterInputPixelBufferAdaptor?
+    private var inputAdded = false
+
+    // Diagnostic counters + PTS range, surfaced via [logSummary] at stop.
+    private var framesReceived = 0
+    private var samplesAppended = 0
+    private var frameAppendFailures = 0
+    private var framesDropped = 0
+    private var firstSamplePtsUs: Int64 = -1
+    private var lastSamplePtsUs: Int64 = -1
+
+    // MARK: - Init
+
+    init(
+        host: PipelineHost,
+        videoTrack: RTCVideoTrack,
+        targetWidth: Int32 = 0,
+        targetHeight: Int32 = 0
+    ) {
+        self.host = host
+        self.videoTrack = videoTrack
+        self.targetWidth = targetWidth
+        self.targetHeight = targetHeight
+    }
+
+    // MARK: - Public API
+
+    /// Attach the sink to the source track. Future frames post to
+    /// `host.queue` and run through the per-frame handler.
+    func start() {
+        let sink = RecorderVideoSink { [weak self] pixelBuffer, width, height, timestampNs in
+            self?.handleVideoFrame(
+                pixelBuffer: pixelBuffer,
+                width: width,
+                height: height,
+                timestampNs: timestampNs
+            )
+        }
+        self.sink = sink
+        videoTrack.add(sink)
+    }
+
+    /// On-queue. Remove the sink from the source track so no more frames
+    /// arrive. Idempotent.
+    func detachSink() {
+        if let sink = sink {
+            videoTrack.remove(sink)
+        }
+        sink = nil
+    }
+
+    /// On-queue. Marks the asset-writer input as finished so the writer
+    /// can finalise. AVFoundation's `finishWriting` flushes any pending
+    /// encoded samples internally; no separate drain step is required.
+    func markInputAsFinished() {
+        videoInput?.markAsFinished()
+    }
+
+    /// On-queue. Logs the pipeline's diagnostic summary — call once at the
+    /// end of a recording.
+    func logSummary() {
+        let durationMs: Int64
+        if firstSamplePtsUs >= 0 && lastSamplePtsUs >= firstSamplePtsUs {
+            durationMs = (lastSamplePtsUs - firstSamplePtsUs) / 1000
+        } else {
+            durationMs = -1
+        }
+        let writerStatus = host?.assetWriter?.status.rawValue ?? -1
+        let writerErr = (host?.assetWriter?.error as NSError?)?.localizedDescription ?? "nil"
+        NSLog(
+            "[TracksRecorder.Video] summary received=%d appended=%d appendFailures=%d dropped=%d firstPtsUs=%lld lastPtsUs=%lld durationMs=%lld writerStatus=%ld writerErr=%@",
+            framesReceived,
+            samplesAppended,
+            frameAppendFailures,
+            framesDropped,
+            firstSamplePtsUs,
+            lastSamplePtsUs,
+            durationMs,
+            writerStatus,
+            writerErr
+        )
+    }
+
+    // MARK: - Sink → queue bridge
+
+    private func handleVideoFrame(
+        pixelBuffer: CVPixelBuffer,
+        width: Int32,
+        height: Int32,
+        timestampNs: Int64
+    ) {
+        guard let host = host else { return }
+
+        // Pixel buffer is borrowed from the sink — it must be retained
+        // across the queue hop. The closure capture pins it for the
+        // duration of the async block (ARC retains it as part of the
+        // closure's captured state).
+        host.queue.async { [weak self, pixelBuffer] in
+            self?.handleVideoFrameOnQueue(
+                pixelBuffer: pixelBuffer,
+                width: width,
+                height: height,
+                timestampNs: timestampNs
+            )
+        }
+    }
+
+    private func handleVideoFrameOnQueue(
+        pixelBuffer: CVPixelBuffer,
+        width: Int32,
+        height: Int32,
+        timestampNs: Int64
+    ) {
+        guard let host = host, host.isRecording, let writer = host.assetWriter else { return }
+
+        framesReceived += 1
+
+        // Lazy-create the writer's video input on the first frame.
+        // Prefer the publisher's max video dimensions so the encoder
+        // is sized for the highest layer the SFU might ever forward;
+        // fall back to the first frame's actual dimensions when no
+        // target is supplied.
+        if videoInput == nil {
+            let actualW = Int32(CVPixelBufferGetWidth(pixelBuffer))
+            let actualH = Int32(CVPixelBufferGetHeight(pixelBuffer))
+            let (encW, encH) = resolveEncoderDimensions(
+                targetW: targetWidth,
+                targetH: targetHeight,
+                frameW: actualW,
+                frameH: actualH
+            )
+            let pixelFormat = CVPixelBufferGetPixelFormatType(pixelBuffer)
+            configureVideoInput(
+                width: encW,
+                height: encH,
+                pixelFormat: pixelFormat,
+                writer: writer
+            )
+        }
+
+        let pts = presentationTime(host: host, timestampNs: UInt64(bitPattern: timestampNs))
+
+        guard
+            writer.status == .writing,
+            let input = videoInput,
+            let adaptor = pixelBufferAdaptor
+        else {
+            if writer.status == .failed {
+                let err = writer.error as NSError?
+                NSLog("[TracksRecorder.Video] writer FAILED in frame handler: domain=%@ code=%ld desc=%@",
+                      err?.domain ?? "nil", err?.code ?? 0,
+                      err?.localizedDescription ?? "nil")
+            }
+            return
+        }
+
+        if !input.isReadyForMoreMediaData {
+            framesDropped += 1
+            if framesDropped % 30 == 1 {
+                NSLog("[TracksRecorder.Video] input not ready, dropped=%d", framesDropped)
+            }
+            return
+        }
+
+        let appended = adaptor.append(pixelBuffer, withPresentationTime: pts)
+        if appended {
+            samplesAppended += 1
+            let ptsUs = Int64(CMTimeGetSeconds(pts) * 1_000_000)
+            if firstSamplePtsUs < 0 || ptsUs < firstSamplePtsUs {
+                firstSamplePtsUs = ptsUs
+            }
+            if ptsUs > lastSamplePtsUs {
+                lastSamplePtsUs = ptsUs
+            }
+            if samplesAppended == 1 {
+                NSLog("[TracksRecorder.Video] first frame appended OK pts=%lldus", ptsUs)
+            }
+        } else {
+            // `adaptor.append` returns false without a direct reason —
+            // inspect `writer.error` and the input's ready flag for
+            // diagnostics.
+            frameAppendFailures += 1
+            let writerErr = writer.error as NSError?
+            NSLog(
+                "[TracksRecorder.Video] adaptor.append FAILED #%d writerStatus=%ld writerErr domain=%@ code=%ld desc=%@ inputReady=%@",
+                frameAppendFailures,
+                writer.status.rawValue,
+                writerErr?.domain ?? "nil",
+                writerErr?.code ?? 0,
+                writerErr?.localizedDescription ?? "nil",
+                input.isReadyForMoreMediaData ? "YES" : "NO"
+            )
+        }
+    }
+
+    // MARK: - Asset writer input setup
+
+    /// Picks the encoder dimensions, preferring the caller-supplied
+    /// target but oriented to match the frame buffer. Publish options
+    /// are expressed in WebRTC's canonical landscape form; the buffer
+    /// may be portrait — swap target axes when they disagree. Falls
+    /// back to the frame's own dimensions if no target was supplied.
+    private func resolveEncoderDimensions(
+        targetW: Int32,
+        targetH: Int32,
+        frameW: Int32,
+        frameH: Int32
+    ) -> (Int32, Int32) {
+        guard targetW > 0 && targetH > 0 else { return (frameW, frameH) }
+        let framePortrait = frameH > frameW
+        let targetPortrait = targetH > targetW
+        if framePortrait == targetPortrait {
+            return (targetW, targetH)
+        }
+        return (targetH, targetW)
+    }
+
+    /// Builds the H.264 `AVAssetWriterInput` and its pixel-buffer
+    /// adaptor. AVFoundation owns the encoder and falls back from
+    /// hardware to software if the H.264 pool is contended.
+    private func configureVideoInput(
+        width: Int32,
+        height: Int32,
+        pixelFormat: OSType,
+        writer: AVAssetWriter
+    ) {
+        // `AVVideoScalingModeResizeAspect` lets AVFoundation scale
+        // incoming pixel buffers to the encoder's output dimensions
+        // while preserving aspect ratio.
+        let settings: [String: Any] = [
+            AVVideoCodecKey: AVVideoCodecType.h264,
+            AVVideoWidthKey: width,
+            AVVideoHeightKey: height,
+            AVVideoScalingModeKey: AVVideoScalingModeResizeAspect,
+            AVVideoCompressionPropertiesKey: [
+                AVVideoAverageBitRateKey: VideoPipeline.bitRate,
+            ],
+        ]
+        let input = AVAssetWriterInput(mediaType: .video, outputSettings: settings)
+        input.expectsMediaDataInRealTime = true
+
+        // Omit width/height in source attributes so the adaptor
+        // accepts buffers at any layer resolution the SFU forwards.
+        let pbAttributes: [String: Any] = [
+            kCVPixelBufferPixelFormatTypeKey as String: pixelFormat,
+        ]
+        let adaptor = AVAssetWriterInputPixelBufferAdaptor(
+            assetWriterInput: input,
+            sourcePixelBufferAttributes: pbAttributes
+        )
+
+        guard writer.canAdd(input) else {
+            NSLog("[TracksRecorder.Video] writer cannot add encoding video input")
+            host?.onFatalError(makeRecorderError("video_input_add_failed", code: 4))
+            return
+        }
+
+        writer.add(input)
+        videoInput = input
+        pixelBufferAdaptor = adaptor
+        inputAdded = true
+        host?.onTrackAdded()
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.39.0",
+  "version": "1.40.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -51,8 +51,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.54.0",
-    "@stream-io/video-react-bindings": "1.17.0",
+    "@stream-io/video-client": "1.55.0",
+    "@stream-io/video-react-bindings": "1.18.0",
     "intl-pluralrules": "2.0.1",
     "react-native-url-polyfill": "^3.0.0",
     "rxjs": "~7.8.2",
@@ -117,14 +117,16 @@
     "@react-native-firebase/messaging": "^24.0.0",
     "@react-native/babel-preset": "0.85.3",
     "@react-native/metro-config": "0.85.3",
-    "@stream-io/noise-cancellation-react-native": "^0.8.0",
-    "@stream-io/react-native-callingx": "^0.5.1",
+    "@stream-io/noise-cancellation-react-native": "^0.9.0",
+    "@stream-io/react-native-callingx": "^0.6.0",
     "@stream-io/react-native-webrtc": "145.0.0",
-    "@stream-io/video-filters-react-native": "^0.13.0",
+    "@stream-io/typescript-config": "^0.0.0",
+    "@stream-io/video-filters-react-native": "^0.14.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.3.3",
     "@tsconfig/node18": "^18.2.6",
     "@types/jest": "^29.5.14",
+    "@types/node": "^25.9.3",
     "@types/react": "~19.2.15",
     "@types/react-test-renderer": "^19.1.0",
     "expo": "~56.0.9",
@@ -134,14 +136,14 @@
     "jest": "^29.7.0",
     "react": "19.2.3",
     "react-native": "0.85.3",
-    "react-native-builder-bob": "~0.23",
+    "react-native-builder-bob": "^0.41.0",
     "react-native-gesture-handler": "~2.31.2",
     "react-native-reanimated": "4.3.1",
     "react-native-svg": "15.15.5",
     "react-native-worklets": "0.8.3",
     "react-test-renderer": "19.2.3",
     "rimraf": "^6.1.3",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/Call/CallContent/CallContent.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  NativeModules,
-  Platform,
-  StyleSheet,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import { NativeModules, Platform, StyleSheet, View } from 'react-native';
 import {
   CallParticipantsGrid,
   type CallParticipantsGridProps,
@@ -139,17 +133,44 @@ export const CallContent = ({
 
   useAutoEnterPiPEffect(disablePictureInPicture);
 
-  const [remoteParticipants, setRemoteParticipants] = useState<
-    StreamVideoParticipant[]
-  >(() => call?.state.remoteParticipants ?? []);
+  // CallContent only needs to know whether to show the floating view (0 / 1-2 / 3+
+  // remote participants) and the single participant to render in it. Storing a count
+  // bucket plus that one participant - instead of the whole array - means CallContent
+  // re-renders only on bucket-boundary crossings, not on every debounced emission.
+  const [floatingViewState, setFloatingViewState] = useState<{
+    remoteCountBucket: number;
+    firstRemoteParticipant: StreamVideoParticipant | undefined;
+  }>(() => {
+    const remote = call?.state.remoteParticipants ?? [];
+    return {
+      remoteCountBucket: Math.min(remote.length, 3),
+      firstRemoteParticipant: remote.length === 1 ? remote[0] : undefined,
+    };
+  });
   useEffect(() => {
     if (!call) {
-      setRemoteParticipants([]);
+      setFloatingViewState({
+        remoteCountBucket: 0,
+        firstRemoteParticipant: undefined,
+      });
       return;
     }
     const sub = call.state.remoteParticipants$
       .pipe(debounceTime(300))
-      .subscribe(setRemoteParticipants);
+      .subscribe((remoteParticipants) => {
+        const remoteCountBucket = Math.min(remoteParticipants.length, 3);
+        const firstRemoteParticipant =
+          remoteParticipants.length === 1 ? remoteParticipants[0] : undefined;
+        setFloatingViewState((prev) => {
+          if (
+            prev.remoteCountBucket === remoteCountBucket &&
+            prev.firstRemoteParticipant === firstRemoteParticipant
+          ) {
+            return prev;
+          }
+          return { remoteCountBucket, firstRemoteParticipant };
+        });
+      });
     return () => sub.unsubscribe();
   }, [call]);
   const localParticipant = useLocalParticipant();
@@ -158,38 +179,39 @@ export const CallContent = ({
   const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
 
   useEffect(() => {
-    if (isInPiPMode && Platform.OS === 'android') {
-      const unsubFunc = call?.on('call.ended', () => {
+    if (!isInPiPMode || Platform.OS !== 'android') return;
+    const unsubFunc = call?.on('call.ended', () => {
+      videoLoggerSystem
+        .getLogger('CallContent')
+        .debug(`exiting PiP mode due to call.ended`);
+      NativeModules.StreamVideoReactNative.exitPipMode();
+    });
+    const subscription = call?.state.callingState$.subscribe((state) => {
+      if (state === CallingState.LEFT) {
         videoLoggerSystem
           .getLogger('CallContent')
-          .debug(`exiting PiP mode due to call.ended`);
+          .debug(`exiting PiP mode due to callingState: LEFT`);
         NativeModules.StreamVideoReactNative.exitPipMode();
-      });
-      const subscription = call?.state.callingState$.subscribe((state) => {
-        if (state === CallingState.LEFT) {
-          videoLoggerSystem
-            .getLogger('CallContent')
-            .debug(`exiting PiP mode due to callingState: LEFT`);
-          NativeModules.StreamVideoReactNative.exitPipMode();
-        }
-      });
-      return () => {
-        unsubFunc?.();
-        subscription?.unsubscribe();
-      };
-    }
+      }
+    });
+    return () => {
+      unsubFunc?.();
+      subscription?.unsubscribe();
+    };
   }, [isInPiPMode, call]);
 
+  const { remoteCountBucket, firstRemoteParticipant } = floatingViewState;
+
   const showFloatingView =
     !showSpotlightLayout &&
     !isInPiPMode &&
-    remoteParticipants.length > 0 &&
-    remoteParticipants.length < 3;
+    remoteCountBucket > 0 &&
+    remoteCountBucket < 3;
 
   const isRemoteParticipantInFloatingView =
     showFloatingView &&
     showRemoteParticipantInFloatingView &&
-    remoteParticipants.length === 1;
+    remoteCountBucket === 1;
 
   /**
    * This hook is used to handle IncallManager specs of the application.
@@ -203,10 +225,11 @@ export const CallContent = ({
         prevInCallManager.stop();
       };
     }
+    return undefined;
   }, []);
 
   const handleFloatingViewParticipantSwitch = () => {
-    if (remoteParticipants.length !== 1) {
+    if (remoteCountBucket !== 1) {
       return;
     }
     setShowRemoteParticipantInFloatingView((prevState) => !prevState);
@@ -242,10 +265,6 @@ export const CallContent = ({
     supportedReactions,
   };
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
     <>
       {!disablePictureInPicture && (
@@ -254,7 +273,13 @@ export const CallContent = ({
           mirror={mirror}
         />
       )}
-      <View style={[styles.container, landscapeStyles, callContent.container]}>
+      <View
+        style={[
+          styles.container,
+          landscape ? landscapeStyles.row : landscapeStyles.column,
+          callContent.container,
+        ]}
+      >
         <View style={[styles.content, callContent.callParticipantsContainer]}>
           <View
             style={[
@@ -270,7 +295,7 @@ export const CallContent = ({
               <FloatingParticipantView
                 participant={
                   isRemoteParticipantInFloatingView
-                    ? remoteParticipants[0]
+                    ? firstRemoteParticipant
                     : localParticipant
                 }
                 onPressHandler={handleFloatingViewParticipantSwitch}
@@ -299,6 +324,11 @@ export const CallContent = ({
   );
 };
 
+const landscapeStyles = StyleSheet.create({
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+});
+
 const useStyles = () => {
   const { theme } = useTheme();
   return useMemo(

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { debounceTime } from 'rxjs';
 import {
@@ -76,10 +76,6 @@ export const CallParticipantsGrid = ({
       sub2.unsubscribe();
     };
   }, [call]);
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   const isInPiPMode = useIsInPiPMode();
 
   const showFloatingView =
@@ -125,7 +121,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
-        landscapeStyles,
+        landscape ? styles.row : styles.column,
         { backgroundColor: colors.sheetPrimary },
         callParticipantsGrid.container,
       ]}
@@ -145,4 +141,6 @@ export const CallParticipantsGrid = ({
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
 });

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -4,7 +4,7 @@ import {
   type StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { debounceTime } from 'rxjs';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
@@ -91,13 +91,28 @@ export const CallParticipantsSpotlight = ({
     mirror,
   };
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
-  const spotlightContainerLandscapeStyles: ViewStyle = {
-    marginHorizontal: landscape ? 0 : variants.spacingSizes.xs,
-  };
+  // Memoized so the spotlight tile's `style` prop stays referentially stable;
+  // otherwise the fresh array literal defeats ParticipantView's React.memo.
+  const spotlightParticipantStyle = useMemo(
+    () =>
+      isUserAloneInCall
+        ? [
+            styles.fullScreenSpotlightContainer,
+            callParticipantsSpotlight.fullScreenSpotlightContainer,
+          ]
+        : [
+            styles.spotlightContainer,
+            { marginHorizontal: landscape ? 0 : variants.spacingSizes.xs },
+            callParticipantsSpotlight.spotlightContainer,
+          ],
+    [
+      isUserAloneInCall,
+      landscape,
+      styles,
+      callParticipantsSpotlight,
+      variants.spacingSizes.xs,
+    ],
+  );
 
   const showShareScreenOverlay =
     participantInSpotlight?.isLocalParticipant &&
@@ -109,7 +124,7 @@ export const CallParticipantsSpotlight = ({
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
-        landscapeStyles,
+        landscape ? landscapeStyles.row : landscapeStyles.column,
         callParticipantsSpotlight.container,
       ]}
     >
@@ -120,18 +135,7 @@ export const CallParticipantsSpotlight = ({
         ) : (
           <ParticipantView
             participant={participantInSpotlight}
-            style={
-              isUserAloneInCall
-                ? [
-                    styles.fullScreenSpotlightContainer,
-                    callParticipantsSpotlight.fullScreenSpotlightContainer,
-                  ]
-                : [
-                    styles.spotlightContainer,
-                    spotlightContainerLandscapeStyles,
-                    callParticipantsSpotlight.spotlightContainer,
-                  ]
-            }
+            style={spotlightParticipantStyle}
             objectFit={isScreenShareOnSpotlight ? 'contain' : 'cover'}
             trackType={
               isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
@@ -166,6 +170,11 @@ export const CallParticipantsSpotlight = ({
   );
 };
 
+const landscapeStyles = StyleSheet.create({
+  row: { flexDirection: 'row' },
+  column: { flexDirection: 'column' },
+});
+
 const useStyles = () => {
   const { theme } = useTheme();
   return useMemo(