Picture-in-Picture

CometChat Calling SDK v5 - Beta Release - Picture-in-Picture for JavaScript

Picture-in-Picture (PiP) allows the call video to continue playing in a floating window while users interact with other content on the page or other browser tabs.

Enable Picture-in-Picture

Enable PiP mode during a call:

CometChatCalls.enablePictureInPictureLayout();

Disable Picture-in-Picture

Return to the normal call view:

CometChatCalls.disablePictureInPictureLayout();

Browser Support

Picture-in-Picture support varies by browser:

Browser	Support	Notes
Chrome	✅ Full support	Chrome 70+
Edge	✅ Full support	Chromium-based
Safari	✅ Full support	Safari 13.1+
Firefox	⚠️ Limited	Behind flag in some versions
Opera	✅ Full support	Opera 57+

Check PiP Support

Before enabling PiP, check if the browser supports it:

function isPiPSupported() {
  return document.pictureInPictureEnabled || false;
}

if (isPiPSupported()) {
  CometChatCalls.enablePictureInPictureLayout();
} else {
  console.log("Picture-in-Picture not supported in this browser");
}

PiP Events

The SDK doesn’t provide specific PiP events, but you can listen to the browser’s native PiP events on the video element if needed:

// If you have access to the video element
videoElement.addEventListener("enterpictureinpicture", () => {
  console.log("Entered PiP mode");
});

videoElement.addEventListener("leavepictureinpicture", () => {
  console.log("Left PiP mode");
});

User-Initiated PiP

Browsers typically require PiP to be triggered by a user gesture (click, tap). Wrap the enable call in a button handler:

document.getElementById("pip-btn").addEventListener("click", () => {
  CometChatCalls.enablePictureInPictureLayout();
});

Auto-PiP on Tab Switch

Some browsers support automatic PiP when switching tabs. This is a browser-level feature and may require user permission.

// Check if auto-PiP is available (Chrome)
if ("documentPictureInPicture" in window) {
  // Document PiP API available
}

Styling Considerations

When PiP is active:

• The main call container may appear empty or show a placeholder
• Consider showing a message indicating the call is in PiP mode
• Provide a button to exit PiP and return to the full view

let isPiPActive = false;

function togglePiP() {
  if (isPiPActive) {
    CometChatCalls.disablePictureInPictureLayout();
    isPiPActive = false;
  } else {
    CometChatCalls.enablePictureInPictureLayout();
    isPiPActive = true;
  }
  updateUI();
}

function updateUI() {
  const placeholder = document.getElementById("pip-placeholder");
  placeholder.style.display = isPiPActive ? "block" : "none";
}