@livekit/react-native 2.6.5 → 2.7.1

package/README.md

@@ -89,6 +89,7 @@ In your [AppDelegate.m](https://github.com/livekit/client-sdk-react-native/blob/
 
 ```objc
 #import "LivekitReactNative.h"
+#import "WebRTCModuleOptions.h"
 
 @implementation AppDelegate
 
@@ -97,6 +98,12 @@ In your [AppDelegate.m](https://github.com/livekit/client-sdk-react-native/blob/
   // Place this above any other RN related initialization
   [LivekitReactNative setup];
 
+  // Uncomment the following lines if you want to use the camera in the background
+  // Requires voip background mode and iOS 18+.
+
+  // WebRTCModuleOptions *options = [WebRTCModuleOptions sharedInstance];
+  // options.enableMultitaskingCameraAccess = YES;
+
   //...
 }
 ```

package/lib/commonjs/components/VideoTrack.js

@@ -29,13 +29,14 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @returns A React component that renders the given video track.
  * @public
  */
-const VideoTrack = ({
+const VideoTrack = exports.VideoTrack = /*#__PURE__*/(0, _react.forwardRef)(({
   style = {},
   trackRef,
   objectFit = 'cover',
   zOrder,
-  mirror
-}) => {
+  mirror,
+  iosPIP
+}, ref) => {
   const [elementInfo] = (0, _react.useState)(() => {
     var _trackRef$publication;
     let info = new VideoTrackElementInfo();
@@ -43,7 +44,8 @@ const VideoTrack = ({
     return info;
   });
   const layoutOnChange = (0, _react.useCallback)(event => elementInfo.onLayout(event), [elementInfo]);
-  const visibilityOnChange = (0, _react.useCallback)(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const iosPIPEnabled = (iosPIP === null || iosPIP === void 0 ? void 0 : iosPIP.enabled) ?? false;
+  const visibilityOnChange = (0, _react.useCallback)(isVisible => elementInfo.onVisibility(isVisible || iosPIPEnabled), [elementInfo, iosPIPEnabled]);
   const videoTrack = trackRef === null || trackRef === void 0 ? void 0 : trackRef.publication.track;
   const shouldObserveVisibility = (0, _react.useMemo)(() => {
     return videoTrack instanceof _livekitClient.RemoteVideoTrack && videoTrack.isAdaptiveStream;
@@ -73,6 +75,32 @@ const VideoTrack = ({
       return () => {};
     }
   }, [videoTrack, elementInfo]);
+  let videoView;
+  if (!iosPIP || _reactNative.Platform.OS !== 'ios') {
+    videoView = /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // @ts-ignore
+      ,
+      ref: ref
+    });
+  } else {
+    videoView = /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCPIPView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // TODO: fix this up in react-native-webrtc side.
+      // @ts-expect-error
+      ,
+      iosPIP: iosPIP,
+      ref: ref
+    });
+  }
   return /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       ...style,
@@ -84,15 +112,8 @@ const VideoTrack = ({
     style: styles.videoTrack,
     disabled: !shouldObserveVisibility,
     propKey: videoTrack
-  }, /*#__PURE__*/React.createElement(_reactNativeWebrtc.RTCView, {
-    style: styles.videoTrack,
-    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
-    objectFit: objectFit,
-    zOrder: zOrder,
-    mirror: mirror
-  })));
-};
-exports.VideoTrack = VideoTrack;
+  }, videoView));
+});
 const styles = _reactNative.StyleSheet.create({
   container: {},
   videoTrack: {

package/lib/commonjs/components/VideoTrack.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_livekitClient","_reactNativeWebrtc","_ViewPortDetector","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_defineProperty","_toPropertyKey","value","enumerable","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","useState","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","useCallback","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","useMemo","RemoteVideoTrack","isAdaptiveStream","mediaStream","setMediaStream","useEffect","LocalVideoTrack","onRestarted","on","TrackEvent","Restarted","off","observeElementInfo","stopObservingElementInfo","createElement","View","styles","container","onChange","disabled","propKey","RTCView","streamURL","toURL","exports","StyleSheet","create","flex","width","constructor","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = ({\n  style = {},\n  trackRef,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: VideoTrackProps) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoTrackElementInfo();\n    info.id = trackRef?.publication?.trackSid;\n    return info;\n  });\n\n  const layoutOnChange = useCallback(\n    (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n    [elementInfo]\n  );\n  const visibilityOnChange = useCallback(\n    (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n    [elementInfo]\n  );\n\n  const videoTrack = trackRef?.publication.track;\n\n  const shouldObserveVisibility = useMemo(() => {\n    return (\n      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n    );\n  }, [videoTrack]);\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n      <ViewPortDetector\n        onChange={visibilityOnChange}\n        style={styles.videoTrack}\n        disabled={!shouldObserveVisibility}\n        propKey={videoTrack}\n      >\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_livekitClient","_reactNativeWebrtc","_ViewPortDetector","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_defineProperty","_toPropertyKey","value","enumerable","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","VideoTrack","exports","forwardRef","style","trackRef","objectFit","zOrder","mirror","iosPIP","ref","elementInfo","useState","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","useCallback","event","onLayout","iosPIPEnabled","enabled","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","useMemo","RemoteVideoTrack","isAdaptiveStream","mediaStream","setMediaStream","useEffect","LocalVideoTrack","onRestarted","on","TrackEvent","Restarted","off","observeElementInfo","stopObservingElementInfo","videoView","Platform","OS","createElement","RTCView","styles","streamURL","toURL","RTCPIPView","View","container","onChange","disabled","propKey","StyleSheet","create","flex","width","constructor","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  Platform,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport {\n  RTCView,\n  RTCPIPView,\n  type RTCIOSPIPOptions,\n} from '@livekit/react-native-webrtc';\nimport {\n  Component,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n\n  /**\n   * Picture in picture options for this view. Disabled if not supplied.\n   *\n   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.\n   *\n   * If `iosPIP.enabled` is true, the methods `startIOSPIP` and `stopIOSPIP`\n   * can be used to manually trigger the PIP mode.\n   *\n   * `iosPIP.startAutomatically` can be used to automatically\n   * enter PIP when backgrounding the app.\n   *\n   * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.\n   *\n   * @example\n   * ```tsx\n   * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';\n   *\n   * // Obtain a ref to the view\n   * const videoRef = useRef<Component>(null);\n   * const videoView = (\n   *   <VideoTrack\n   *      ref={videoRef}\n   *      iosPIP={{\n   *        enabled: true,\n   *        startAutomatically: true,\n   *        preferredSize: {\n   *          width: 9,\n   *          height: 16,\n   *        },\n   *      }}\n   *      ...\n   *   />\n   * );\n   *\n   * // Start/stop manually\n   * startIOSPIP(videoRef);\n   * stopIOSPIP(videoRef);\n   * ```\n   *\n   */\n  iosPIP?: RTCIOSPIPOptions & {\n    preferredSize: {\n      width: number;\n      height: number;\n    };\n    fallbackView?: ReactNode;\n  };\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = forwardRef<Component, VideoTrackProps>(\n  (\n    {\n      style = {},\n      trackRef,\n      objectFit = 'cover',\n      zOrder,\n      mirror,\n      iosPIP,\n    }: VideoTrackProps,\n    ref\n  ) => {\n    const [elementInfo] = useState(() => {\n      let info = new VideoTrackElementInfo();\n      info.id = trackRef?.publication?.trackSid;\n      return info;\n    });\n\n    const layoutOnChange = useCallback(\n      (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n      [elementInfo]\n    );\n\n    const iosPIPEnabled = iosPIP?.enabled ?? false;\n    const visibilityOnChange = useCallback(\n      (isVisible: boolean) =>\n        elementInfo.onVisibility(isVisible || iosPIPEnabled),\n      [elementInfo, iosPIPEnabled]\n    );\n\n    const videoTrack = trackRef?.publication.track;\n\n    const shouldObserveVisibility = useMemo(() => {\n      return (\n        videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n      );\n    }, [videoTrack]);\n\n    const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n    useEffect(() => {\n      setMediaStream(videoTrack?.mediaStream);\n      if (videoTrack instanceof LocalVideoTrack) {\n        const onRestarted = (track: Track | null) => {\n          setMediaStream(track?.mediaStream);\n        };\n        videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n        return () => {\n          videoTrack.off(TrackEvent.Restarted, onRestarted);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack]);\n\n    useEffect(() => {\n      if (\n        videoTrack instanceof RemoteVideoTrack &&\n        videoTrack.isAdaptiveStream\n      ) {\n        videoTrack?.observeElementInfo(elementInfo);\n        return () => {\n          videoTrack?.stopObservingElementInfo(elementInfo);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack, elementInfo]);\n\n    let videoView;\n    if (!iosPIP || Platform.OS !== 'ios') {\n      videoView = (\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // @ts-ignore\n          ref={ref}\n        />\n      );\n    } else {\n      videoView = (\n        <RTCPIPView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // TODO: fix this up in react-native-webrtc side.\n          // @ts-expect-error\n          iosPIP={iosPIP}\n          ref={ref}\n        />\n      );\n    }\n    return (\n      <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n        <ViewPortDetector\n          onChange={visibilityOnChange}\n          style={styles.videoTrack}\n          disabled={!shouldObserveVisibility}\n          propKey={videoTrack}\n        >\n          {videoView}\n        </ViewPortDetector>\n      </View>\n    );\n  }\n);\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,IAAAC,KAAA,GAAAH,MAAA;AAE/B,IAAAI,YAAA,GAAAF,OAAA;AAOA,IAAAG,cAAA,GAAAH,OAAA;AAMA,IAAAI,kBAAA,GAAAJ,OAAA;AAeA,IAAAK,iBAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAkD,SAAAM,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAAA,SAAAW,gBAAApB,CAAA,EAAAK,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAgB,cAAA,CAAAhB,CAAA,MAAAL,CAAA,GAAAY,MAAA,CAAAC,cAAA,CAAAb,CAAA,EAAAK,CAAA,IAAAiB,KAAA,EAAAhB,CAAA,EAAAiB,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAzB,CAAA,CAAAK,CAAA,IAAAC,CAAA,EAAAN,CAAA;AAAA,SAAAqB,eAAAf,CAAA,QAAAY,CAAA,GAAAQ,YAAA,CAAApB,CAAA,uCAAAY,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAQ,aAAApB,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAN,CAAA,GAAAM,CAAA,CAAAqB,MAAA,CAAAC,WAAA,kBAAA5B,CAAA,QAAAkB,CAAA,GAAAlB,CAAA,CAAAiB,IAAA,CAAAX,CAAA,EAAAD,CAAA,uCAAAa,CAAA,SAAAA,CAAA,YAAAW,SAAA,yEAAAxB,CAAA,GAAAyB,MAAA,GAAAC,MAAA,EAAAzB,CAAA;AAGlD;AACA;AACA;AACA;;AA2FA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM0B,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CACE;EACEC,KAAK,GAAG,CAAC,CAAC;EACVC,QAAQ;EACRC,SAAS,GAAG,OAAO;EACnBC,MAAM;EACNC,MAAM;EACNC;AACe,CAAC,EAClBC,GAAG,KACA;EACH,MAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACnC,IAAIC,IAAI,GAAG,IAAIC,qBAAqB,CAAC,CAAC;IACtCD,IAAI,CAACE,EAAE,GAAGX,QAAQ,aAARA,QAAQ,gBAAAQ,qBAAA,GAARR,QAAQ,CAAEY,WAAW,cAAAJ,qBAAA,uBAArBA,qBAAA,CAAuBK,QAAQ;IACzC,OAAOJ,IAAI;EACb,CAAC,CAAC;EAEF,MAAMK,cAAc,GAAG,IAAAC,kBAAW,EAC/BC,KAAwB,IAAKV,WAAW,CAACW,QAAQ,CAACD,KAAK,CAAC,EACzD,CAACV,WAAW,CACd,CAAC;EAED,MAAMY,aAAa,GAAG,CAAAd,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEe,OAAO,KAAI,KAAK;EAC9C,MAAMC,kBAAkB,GAAG,IAAAL,kBAAW,EACnCM,SAAkB,IACjBf,WAAW,CAACgB,YAAY,CAACD,SAAS,IAAIH,aAAa,CAAC,EACtD,CAACZ,WAAW,EAAEY,aAAa,CAC7B,CAAC;EAED,MAAMK,UAAU,GAAGvB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEY,WAAW,CAACY,KAAK;EAE9C,MAAMC,uBAAuB,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC5C,OACEH,UAAU,YAAYI,+BAAgB,IAAIJ,UAAU,CAACK,gBAAgB;EAEzE,CAAC,EAAE,CAACL,UAAU,CAAC,CAAC;EAEhB,MAAM,CAACM,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAvB,eAAQ,EAACgB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEM,WAAW,CAAC;EACvE,IAAAE,gBAAS,EAAC,MAAM;IACdD,cAAc,CAACP,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEM,WAAW,CAAC;IACvC,IAAIN,UAAU,YAAYS,8BAAe,EAAE;MACzC,MAAMC,WAAW,GAAIT,KAAmB,IAAK;QAC3CM,cAAc,CAACN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,WAAW,CAAC;MACpC,CAAC;MACDN,UAAU,CAACW,EAAE,CAACC,yBAAU,CAACC,SAAS,EAAEH,WAAW,CAAC;MAEhD,OAAO,MAAM;QACXV,UAAU,CAACc,GAAG,CAACF,yBAAU,CAACC,SAAS,EAAEH,WAAW,CAAC;MACnD,CAAC;IACH,CAAC,MAAM;MACL,OAAO,MAAM,CAAC,CAAC;IACjB;EACF,CAAC,EAAE,CAACV,UAAU,CAAC,CAAC;EAEhB,IAAAQ,gBAAS,EAAC,MAAM;IACd,IACER,UAAU,YAAYI,+BAAgB,IACtCJ,UAAU,CAACK,gBAAgB,EAC3B;MACAL,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEe,kBAAkB,CAAChC,WAAW,CAAC;MAC3C,OAAO,MAAM;QACXiB,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEgB,wBAAwB,CAACjC,WAAW,CAAC;MACnD,CAAC;IACH,CAAC,MAAM;MACL,OAAO,MAAM,CAAC,CAAC;IACjB;EACF,CAAC,EAAE,CAACiB,UAAU,EAAEjB,WAAW,CAAC,CAAC;EAE7B,IAAIkC,SAAS;EACb,IAAI,CAACpC,MAAM,IAAIqC,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACpCF,SAAS,gBACPlF,KAAA,CAAAqF,aAAA,CAAClF,kBAAA,CAAAmF,OAAO;MACN7C,KAAK,EAAE8C,MAAM,CAACtB,UAAW;MACzBuB,SAAS,EAAE,CAAAjB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEkB,KAAK,CAAC,CAAC,KAAI,EAAG;MACtC9C,SAAS,EAAEA,SAAU;MACrBC,MAAM,EAAEA,MAAO;MACfC,MAAM,EAAEA;MACR;MAAA;MACAE,GAAG,EAAEA;IAAI,CACV,CACF;EACH,CAAC,MAAM;IACLmC,SAAS,gBACPlF,KAAA,CAAAqF,aAAA,CAAClF,kBAAA,CAAAuF,UAAU;MACTjD,KAAK,EAAE8C,MAAM,CAACtB,UAAW;MACzBuB,SAAS,EAAE,CAAAjB,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEkB,KAAK,CAAC,CAAC,KAAI,EAAG;MACtC9C,SAAS,EAAEA,SAAU;MACrBC,MAAM,EAAEA,MAAO;MACfC,MAAM,EAAEA;MACR;MACA;MAAA;MACAC,MAAM,EAAEA,MAAO;MACfC,GAAG,EAAEA;IAAI,CACV,CACF;EACH;EACA,oBACE/C,KAAA,CAAAqF,aAAA,CAACpF,YAAA,CAAA0F,IAAI;IAAClD,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAE,GAAG8C,MAAM,CAACK;IAAU,CAAE;IAACjC,QAAQ,EAAEH;EAAe,gBACvExD,KAAA,CAAAqF,aAAA,CAACjF,iBAAA,CAAAI,OAAgB;IACfqF,QAAQ,EAAE/B,kBAAmB;IAC7BrB,KAAK,EAAE8C,MAAM,CAACtB,UAAW;IACzB6B,QAAQ,EAAE,CAAC3B,uBAAwB;IACnC4B,OAAO,EAAE9B;EAAW,GAEnBiB,SACe,CACd,CAAC;AAEX,CACF,CAAC;AAED,MAAMK,MAAM,GAAGS,uBAAU,CAACC,MAAM,CAAC;EAC/BL,SAAS,EAAE,CAAC,CAAC;EACb3B,UAAU,EAAE;IACViC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,MAAM/C,qBAAqB,CAAwB;EAAAgD,YAAA;IAAA1E,eAAA,kBAC/B,CAAC,CAAC;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA,iBAGX,CAAC;IAAAA,eAAA,kBACA,CAAC;IAAAA,eAAA,qBACE,KAAK;IAAAA,eAAA,kBACC,IAAI;IAAAA,eAAA;IAAAA,eAAA,2BAEJ,KAAK;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA,gBAGhB,MAAM,IAAI,CAAC2E,MAAM;IAAA3E,eAAA,iBAChB,MAAM,IAAI,CAAC4E,OAAO;EAAA;EAE3BC,OAAOA,CAAA,EAAS;IACd,IAAI,CAACC,UAAU,GAAG,IAAI;EACxB;EAEAC,aAAaA,CAAA,EAAS;IACpB,IAAI,CAACD,UAAU,GAAG,KAAK;EACzB;EAEA7C,QAAQA,CAACD,KAAwB,EAAE;IACjC,IAAI;MAAEyC,KAAK;MAAEO;IAAO,CAAC,GAAGhD,KAAK,CAACiD,WAAW,CAACC,MAAM;IAChD,IAAI,CAACP,MAAM,GAAGF,KAAK;IACnB,IAAI,CAACG,OAAO,GAAGI,MAAM;IAErB,IAAI,IAAI,CAACF,UAAU,EAAE;MAAA,IAAAK,kBAAA;MACnB,CAAAA,kBAAA,OAAI,CAACC,YAAY,cAAAD,kBAAA,eAAjBA,kBAAA,CAAAtF,IAAA,KAAoB,CAAC;IACvB;EACF;EAEAyC,YAAYA,CAACD,SAAkB,EAAE;IAC/B,IAAI,IAAI,CAACgD,OAAO,KAAKhD,SAAS,EAAE;MAC9B,IAAI,CAACgD,OAAO,GAAGhD,SAAS;MACxB,IAAI,CAACiD,mBAAmB,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC;MACrC,IAAI,IAAI,CAACV,UAAU,EAAE;QAAA,IAAAW,qBAAA;QACnB,CAAAA,qBAAA,OAAI,CAACC,uBAAuB,cAAAD,qBAAA,eAA5BA,qBAAA,CAAA5F,IAAA,KAA+B,CAAC;MAClC;IACF;EACF;AACF","ignoreList":[]}

package/lib/commonjs/hooks/useTrackVolume.js

@@ -20,8 +20,8 @@ function useTrackVolume(trackOrTrackReference) {
   const track = trackOrTrackReference instanceof _livekitClient.Track ? trackOrTrackReference : trackOrTrackReference === null || trackOrTrackReference === void 0 || (_trackOrTrackReferenc = trackOrTrackReference.publication) === null || _trackOrTrackReferenc === void 0 ? void 0 : _trackOrTrackReferenc.track;
   const mediaStreamTrack = track === null || track === void 0 ? void 0 : track.mediaStreamTrack;
   const hasMediaStreamTrack = mediaStreamTrack != null;
-  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
-  const mediaStreamTrackId = mediaStreamTrack.id;
+  const peerConnectionId = (mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack._peerConnectionId) ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.id;
   let [volume, setVolume] = (0, _react.useState)(0.0);
   (0, _react.useEffect)(() => {
     let listener = Object();

package/lib/commonjs/hooks/useTrackVolume.js.map

@@ -1 +1 @@
-{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","Track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","mediaStreamTrackId","id","volume","setVolume","useState","useEffect","listener","Object","reactTag","LiveKitModule","createVolumeProcessor","addListener","event","removeListener","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack.id;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);\n\n  return volume;\n}\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA8C,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYG,oBAAK,GAClCH,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEI,WAAW,cAAAH,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAMG,gBAAgB,GAAGH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,gBAAgB;EAChD,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAGF,gBAAgB,CAACE,gBAAgB,IAAI,CAAC,CAAC;EAChE,MAAMC,kBAAkB,GAAGH,gBAAgB,CAACI,EAAE;EAE9C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,GAAG,CAAC;EACvC,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIV,mBAAmB,EAAE;MACvBU,QAAQ,GAAGC,uBAAa,CAACC,qBAAqB,CAC5CX,gBAAgB,EAChBC,kBACF,CAAC;MACD,IAAAW,yBAAW,EAACL,QAAQ,EAAE,qBAAqB,EAAGM,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACV,MAAM,IAAIM,QAAQ,IAAII,KAAK,CAACX,EAAE,KAAKO,QAAQ,EAAE;UACrDL,SAAS,CAACS,KAAK,CAACV,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIJ,mBAAmB,EAAE;QACvB,IAAAe,4BAAc,EAACP,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACK,qBAAqB,CACjCN,QAAQ,EACRT,gBAAgB,EAChBC,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACF,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}
+{"version":3,"names":["_livekitClient","require","_react","_EventEmitter","_LKNativeModule","_interopRequireDefault","e","__esModule","default","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","Track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","_peerConnectionId","mediaStreamTrackId","id","volume","setVolume","useState","useEffect","listener","Object","reactTag","LiveKitModule","createVolumeProcessor","addListener","event","removeListener","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\nimport type { MediaStreamTrack } from '@livekit/react-native-webrtc';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack as\n    | MediaStreamTrack\n    | undefined;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack?._peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack?.id;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);\n\n  return volume;\n}\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAA8C,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG9C;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYG,oBAAK,GAClCH,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEI,WAAW,cAAAH,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAMG,gBAAgB,GAAGH,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEG,gBAEnB;EACb,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAG,CAAAF,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEG,iBAAiB,KAAI,CAAC,CAAC;EAClE,MAAMC,kBAAkB,GAAGJ,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEK,EAAE;EAE/C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,GAAG,CAAC;EACvC,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIC,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIX,mBAAmB,EAAE;MACvBW,QAAQ,GAAGC,uBAAa,CAACC,qBAAqB,CAC5CZ,gBAAgB,EAChBE,kBACF,CAAC;MACD,IAAAW,yBAAW,EAACL,QAAQ,EAAE,qBAAqB,EAAGM,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACV,MAAM,IAAIM,QAAQ,IAAII,KAAK,CAACX,EAAE,KAAKO,QAAQ,EAAE;UACrDL,SAAS,CAACS,KAAK,CAACV,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIL,mBAAmB,EAAE;QACvB,IAAAgB,4BAAc,EAACP,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZC,uBAAa,CAACK,qBAAqB,CACjCN,QAAQ,EACRV,gBAAgB,EAChBE,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACH,mBAAmB,EAAEC,gBAAgB,EAAEE,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}

package/lib/module/components/VideoTrack.js

@@ -2,10 +2,10 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { LocalVideoTrack, TrackEvent } from 'livekit-client';
-import { RTCView } from '@livekit/react-native-webrtc';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { RTCView, RTCPIPView } from '@livekit/react-native-webrtc';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 
@@ -22,13 +22,14 @@ import ViewPortDetector from './ViewPortDetector';
  * @returns A React component that renders the given video track.
  * @public
  */
-export const VideoTrack = ({
+export const VideoTrack = /*#__PURE__*/forwardRef(({
   style = {},
   trackRef,
   objectFit = 'cover',
   zOrder,
-  mirror
-}) => {
+  mirror,
+  iosPIP
+}, ref) => {
   const [elementInfo] = useState(() => {
     var _trackRef$publication;
     let info = new VideoTrackElementInfo();
@@ -36,7 +37,8 @@ export const VideoTrack = ({
     return info;
   });
   const layoutOnChange = useCallback(event => elementInfo.onLayout(event), [elementInfo]);
-  const visibilityOnChange = useCallback(isVisible => elementInfo.onVisibility(isVisible), [elementInfo]);
+  const iosPIPEnabled = (iosPIP === null || iosPIP === void 0 ? void 0 : iosPIP.enabled) ?? false;
+  const visibilityOnChange = useCallback(isVisible => elementInfo.onVisibility(isVisible || iosPIPEnabled), [elementInfo, iosPIPEnabled]);
   const videoTrack = trackRef === null || trackRef === void 0 ? void 0 : trackRef.publication.track;
   const shouldObserveVisibility = useMemo(() => {
     return videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream;
@@ -66,6 +68,32 @@ export const VideoTrack = ({
       return () => {};
     }
   }, [videoTrack, elementInfo]);
+  let videoView;
+  if (!iosPIP || Platform.OS !== 'ios') {
+    videoView = /*#__PURE__*/React.createElement(RTCView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // @ts-ignore
+      ,
+      ref: ref
+    });
+  } else {
+    videoView = /*#__PURE__*/React.createElement(RTCPIPView, {
+      style: styles.videoTrack,
+      streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
+      objectFit: objectFit,
+      zOrder: zOrder,
+      mirror: mirror
+      // TODO: fix this up in react-native-webrtc side.
+      // @ts-expect-error
+      ,
+      iosPIP: iosPIP,
+      ref: ref
+    });
+  }
   return /*#__PURE__*/React.createElement(View, {
     style: {
       ...style,
@@ -77,14 +105,8 @@ export const VideoTrack = ({
     style: styles.videoTrack,
     disabled: !shouldObserveVisibility,
     propKey: videoTrack
-  }, /*#__PURE__*/React.createElement(RTCView, {
-    style: styles.videoTrack,
-    streamURL: (mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.toURL()) ?? '',
-    objectFit: objectFit,
-    zOrder: zOrder,
-    mirror: mirror
-  })));
-};
+  }, videoView));
+});
 const styles = StyleSheet.create({
   container: {},
   videoTrack: {

package/lib/module/components/VideoTrack.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoTrack","style","trackRef","objectFit","zOrder","mirror","elementInfo","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","on","Restarted","off","observeElementInfo","stopObservingElementInfo","createElement","styles","container","onChange","disabled","propKey","streamURL","toURL","create","flex","width","constructor","_defineProperty","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","call","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport { RTCView } from '@livekit/react-native-webrtc';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = ({\n  style = {},\n  trackRef,\n  objectFit = 'cover',\n  zOrder,\n  mirror,\n}: VideoTrackProps) => {\n  const [elementInfo] = useState(() => {\n    let info = new VideoTrackElementInfo();\n    info.id = trackRef?.publication?.trackSid;\n    return info;\n  });\n\n  const layoutOnChange = useCallback(\n    (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n    [elementInfo]\n  );\n  const visibilityOnChange = useCallback(\n    (isVisible: boolean) => elementInfo.onVisibility(isVisible),\n    [elementInfo]\n  );\n\n  const videoTrack = trackRef?.publication.track;\n\n  const shouldObserveVisibility = useMemo(() => {\n    return (\n      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n    );\n  }, [videoTrack]);\n\n  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n  useEffect(() => {\n    setMediaStream(videoTrack?.mediaStream);\n    if (videoTrack instanceof LocalVideoTrack) {\n      const onRestarted = (track: Track | null) => {\n        setMediaStream(track?.mediaStream);\n      };\n      videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n      return () => {\n        videoTrack.off(TrackEvent.Restarted, onRestarted);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack]);\n\n  useEffect(() => {\n    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {\n      videoTrack?.observeElementInfo(elementInfo);\n      return () => {\n        videoTrack?.stopObservingElementInfo(elementInfo);\n      };\n    } else {\n      return () => {};\n    }\n  }, [videoTrack, elementInfo]);\n\n  return (\n    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n      <ViewPortDetector\n        onChange={visibilityOnChange}\n        style={styles.videoTrack}\n        disabled={!shouldObserveVisibility}\n        propKey={videoTrack}\n      >\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n        />\n      </ViewPortDetector>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Platform","StyleSheet","View","LocalVideoTrack","TrackEvent","RTCView","RTCPIPView","forwardRef","useCallback","useEffect","useMemo","useState","RemoteVideoTrack","ViewPortDetector","VideoTrack","style","trackRef","objectFit","zOrder","mirror","iosPIP","ref","elementInfo","_trackRef$publication","info","VideoTrackElementInfo","id","publication","trackSid","layoutOnChange","event","onLayout","iosPIPEnabled","enabled","visibilityOnChange","isVisible","onVisibility","videoTrack","track","shouldObserveVisibility","isAdaptiveStream","mediaStream","setMediaStream","onRestarted","on","Restarted","off","observeElementInfo","stopObservingElementInfo","videoView","OS","createElement","styles","streamURL","toURL","container","onChange","disabled","propKey","create","flex","width","constructor","_defineProperty","_width","_height","observe","_observing","stopObserving","height","nativeEvent","layout","_this$handleResize","handleResize","call","visible","visibilityChangedAt","Date","now","_this$handleVisibilit","handleVisibilityChanged"],"sources":["VideoTrack.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  type LayoutChangeEvent,\n  Platform,\n  StyleSheet,\n  View,\n  type ViewStyle,\n} from 'react-native';\nimport {\n  type ElementInfo,\n  LocalVideoTrack,\n  Track,\n  TrackEvent,\n} from 'livekit-client';\nimport {\n  RTCView,\n  RTCPIPView,\n  type RTCIOSPIPOptions,\n} from '@livekit/react-native-webrtc';\nimport {\n  Component,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { RemoteVideoTrack } from 'livekit-client';\nimport ViewPortDetector from './ViewPortDetector';\nimport type { TrackReference } from '@livekit/components-react';\n\n/**\n * Props for the VideoTrack component.\n * @public\n */\nexport type VideoTrackProps = {\n  /**\n   * The track reference to display. This should be a TrackReference object\n   * or undefined if no track is available.\n   */\n  trackRef: TrackReference | undefined;\n  /**\n   * Custom React Native styles for the video container.\n   */\n  style?: ViewStyle;\n  /**\n   * Specifies how the video content should be resized to fit its container.\n   * 'cover' (default): The video will fill the entire container, potentially cropping the video.\n   * 'contain': The entire video will be visible within the container, potentially leaving empty space.\n   */\n  objectFit?: 'cover' | 'contain' | undefined;\n  /**\n   * Indicates whether the video should be mirrored during rendering.\n   * This is commonly used for front-facing cameras.\n   */\n  mirror?: boolean;\n  /**\n   * Specifies the depth-stacking order of this video view in the stacking space of all video views.\n   * A larger zOrder value generally causes the view to cover those with lower values.\n   *\n   * The support for zOrder is platform-dependent and/or\n   * implementation-specific. Thus, specifying a value for zOrder is to be\n   * thought of as giving a hint rather than as imposing a requirement. For\n   * example, video renderers such as RTCView are commonly implemented using\n   * OpenGL and OpenGL views may have different numbers of layers in their\n   * stacking space. Android has three: a layer bellow the window (aka\n   * default), a layer bellow the window again but above the previous layer\n   * (aka media overlay), and above the window. Consequently, it is advisable\n   * to limit the number of utilized layers in the stacking space to the\n   * minimum sufficient for the desired display. For example, a video call\n   * application usually needs a maximum of two zOrder values: 0 for the\n   * remote video(s) which appear in the background, and 1 for the local\n   * video(s) which appear above the remote video(s).\n   */\n  zOrder?: number;\n\n  /**\n   * Picture in picture options for this view. Disabled if not supplied.\n   *\n   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.\n   *\n   * If `iosPIP.enabled` is true, the methods `startIOSPIP` and `stopIOSPIP`\n   * can be used to manually trigger the PIP mode.\n   *\n   * `iosPIP.startAutomatically` can be used to automatically\n   * enter PIP when backgrounding the app.\n   *\n   * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.\n   *\n   * @example\n   * ```tsx\n   * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';\n   *\n   * // Obtain a ref to the view\n   * const videoRef = useRef<Component>(null);\n   * const videoView = (\n   *   <VideoTrack\n   *      ref={videoRef}\n   *      iosPIP={{\n   *        enabled: true,\n   *        startAutomatically: true,\n   *        preferredSize: {\n   *          width: 9,\n   *          height: 16,\n   *        },\n   *      }}\n   *      ...\n   *   />\n   * );\n   *\n   * // Start/stop manually\n   * startIOSPIP(videoRef);\n   * stopIOSPIP(videoRef);\n   * ```\n   *\n   */\n  iosPIP?: RTCIOSPIPOptions & {\n    preferredSize: {\n      width: number;\n      height: number;\n    };\n    fallbackView?: ReactNode;\n  };\n};\n\n/**\n * VideoTrack component for displaying video tracks in a React Native application.\n * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.\n *\n * @param props - See VideoTrackProps for details.\n * @returns A React component that renders the given video track.\n * @public\n */\nexport const VideoTrack = forwardRef<Component, VideoTrackProps>(\n  (\n    {\n      style = {},\n      trackRef,\n      objectFit = 'cover',\n      zOrder,\n      mirror,\n      iosPIP,\n    }: VideoTrackProps,\n    ref\n  ) => {\n    const [elementInfo] = useState(() => {\n      let info = new VideoTrackElementInfo();\n      info.id = trackRef?.publication?.trackSid;\n      return info;\n    });\n\n    const layoutOnChange = useCallback(\n      (event: LayoutChangeEvent) => elementInfo.onLayout(event),\n      [elementInfo]\n    );\n\n    const iosPIPEnabled = iosPIP?.enabled ?? false;\n    const visibilityOnChange = useCallback(\n      (isVisible: boolean) =>\n        elementInfo.onVisibility(isVisible || iosPIPEnabled),\n      [elementInfo, iosPIPEnabled]\n    );\n\n    const videoTrack = trackRef?.publication.track;\n\n    const shouldObserveVisibility = useMemo(() => {\n      return (\n        videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream\n      );\n    }, [videoTrack]);\n\n    const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);\n    useEffect(() => {\n      setMediaStream(videoTrack?.mediaStream);\n      if (videoTrack instanceof LocalVideoTrack) {\n        const onRestarted = (track: Track | null) => {\n          setMediaStream(track?.mediaStream);\n        };\n        videoTrack.on(TrackEvent.Restarted, onRestarted);\n\n        return () => {\n          videoTrack.off(TrackEvent.Restarted, onRestarted);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack]);\n\n    useEffect(() => {\n      if (\n        videoTrack instanceof RemoteVideoTrack &&\n        videoTrack.isAdaptiveStream\n      ) {\n        videoTrack?.observeElementInfo(elementInfo);\n        return () => {\n          videoTrack?.stopObservingElementInfo(elementInfo);\n        };\n      } else {\n        return () => {};\n      }\n    }, [videoTrack, elementInfo]);\n\n    let videoView;\n    if (!iosPIP || Platform.OS !== 'ios') {\n      videoView = (\n        <RTCView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // @ts-ignore\n          ref={ref}\n        />\n      );\n    } else {\n      videoView = (\n        <RTCPIPView\n          style={styles.videoTrack}\n          streamURL={mediaStream?.toURL() ?? ''}\n          objectFit={objectFit}\n          zOrder={zOrder}\n          mirror={mirror}\n          // TODO: fix this up in react-native-webrtc side.\n          // @ts-expect-error\n          iosPIP={iosPIP}\n          ref={ref}\n        />\n      );\n    }\n    return (\n      <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>\n        <ViewPortDetector\n          onChange={visibilityOnChange}\n          style={styles.videoTrack}\n          disabled={!shouldObserveVisibility}\n          propKey={videoTrack}\n        >\n          {videoView}\n        </ViewPortDetector>\n      </View>\n    );\n  }\n);\n\nconst styles = StyleSheet.create({\n  container: {},\n  videoTrack: {\n    flex: 1,\n    width: '100%',\n  },\n});\n\nclass VideoTrackElementInfo implements ElementInfo {\n  element: object = {};\n  something?: any;\n  id?: string;\n  _width = 0;\n  _height = 0;\n  _observing = false;\n  visible: boolean = true;\n  visibilityChangedAt: number | undefined;\n  pictureInPicture = false;\n  handleResize?: (() => void) | undefined;\n  handleVisibilityChanged?: (() => void) | undefined;\n  width = () => this._width;\n  height = () => this._height;\n\n  observe(): void {\n    this._observing = true;\n  }\n\n  stopObserving(): void {\n    this._observing = false;\n  }\n\n  onLayout(event: LayoutChangeEvent) {\n    let { width, height } = event.nativeEvent.layout;\n    this._width = width;\n    this._height = height;\n\n    if (this._observing) {\n      this.handleResize?.();\n    }\n  }\n\n  onVisibility(isVisible: boolean) {\n    if (this.visible !== isVisible) {\n      this.visible = isVisible;\n      this.visibilityChangedAt = Date.now();\n      if (this._observing) {\n        this.handleVisibilityChanged?.();\n      }\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/hooks/useTrackVolume.js

@@ -2,7 +2,6 @@ import { Track } from 'livekit-client';
 import { useEffect, useState } from 'react';
 import { addListener, removeListener } from '../events/EventEmitter';
 import LiveKitModule from '../LKNativeModule';
-
 /**
  * A hook for tracking the volume of an audio track.
  *
@@ -14,8 +13,8 @@ export function useTrackVolume(trackOrTrackReference) {
   const track = trackOrTrackReference instanceof Track ? trackOrTrackReference : trackOrTrackReference === null || trackOrTrackReference === void 0 || (_trackOrTrackReferenc = trackOrTrackReference.publication) === null || _trackOrTrackReferenc === void 0 ? void 0 : _trackOrTrackReferenc.track;
   const mediaStreamTrack = track === null || track === void 0 ? void 0 : track.mediaStreamTrack;
   const hasMediaStreamTrack = mediaStreamTrack != null;
-  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
-  const mediaStreamTrackId = mediaStreamTrack.id;
+  const peerConnectionId = (mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack._peerConnectionId) ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack === null || mediaStreamTrack === void 0 ? void 0 : mediaStreamTrack.id;
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {
     let listener = Object();

package/lib/module/hooks/useTrackVolume.js.map

@@ -1 +1 @@
-{"version":3,"names":["Track","useEffect","useState","addListener","removeListener","LiveKitModule","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","mediaStreamTrackId","id","volume","setVolume","listener","Object","reactTag","createVolumeProcessor","event","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack.id;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);\n\n  return volume;\n}\n"],"mappings":"AACA,SACEA,KAAK,QAGA,gBAAgB;AACvB,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,WAAW,EAAEC,cAAc,QAAQ,wBAAwB;AACpE,OAAOC,aAAa,MAAM,mBAAmB;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYP,KAAK,GAClCO,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEG,WAAW,cAAAF,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAME,gBAAgB,GAAGF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,gBAAgB;EAChD,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAGF,gBAAgB,CAACE,gBAAgB,IAAI,CAAC,CAAC;EAChE,MAAMC,kBAAkB,GAAGH,gBAAgB,CAACI,EAAE;EAE9C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGf,QAAQ,CAAC,GAAG,CAAC;EACvCD,SAAS,CAAC,MAAM;IACd,IAAIiB,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIR,mBAAmB,EAAE;MACvBQ,QAAQ,GAAGf,aAAa,CAACgB,qBAAqB,CAC5CR,gBAAgB,EAChBC,kBACF,CAAC;MACDX,WAAW,CAACe,QAAQ,EAAE,qBAAqB,EAAGI,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACN,MAAM,IAAII,QAAQ,IAAIE,KAAK,CAACP,EAAE,KAAKK,QAAQ,EAAE;UACrDH,SAAS,CAACK,KAAK,CAACN,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIJ,mBAAmB,EAAE;QACvBR,cAAc,CAACc,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZf,aAAa,CAACkB,qBAAqB,CACjCH,QAAQ,EACRP,gBAAgB,EAChBC,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACF,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}
+{"version":3,"names":["Track","useEffect","useState","addListener","removeListener","LiveKitModule","useTrackVolume","trackOrTrackReference","_trackOrTrackReferenc","track","publication","mediaStreamTrack","hasMediaStreamTrack","peerConnectionId","_peerConnectionId","mediaStreamTrackId","id","volume","setVolume","listener","Object","reactTag","createVolumeProcessor","event","deleteVolumeProcessor"],"sources":["useTrackVolume.ts"],"sourcesContent":["import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';\nimport {\n  Track,\n  type LocalAudioTrack,\n  type RemoteAudioTrack,\n} from 'livekit-client';\nimport { useEffect, useState } from 'react';\nimport { addListener, removeListener } from '../events/EventEmitter';\nimport LiveKitModule from '../LKNativeModule';\nimport type { MediaStreamTrack } from '@livekit/react-native-webrtc';\n\n/**\n * A hook for tracking the volume of an audio track.\n *\n * @param trackOrTrackReference\n * @returns A number between 0-1 representing the volume.\n */\nexport function useTrackVolume(\n  trackOrTrackReference?:\n    | LocalAudioTrack\n    | RemoteAudioTrack\n    | TrackReferenceOrPlaceholder\n) {\n  const track =\n    trackOrTrackReference instanceof Track\n      ? trackOrTrackReference\n      : <LocalAudioTrack | RemoteAudioTrack | undefined>(\n          trackOrTrackReference?.publication?.track\n        );\n\n  const mediaStreamTrack = track?.mediaStreamTrack as\n    | MediaStreamTrack\n    | undefined;\n  const hasMediaStreamTrack = mediaStreamTrack != null;\n  const peerConnectionId = mediaStreamTrack?._peerConnectionId ?? -1;\n  const mediaStreamTrackId = mediaStreamTrack?.id;\n\n  let [volume, setVolume] = useState(0.0);\n  useEffect(() => {\n    let listener = Object();\n    let reactTag: string | null = null;\n    if (hasMediaStreamTrack) {\n      reactTag = LiveKitModule.createVolumeProcessor(\n        peerConnectionId,\n        mediaStreamTrackId\n      );\n      addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {\n        if (event.volume && reactTag && event.id === reactTag) {\n          setVolume(event.volume);\n        }\n      });\n    }\n    return () => {\n      if (hasMediaStreamTrack) {\n        removeListener(listener);\n        if (reactTag) {\n          LiveKitModule.deleteVolumeProcessor(\n            reactTag,\n            peerConnectionId,\n            mediaStreamTrackId\n          );\n        }\n      }\n    };\n  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);\n\n  return volume;\n}\n"],"mappings":"AACA,SACEA,KAAK,QAGA,gBAAgB;AACvB,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,WAAW,EAAEC,cAAc,QAAQ,wBAAwB;AACpE,OAAOC,aAAa,MAAM,mBAAmB;AAG7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAC5BC,qBAG+B,EAC/B;EAAA,IAAAC,qBAAA;EACA,MAAMC,KAAK,GACTF,qBAAqB,YAAYP,KAAK,GAClCO,qBAAqB,GAEnBA,qBAAqB,aAArBA,qBAAqB,gBAAAC,qBAAA,GAArBD,qBAAqB,CAAEG,WAAW,cAAAF,qBAAA,uBAAlCA,qBAAA,CAAoCC,KACrC;EAEP,MAAME,gBAAgB,GAAGF,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEE,gBAEnB;EACb,MAAMC,mBAAmB,GAAGD,gBAAgB,IAAI,IAAI;EACpD,MAAME,gBAAgB,GAAG,CAAAF,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEG,iBAAiB,KAAI,CAAC,CAAC;EAClE,MAAMC,kBAAkB,GAAGJ,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEK,EAAE;EAE/C,IAAI,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGhB,QAAQ,CAAC,GAAG,CAAC;EACvCD,SAAS,CAAC,MAAM;IACd,IAAIkB,QAAQ,GAAGC,MAAM,CAAC,CAAC;IACvB,IAAIC,QAAuB,GAAG,IAAI;IAClC,IAAIT,mBAAmB,EAAE;MACvBS,QAAQ,GAAGhB,aAAa,CAACiB,qBAAqB,CAC5CT,gBAAgB,EAChBE,kBACF,CAAC;MACDZ,WAAW,CAACgB,QAAQ,EAAE,qBAAqB,EAAGI,KAAU,IAAK;QAC3D,IAAIA,KAAK,CAACN,MAAM,IAAII,QAAQ,IAAIE,KAAK,CAACP,EAAE,KAAKK,QAAQ,EAAE;UACrDH,SAAS,CAACK,KAAK,CAACN,MAAM,CAAC;QACzB;MACF,CAAC,CAAC;IACJ;IACA,OAAO,MAAM;MACX,IAAIL,mBAAmB,EAAE;QACvBR,cAAc,CAACe,QAAQ,CAAC;QACxB,IAAIE,QAAQ,EAAE;UACZhB,aAAa,CAACmB,qBAAqB,CACjCH,QAAQ,EACRR,gBAAgB,EAChBE,kBACF,CAAC;QACH;MACF;IACF,CAAC;EACH,CAAC,EAAE,CAACH,mBAAmB,EAAEC,gBAAgB,EAAEE,kBAAkB,CAAC,CAAC;EAE/D,OAAOE,MAAM;AACf","ignoreList":[]}

package/lib/typescript/lib/commonjs/components/VideoTrack.d.ts

@@ -1,20 +1,2 @@
 export const __esModule: boolean;
-/**
- * Props for the VideoTrack component.
- * @public
- */
-/**
- * VideoTrack component for displaying video tracks in a React Native application.
- * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.
- *
- * @param props - See VideoTrackProps for details.
- * @returns A React component that renders the given video track.
- * @public
- */
-export function VideoTrack({ style, trackRef, objectFit, zOrder, mirror }: {
-    style?: {} | undefined;
-    trackRef: any;
-    objectFit?: string | undefined;
-    zOrder: any;
-    mirror: any;
-}): any;
+export const VideoTrack: any;

package/lib/typescript/lib/module/components/VideoTrack.d.ts

@@ -1,9 +1,14 @@
-export function VideoTrack({ style, trackRef, objectFit, zOrder, mirror }: {
-    style?: {} | undefined;
-    trackRef: any;
-    objectFit?: string | undefined;
-    zOrder: any;
-    mirror: any;
-}): React.CElement<import("react-native").ViewProps, View>;
-import { View } from 'react-native';
+/**
+ * Props for the VideoTrack component.
+ * @public
+ */
+/**
+ * VideoTrack component for displaying video tracks in a React Native application.
+ * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.
+ *
+ * @param props - See VideoTrackProps for details.
+ * @returns A React component that renders the given video track.
+ * @public
+ */
+export const VideoTrack: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import * as React from 'react';

package/lib/typescript/src/components/VideoTrack.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { type ViewStyle } from 'react-native';
+import { type RTCIOSPIPOptions } from '@livekit/react-native-webrtc';
+import { type ReactNode } from 'react';
 import type { TrackReference } from '@livekit/components-react';
 /**
  * Props for the VideoTrack component.
@@ -45,6 +47,53 @@ export type VideoTrackProps = {
      * video(s) which appear above the remote video(s).
      */
     zOrder?: number;
+    /**
+     * Picture in picture options for this view. Disabled if not supplied.
+     *
+     * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.
+     *
+     * If `iosPIP.enabled` is true, the methods `startIOSPIP` and `stopIOSPIP`
+     * can be used to manually trigger the PIP mode.
+     *
+     * `iosPIP.startAutomatically` can be used to automatically
+     * enter PIP when backgrounding the app.
+     *
+     * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.
+     *
+     * @example
+     * ```tsx
+     * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';
+     *
+     * // Obtain a ref to the view
+     * const videoRef = useRef<Component>(null);
+     * const videoView = (
+     *   <VideoTrack
+     *      ref={videoRef}
+     *      iosPIP={{
+     *        enabled: true,
+     *        startAutomatically: true,
+     *        preferredSize: {
+     *          width: 9,
+     *          height: 16,
+     *        },
+     *      }}
+     *      ...
+     *   />
+     * );
+     *
+     * // Start/stop manually
+     * startIOSPIP(videoRef);
+     * stopIOSPIP(videoRef);
+     * ```
+     *
+     */
+    iosPIP?: RTCIOSPIPOptions & {
+        preferredSize: {
+            width: number;
+            height: number;
+        };
+        fallbackView?: ReactNode;
+    };
 };
 /**
  * VideoTrack component for displaying video tracks in a React Native application.
@@ -54,4 +103,4 @@ export type VideoTrackProps = {
  * @returns A React component that renders the given video track.
  * @public
  */
-export declare const VideoTrack: ({ style, trackRef, objectFit, zOrder, mirror, }: VideoTrackProps) => React.JSX.Element;
+export declare const VideoTrack: React.ForwardRefExoticComponent<VideoTrackProps & React.RefAttributes<React.Component<{}, {}, any>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.6.5",
+  "version": "2.7.1",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -72,7 +72,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^7.0.4",
     "jest": "^29.6.3",
-    "livekit-client": "^2.9.0",
+    "livekit-client": "^2.9.8",
     "pod-install": "^0.2.2",
     "prettier": "2.8.8",
     "react": "18.2.0",

package/src/components/VideoTrack.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import {
   type LayoutChangeEvent,
+  Platform,
   StyleSheet,
   View,
   type ViewStyle,
@@ -12,8 +13,20 @@ import {
   Track,
   TrackEvent,
 } from 'livekit-client';
-import { RTCView } from '@livekit/react-native-webrtc';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  RTCView,
+  RTCPIPView,
+  type RTCIOSPIPOptions,
+} from '@livekit/react-native-webrtc';
+import {
+  Component,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 import type { TrackReference } from '@livekit/components-react';
@@ -62,6 +75,54 @@ export type VideoTrackProps = {
    * video(s) which appear above the remote video(s).
    */
   zOrder?: number;
+
+  /**
+   * Picture in picture options for this view. Disabled if not supplied.
+   *
+   * iOS only. Requires iOS 15.0 or above, and the PIP background mode capability.
+   *
+   * If `iosPIP.enabled` is true, the methods `startIOSPIP` and `stopIOSPIP`
+   * can be used to manually trigger the PIP mode.
+   *
+   * `iosPIP.startAutomatically` can be used to automatically
+   * enter PIP when backgrounding the app.
+   *
+   * `iosPIP.preferredSize` is used to provide a suggested aspect ratio.
+   *
+   * @example
+   * ```tsx
+   * import { startIOSPIP, stopIOSPIP } from '@livekit/react-native-webrtc';
+   *
+   * // Obtain a ref to the view
+   * const videoRef = useRef<Component>(null);
+   * const videoView = (
+   *   <VideoTrack
+   *      ref={videoRef}
+   *      iosPIP={{
+   *        enabled: true,
+   *        startAutomatically: true,
+   *        preferredSize: {
+   *          width: 9,
+   *          height: 16,
+   *        },
+   *      }}
+   *      ...
+   *   />
+   * );
+   *
+   * // Start/stop manually
+   * startIOSPIP(videoRef);
+   * stopIOSPIP(videoRef);
+   * ```
+   *
+   */
+  iosPIP?: RTCIOSPIPOptions & {
+    preferredSize: {
+      width: number;
+      height: number;
+    };
+    fallbackView?: ReactNode;
+  };
 };
 
 /**
@@ -72,83 +133,117 @@ export type VideoTrackProps = {
  * @returns A React component that renders the given video track.
  * @public
  */
-export const VideoTrack = ({
-  style = {},
-  trackRef,
-  objectFit = 'cover',
-  zOrder,
-  mirror,
-}: VideoTrackProps) => {
-  const [elementInfo] = useState(() => {
-    let info = new VideoTrackElementInfo();
-    info.id = trackRef?.publication?.trackSid;
-    return info;
-  });
-
-  const layoutOnChange = useCallback(
-    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
-    [elementInfo]
-  );
-  const visibilityOnChange = useCallback(
-    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
-    [elementInfo]
-  );
-
-  const videoTrack = trackRef?.publication.track;
-
-  const shouldObserveVisibility = useMemo(() => {
-    return (
-      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+export const VideoTrack = forwardRef<Component, VideoTrackProps>(
+  (
+    {
+      style = {},
+      trackRef,
+      objectFit = 'cover',
+      zOrder,
+      mirror,
+      iosPIP,
+    }: VideoTrackProps,
+    ref
+  ) => {
+    const [elementInfo] = useState(() => {
+      let info = new VideoTrackElementInfo();
+      info.id = trackRef?.publication?.trackSid;
+      return info;
+    });
+
+    const layoutOnChange = useCallback(
+      (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+      [elementInfo]
     );
-  }, [videoTrack]);
-
-  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
-  useEffect(() => {
-    setMediaStream(videoTrack?.mediaStream);
-    if (videoTrack instanceof LocalVideoTrack) {
-      const onRestarted = (track: Track | null) => {
-        setMediaStream(track?.mediaStream);
-      };
-      videoTrack.on(TrackEvent.Restarted, onRestarted);
-
-      return () => {
-        videoTrack.off(TrackEvent.Restarted, onRestarted);
-      };
-    } else {
-      return () => {};
-    }
-  }, [videoTrack]);
-
-  useEffect(() => {
-    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
-      videoTrack?.observeElementInfo(elementInfo);
-      return () => {
-        videoTrack?.stopObservingElementInfo(elementInfo);
-      };
-    } else {
-      return () => {};
-    }
-  }, [videoTrack, elementInfo]);
-
-  return (
-    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
-      <ViewPortDetector
-        onChange={visibilityOnChange}
-        style={styles.videoTrack}
-        disabled={!shouldObserveVisibility}
-        propKey={videoTrack}
-      >
+
+    const iosPIPEnabled = iosPIP?.enabled ?? false;
+    const visibilityOnChange = useCallback(
+      (isVisible: boolean) =>
+        elementInfo.onVisibility(isVisible || iosPIPEnabled),
+      [elementInfo, iosPIPEnabled]
+    );
+
+    const videoTrack = trackRef?.publication.track;
+
+    const shouldObserveVisibility = useMemo(() => {
+      return (
+        videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+      );
+    }, [videoTrack]);
+
+    const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
+    useEffect(() => {
+      setMediaStream(videoTrack?.mediaStream);
+      if (videoTrack instanceof LocalVideoTrack) {
+        const onRestarted = (track: Track | null) => {
+          setMediaStream(track?.mediaStream);
+        };
+        videoTrack.on(TrackEvent.Restarted, onRestarted);
+
+        return () => {
+          videoTrack.off(TrackEvent.Restarted, onRestarted);
+        };
+      } else {
+        return () => {};
+      }
+    }, [videoTrack]);
+
+    useEffect(() => {
+      if (
+        videoTrack instanceof RemoteVideoTrack &&
+        videoTrack.isAdaptiveStream
+      ) {
+        videoTrack?.observeElementInfo(elementInfo);
+        return () => {
+          videoTrack?.stopObservingElementInfo(elementInfo);
+        };
+      } else {
+        return () => {};
+      }
+    }, [videoTrack, elementInfo]);
+
+    let videoView;
+    if (!iosPIP || Platform.OS !== 'ios') {
+      videoView = (
         <RTCView
           style={styles.videoTrack}
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}
           mirror={mirror}
+          // @ts-ignore
+          ref={ref}
         />
-      </ViewPortDetector>
-    </View>
-  );
-};
+      );
+    } else {
+      videoView = (
+        <RTCPIPView
+          style={styles.videoTrack}
+          streamURL={mediaStream?.toURL() ?? ''}
+          objectFit={objectFit}
+          zOrder={zOrder}
+          mirror={mirror}
+          // TODO: fix this up in react-native-webrtc side.
+          // @ts-expect-error
+          iosPIP={iosPIP}
+          ref={ref}
+        />
+      );
+    }
+    return (
+      <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
+        <ViewPortDetector
+          onChange={visibilityOnChange}
+          style={styles.videoTrack}
+          disabled={!shouldObserveVisibility}
+          propKey={videoTrack}
+        >
+          {videoView}
+        </ViewPortDetector>
+      </View>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: {},

package/src/hooks/useTrackVolume.ts

@@ -7,6 +7,7 @@ import {
 import { useEffect, useState } from 'react';
 import { addListener, removeListener } from '../events/EventEmitter';
 import LiveKitModule from '../LKNativeModule';
+import type { MediaStreamTrack } from '@livekit/react-native-webrtc';
 
 /**
  * A hook for tracking the volume of an audio track.
@@ -27,10 +28,12 @@ export function useTrackVolume(
           trackOrTrackReference?.publication?.track
         );
 
-  const mediaStreamTrack = track?.mediaStreamTrack;
+  const mediaStreamTrack = track?.mediaStreamTrack as
+    | MediaStreamTrack
+    | undefined;
   const hasMediaStreamTrack = mediaStreamTrack != null;
-  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
-  const mediaStreamTrackId = mediaStreamTrack.id;
+  const peerConnectionId = mediaStreamTrack?._peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack?.id;
 
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {