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. Through the SDK we provide two ways to enter PiP mode, either manually or automatically. The manual way is using calling a method from the SDK, the automatic way is to make the app enter PiP mode when the home button is pressed.

note

PiP is currently only supported in Android by the SDK.

Setup

React Native

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:

Kotlin

MainActivity.kt

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

Java

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:

Kotlin

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)
  }
}

Java

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:

Kotlin

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())
    }
  }

Java

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());
    }
  }

Expo

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.

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 that 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.