Picture-in-Picture Mode - React Native

Overview

Picture-in-picture (PiP) keeps the call in a small window while the user works in other apps. They still see and hear the other participants.

This guide walks you through implementing PiP using VideoSDK's React Native SDK.

• On Android, PiP is supported natively and can be implemented using the @videosdk.live/react-native-pip-android dependency.
• On iOS, PiP is not supported in v2.0.0.

The following sections show how to add PiP mode to your Android app.

important

• Picture-in-Picture (PiP) functionality is not supported after screen sharing

note

You can view the complete implementation in this Github repository. It is built on an older SDK version, and its iOS part does not work with v2.0.0, so follow the Migration Guide for the v2.0.0 API.

Prerequisites

• Familiarity with Native Modules in React Native.
• To implement PiP (Picture-in-Picture) mode, build the app from the Quick Start guide and follow the implementation steps.
• PiP mode works on Android 8.0 (API level 26) and later.

Android Implementation

Step 1: Install the PiP Dependency

NPM

npm install @videosdk.live/react-native-pip-android

YARN

yarn add @videosdk.live/react-native-pip-android

Step 2: Setup

Include the following attribute in /android/app/src/main/AndroidManifest.xml file.

AndroidManifest.xml

  <activity
    ...
      android:supportsPictureInPicture="true"
      android:configChanges=
        "screenSize|smallestScreenSize|screenLayout|orientation"
        ...

Step 3: Import Activity in MainActivity.java or MainActivity.kt file

java

MainActivity.java

...
import live.videosdk.pipmode.AndroidPipModule;

public class MainActivity extends ReactActivity {

...
  // this is for the changing values of pip listener
  @Override
  public void onPictureInPictureModeChanged (boolean isInPictureInPictureMode) {
    AndroidPipModule.Companion.pipModeChanged(isInPictureInPictureMode);
  }

  // this is for the auto enable pip mode
  @Override
  public boolean onPictureInPictureRequested() {
    AndroidPipModule.pipModeReq();
    return true;
  }
}

kotlin

MainActivity.kt

...
import live.videosdk.pipmode.AndroidPipModule

class MainActivity : ReactActivity() {

...
  // This is for the changing values of pip listener
  override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean) {
    AndroidPipModule.pipModeChanged(isInPictureInPictureMode)
  }

  // This is for the auto enable pip mode
  override fun onPictureInPictureRequested(): Boolean {
    AndroidPipModule.pipModeReq()
    return true
  }
}

React Native Side Implementation

After configuring the Android native implementation, you can control Picture-in-Picture behavior from your React Native code.

This section outlines how to implement PiP mode behavior inside your React Native component using @videosdk.live/react-native-pip-android.

Android: Using @videosdk.live/react-native-pip-android

On Android, use the @videosdk.live/react-native-pip-android library.

1. Entering PiP Mode Using a Button

A button can be used to trigger PiP mode manually. This functionality is typically included inside the ControlsContainer:

import PipHandler, { usePipModeListener } from '@videosdk.live/react-native-pip-android';

<Button
  onPress={() => {
    PipHandler.enterPipMode(300, 500);
  }}
  buttonText={'PiP'}
  backgroundColor={'#1178F8'}
/>

2. Auto-Enable PiP Mode Using a Variable

You can also enable PiP mode automatically when the room screen is entered. Use useEffect to set PiP mode upon mounting the component and to deactivate it when the user leaves:

import { useEffect, useState } from 'react';
import PipHandler from '@videosdk.live/react-native-pip-android';

export default function App() {
  useEffect(() => {
    // Default PiP size, used when enterPipMode() is called without a size
    PipHandler.setDefaultPipDimensions(300, 500);

    // Allow automatic PiP while the room screen is open
    PipHandler.setRoomScreenState(true);

    // Cleanup: Deactivate PiP mode when leaving the room screen (when component unmounts)
    return () => {
      console.log('Cleaning up: Setting room screen state to false');
      PipHandler.setRoomScreenState(false);
    };
  }, []);
}

3. Rendering in PiP Mode

Inside the RoomView component, the PiP rendering is conditionally handled when in PiP mode. The usePipModeListener hook is used to track PiP mode status:

const inPipMode = usePipModeListener();

if (inPipMode && Platform.OS === 'android') {
  return [...participants.keys()].map((participantId, index) => (
    <ParticipantView
      key={index}
      participantId={participantId}
      inPipMode={true}
    />
  ));
}

4. Adjust Video Rendering for PiP Mode

When rendering video in PiP mode, you can adjust the size of the video based on the platform and PiP mode status. For instance, reducing the height of the video stream when in PiP mode:

import { Platform, Text, View } from 'react-native';
import {
  MediaStream,
  RTCView,
  useParticipant,
} from '@videosdk.live/react-native-sdk';

function ParticipantView({ participantId, inPipMode }) {
  const { webcamStream, webcamOn } = useParticipant(participantId);

  return webcamOn && webcamStream ? (
    <RTCView
      streamURL={new MediaStream([webcamStream.track]).toURL()}
      objectFit={'cover'}
      style={{
        height: Platform.OS === 'android' && inPipMode ? 75 : 300,
        marginVertical: 8,
        marginHorizontal: 8,
      }}
    />
  ) : (
    <View
      style={{
        backgroundColor: 'grey',
        height: Platform.OS === 'android' && inPipMode ? 75 : 300,
        justifyContent: 'center',
        alignItems: 'center',
        marginVertical: 8,
        marginHorizontal: 8,
      }}>
      <Text style={{ fontSize: 16 }}>NO MEDIA</Text>
    </View>
  );
}