Picture in picture

Picture-in-picture (PiP) mode shrinks the layout in the call into a small window so you can keep watching while using other apps on your mobile device. You can move the small window around your device’s home screen and position it over other apps.

iOS

Setup

If CallContent component is used, the PiP mode will be activated when the app goes to background when there is an active call. If you do not need PiP mode, you can deactivate it using the disablePictureInPicture prop of the CallContent component.

Alternatively, if you do not use the CallContent component but still want to enter PiP mode automatically. You can use the RTCViewPipIOS component from the SDK in your component to enable PiP mode as below:

import { RTCViewPipIOS } from '@stream-io/video-react-native-sdk';

<>
  <RTCViewPipIOS />
  <MyComponent />
</>

Current user camera

By default, iOS does not allow access to the user’s camera, while in background. To enable it, the multitasking camera access property must be true. In apps linked against iOS 18 or later, this property is true if voip is present in the UIBackgroundModes. This property also returns true for iOS applications that have the com.apple.developer.avfoundation.multitasking-camera-access entitlement.

Enabling

If the multitasking camera access property is true for your app based on the above conditions, you can enable local camera feed support in our PiP implementation by below:

By setting iOSPiPIncludeLocalParticipantVideo to true in CallContent component.
Or by setting includeLocalParticipantVideo to true in RTCViewPipIOS component.

Android

Setup

Changes to AndroidManifest

Add the following attributes to AndroidManifest.xml file in MainActivity:

AndroidManifest.xml

  <activity>
    ...
      android:name=".MainActivity"
      android:supportsPictureInPicture="true"
      android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
    ...
  </activity>

Changes to MainActivity

Add the following imports:

MainActivity.kt

import android.app.PictureInPictureParams
import com.streamvideo.reactnative.StreamVideoReactNative
import android.os.Build
import android.util.Rational
import androidx.lifecycle.Lifecycle

MainActivity.java

import android.app.PictureInPictureParams;
import com.streamvideo.reactnative.StreamVideoReactNative;
import android.os.Build;
import android.util.Rational;
import androidx.lifecycle.Lifecycle;

After that, Add the following function:

MainActivity.kt

fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean) {
  super.onPictureInPictureModeChanged(isInPictureInPictureMode)
  if (lifecycle.currentState === Lifecycle.State.CREATED) {
      // when user clicks on Close button of PIP
      finishAndRemoveTask()
  } else {
      StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode)
  }
}

MainActivity.java

@Override
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode) {
  super.onPictureInPictureModeChanged(isInPictureInPictureMode);
  if (getLifecycle().getCurrentState() == Lifecycle.State.CREATED) {
    // when user clicks on Close button of PIP
    finishAndRemoveTask();
  } else {
    StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode);
  }
}

Optional - Automatically make the app enter PiP mode when the home button is pressed

To make the app to automatically enter PiP on the home button press, the following function must be added:

MainActivity.kt

  override fun onUserLeaveHint () {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && StreamVideoReactNative.canAutoEnterPictureInPictureMode) {
      val builder = PictureInPictureParams.Builder()
      builder.setAspectRatio(Rational(480, 640))
      enterPictureInPictureMode(builder.build())
    }
  }

MainActivity.java

  @Override
  public void onUserLeaveHint () {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && StreamVideoReactNative.canAutoEnterPictureInPictureMode) {
      PictureInPictureParams.Builder builder = new PictureInPictureParams.Builder();
      builder.setAspectRatio(new Rational(480, 640)); // 480 x 640 - Width x Height
      enterPictureInPictureMode(builder.build());
    }
  }

In app.json, in the plugins field, add the androidPictureInPicture property to the @stream-io/video-react-native-sdk plugin.

app.json

{
 "plugins": [
      [
        "@stream-io/video-react-native-sdk",
        {
          "androidPictureInPicture": {
            "enableAutomaticEnter": true
          },
        }
      ],
  ]
}

If you do not want the app to automatically enter PiP mode on Home button press. You can set the above property to be "enableAutomaticEnter": false.

Automatically entering PiP mode

If the setup was done to enter PiP Mode automatically, wherever CallContent component is used, the PiP mode will be activated on home button press. If you do not need PiP mode to automatically enter even after setup, you can deactivate it using the disablePictureInPicture prop of the CallContent component.

Alternatively, if you do not use the CallContent component but still want to enter PiP mode automatically. You can use the useAutoEnterPiPEffect hook from the SDK in your component to enable PiP mode in your component as below:

import { useAutoEnterPiPEffect } from '@stream-io/video-react-native-sdk';

useAutoEnterPiPEffect();

Entering PiP mode manually

The SDK exposes a method named enterPiPAndroid. If this method is invoked, the app will go to PiP mode. You can use the method as shown below:

import { enterPiPAndroid } from '@stream-io/video-react-native-sdk';

enterPiPAndroid();

Choosing what to render on PiP mode

In PiP mode, the window is small. So you should only selectively render the important parts of the call. If you use CallContent component, this is automatically handled. The CallContent component shows only top sorted video on PiP mode.

Alternatively, if you do not use the CallContent component, we expose a hook named useIsInPiPMode to listen to the state of PiP Mode as shown below:

import { useIsInPiPMode } from '@stream-io/video-react-native-sdk';

const isInPiPMode = useIsInPiPMode();

You can use the state of the boolean from the hook to selectively render whatever is necessary during PiP mode.

Expo Screen Sharing Setup

Video filters