Enable PiP (picture in picture) mode programmatically in Prebuilt UI

[ahkhanjani]

Feature request

The only way to enable PiP seems to be a button in the UI after enabling this feature. There should be a way to turn it on via a method.

Why you need this

In our use case, we have different tabs in the app. When switching to a tab other than the call tab, we want to enable PiP and vice versa.
Another use case could be what this user mentions.

Additional context

I'm using Daily Prebuilt UI in a currently latest version of Next.js/React.

[Regaddi]

@ahkhanjani This will likely not work as you intend it to, because the Picture-in-Picture browser API requires execution from a user gesture (e.g. a button click). Otherwise it throws an error:

DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.

I will answer the community thread, too, as I've missed it so far.

[ahkhanjani]

This will likely not work as you intend it to, because the Picture-in-Picture browser API requires execution from a user gesture (e.g. a button click).

Hi @Regaddi. So would it be ok if it was called on a button click event? E.g. clicking on an in-app tab. We don't intend to automatically turn it on (for example on browser tab change). So having this feature will only benefit our use case.

We could technically do some magical weird CSS tricks to shrink the Daily window and move it around but it's definitely not something we'd want when the PiP feature is already built into Daily Prebuilt, and also I'm not sure how Daily's styles would react to that compared to PiP. It'll save us a lot of trouble, and actually without it our current feature will be impossible to make. I'd appreciate it if you would consider it.

Best regards

[ahkhanjani]

I tested something just to have tried.

Instead of triggering PiP directly, I tried to programmatically click on the PiP toggle button:

<button
  onClick={() => {
    const pipButton = document
      .getElementsByTagName("iframe")[0]
      ?.contentWindow?.document.getElementById("topbar-pip-toggle");
    if (!pipButton) return;
    pipButton.click();
  }}
>
  Open PiP
</button>

It doesn't work because of iframe cross-origin security:

SecurityError: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

It's just an experiment that I wanted to share. I still think we should have the trigger function available if it's possible to trigger on click.