PIP (Picture-In-Picture) Mode

100ms React Native SDK provides support for creating Picture in Picture mode experience for video calls.

PIP Mode lets the user watch the room video in a small window pinned to a corner of the screen while navigating between apps or browsing content on the main screen.

Currently this functionality is only available on Android.

Minimum Requirements

• Minimum version required to support PiP is Android 8.0 (API level 26)
• Minimum react-native-hms SDK version required is 1.0.0

How to add PiP support

  <activity
    ....
    android:supportsPictureInPicture="true"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|uiMode"
    ... />

import com.reactnativehmssdk.HMSManager;
public class MainActivity extends ReactActivity {

  ...

  @Override
  public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) {
    super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
    HMSManager.Companion.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
  }

  @Override
  protected void onResume() {
    super.onResume();
    HMSManager.Companion.onResume();
  }

  @Override
  protected void onUserLeaveHint() {
    super.onUserLeaveHint();
    HMSManager.Companion.onUserLeaveHint();
  }
}

// You can also check if PIP is supported on device or not.
const isPIPSupported = await hmsInstance.isPipModeSupported();

const isEnabled = await hmsInstance.enterPipMode();
if (isEnabled) {
    // App has entered into PIP Mode
    setPIPModeActive(true);
}

While enabling PIP Mode you can configure the PIP Window Aspect Ratio & buttons shown to perform actions.

Actionable buttons like Mute/Unmute Audio/Video, Leave Room for local peers can be customized while enabling PIP Mode.

• aspectRatio: The Aspect Ratio of the PIP Window which will be appear. Default value is 16:9 aspect ratio. Other commonly used values are 4:3, 1:1, 9:16 & 3:4 ratios.

• endButton: To enable/disable showing of a button through which user can leave the room. Default is false, so the button is not visible by default.

• videoButton: To enable/disable showing of a button through which user can Mute/Unmute their Video Camera. Default is false, so the button is not visible by default.

• audioButton: To enable/disable showing of a button through which user can Mute/Unmute their Video Camera. Default is false, so the button is not visible by default.

const isEnabled = await hmsInstance?.enterPipMode({
                          aspectRatio: [9, 16],   // for 9:16 aspect ratio
                          endButton: true,        // for showing/hiding leave room button
                          videoButton: true,      // for showing/hiding local Video button
                          audioButton: true,      // for showing/hiding local Audio button
                        });

Pip mode resizes your whole activity to a small container. So, you should hide the content that you don't want to show.

3. Detect when App goes to "fullscreen" from PIP mode

  import { AppState, AppStateStatus } from 'react-native';

  ...

  const appStateRef = useRef(AppState.currentState);

  useEffect(() => {
    // We will register an AppState listener when App is in PIP Mode
    if (pipModeActive) {
      appStateRef.current = AppState.currentState;

      const appStateListener = (nextAppState: AppStateStatus) => {
        if (
          appStateRef.current.match(/inactive|background/) &&
          nextAppState === "active"
        ) {
          // Now, App is not in PIP mode
          setPIPModeActive(false);
        }

        appStateRef.current = nextAppState;
      };

      AppState.addEventListener('change', appStateListener);

      return () => {
        AppState.removeEventListener('change', appStateListener);
      }
    }
  }, [pipModeActive]);

Example of showing content when App is in PIP Mode

  // Getting trackId to show in PIP mode
  // getPreferredTrackId function returns trackId of preferred video track
  const pipTrackId = getPreferredTrackId()

  ...

  // If PIP mode is active, showing only single peer
  if (isPipModeActive) {
    return (
      <HmsView
        ...
        trackId={pipTrackId}
        ...
      />
    )
  }

  // Showing tiles for all the peers
  return <MultiplePeers />

  ...

Checkout Video of PIP in Action

👀 To see an example of Picture in Picture implementation in our example app, checkout our example project.