Support for Document Picture-in-Picture API (HTML Content)

[phatyh]

Description

Currently, signality only supports the legacy Picture-in-Picture API for <video>, which is limited to a single HTMLVideoElement. The web platform has since shipped the Document Picture-in-Picture API, which allows any arbitrary HTML content to be rendered in an always-on-top PiP window — not just video elements.

This API is stable and shipped as of Chrome 116 and Edge 116, with no origin trial required. It enables use cases that the current video-only PiP API cannot support, such as custom player controls, multi-stream video conferencing UIs, and general productivity widgets.

Browser support:

Browser	Status
Chrome	✅ 116+
Edge	✅ 116+
Firefox	⚠️ Technology Preview only
Safari	❌ Not supported

Reference: https://developer.chrome.com/docs/web-platform/document-picture-in-picture

Proposed solution

Add a new helper (e.g. openDocumentPiP) that wraps the DocumentPictureInPicture API with feature detection, alongside the existing video PiP support:

if ('documentPictureInPicture' in window) {
  const pipWindow = await documentPictureInPicture.requestWindow({
    width: 400,
    height: 300,
  });

  pipWindow.document.body.append(myCustomElement);
}

This would allow consumers to pass any HTMLElement into a PiP window, with graceful fallback to the existing <video> PiP path on unsupported browsers.

Alternatives considered

• Canvas hack: Combining multiple video streams into a <canvas> and using the legacy video PiP API. This works cross-browser but loses interactivity (no buttons, no controls inside PiP).
• Floating overlay / portal: Rendering a fixed-position overlay inside the main page instead of a real PiP window. Does not stay on top of other windows and breaks when the user switches tabs.
• Keeping video-only PiP: Not viable long-term, as the Document PiP API is already stable and the web platform is moving in this direction.

[vs-borodin]

Thank you for the suggestion, @phatyh!

We might need to create a separate utility for the Document Picture-in-Picture API, since it is a distinct interface.