PIP (Picture-in-Picture) Mode

Overview

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.

100ms PiP selects top 4 peers with video enabled and render them in the PiP window.

Implementation

React projects

For implementation copy this folder to your react project.

Add worker-timers as a dependency.

import { PIP } from '../path-to-above-folder';

function SomeComponent() {
    return <PIP />;
}

Our sample app implementation prioritizes the pinned tiles in PiP mode, you can remove this if not required.

Non-React projects

For non React projects, you can use PictureInPicture from PIPManager in the above folder and use it to start/stop PiP, check whether it is supported or not.

import { PictureInPicture } from '../path-to-above-folder/PIPManager';
import { MediaSession } from '../path-to-above-folder/SetupMediaSession';

PictureInPicture.isSupported(); // to check if PiP is supported. This depends on browser implementation. For example, it is not supported in firefox
PictureInPicture.isOn(); // to check whether PiP is enabled.

// To start pip, pass hmsActions and a callback function which receives the current state of pip
PictureInPicture.start(hmsActions, setIsPipOn).catch((err) =>
    console.error('error in starting pip', err)
);
// Call this to show controls in PiP window.(Audio toggle, Video toggle and end call are the options supported here)
MediaSession.setup(hmsActions, store);

// To stop pip
PictureInPicture.stop().catch((err) => console.error('error in stopping pip', err));

Customization(in React)

If you want to render custom peers in PiP from your end, you can pass those peers in the PIPComponent in the above folder.

For example, if you want to show peers of particular role only in PiP, the following can be done.

import { useHMSStore, selectPeersByRole } from '@100mslive/react-sdk';

function PIP() {
    const peers = useHMSStore(selectPeersByRole('some-role'));

    return <PIPComponent peers={peers} />;
}

To include local peer in PiP, just pass showLocalPeer to PIPComponent.

function PIP() {
    return <PIPComponent showLocalPeer />;
}

Limitations:

• PiP is not supported in Firefox
• PiP is flaky in safari due to it's canvas rendering issues. check known issues for more information