Displaying a specific widget in PiP

[khlebobul]

Hello, I have tried using your package. I really liked the ease of integration. However, I would like to be able to display not the whole screen in PiP, but a part of it (widget). For example, if I create a video chat and I want to display the video of the interlocutor in PiP, while having many other widgets on the screen.

Unfortunately, I have not found this information in the documentation. Please correct me if I am wrong. The package is very cool, looking forward to updates!

[peilinok]

Hi @khlebobul ,

Thank you very much for your usage and feedback. Did you mean in Android?

[khlebobul]

So far I've only been able to try Android, yes. Is there already such an option on iOS?

[peilinok]

Hi @khlebobul ,
In Android systems, Picture-in-Picture (PIP) mode is relatively straightforward as it applies to the entire activity. In Flutter's single-activity mode, you can only update your UI by listening to PIP state changes - for example, adjusting your layout when PIP mode is detected. If you're using multiple Flutter engines, you can choose which activity to display when entering PIP mode, although the animation transition effects still need testing.

In iOS systems, Picture-in-Picture requires launching a PIP Window, which has specific requirements for embedded UIViews. From what I know, others have attempted to mount the Flutter engine within the PIP Window, but rendering stopped. Nevertheless, it's still worth exploring this approach.

And here is how to Multiple Flutter screens or views, as I'm currently quite busy with work commitments, I would greatly appreciate if you could continue exploring this and contribute to the solution if you have the time.

[khlebobul]

Thank you very much, I will look into this issue from a theoretical point of view, I don't promise I will do it quickly. I really want to help you with the development of this package, besides, I think it will be useful for others.

[khlebobul]

Good afternoon, I have a little update

First, I came across the issue [iOS] Using picture-in-picture for video calls and accessing the camera while multitasking.

Since iOS 16.0, capture session support multitasking, I want to enable captureSession.isMultitaskingCameraAccessEnabled = true and show Picture in Picture (PiP) when go to background in iOS.

Also, the author has attached the swift code + useful links (Accessing the camera while multitasking on iPad) and (Adopting Picture in Picture for video calls)

Then I found two awesome projects on the author's profile:

1. waterbus
2. waterbus-flutter-sdk

And the documentation has just about all the information you need about PiP:

1. PiP iOS
2. PiP Androdi
3. PiP Web

That's all for now, continuing to research

[khlebobul]

Hello, I apologize for not updating for a long time. I had many other tasks

Quick update

• Android: working well — I achieved “PiP with only the video widget” behavior.
• iOS: I haven’t fully tested yet.

On Android, PiP applies to the whole Activity. I listen for the PiP state and, when entering PiP, push a minimal top route that renders only the remote video (RTCVideoView). Since the system shows the top route, the user effectively sees only the video in PiP. On exit, I pop that route.

[khlebobul]

PiP (Picture-in-Picture) Issue on iOS

Reason

On iOS, system Picture-in-Picture (PiP) requires a native frame source (AVPlayerLayer or CMSampleBufferDisplayLayer). A Flutter route with RTCVideoView in the background is not rendered, so the PiP window is black. Our "minimal route" trick works for Android, but not for iOS.

What I’ve Already Done

• Enabled background and audio session for video calls:
  • Info.plist includes UIBackgroundModes=audio.
  • In ios/Runner/AppDelegate.swift, configured AVAudioSession (.playAndRecord, .videoChat, Bluetooth, speaker) and a short background task on minimize.

What Is Needed on iOS to Avoid the "Black Window"

• In Xcode → Signing & Capabilities, enable Background Modes → Audio, AirPlay, and Picture in Picture (check this specific option).
• Connect a native AVPictureInPictureController to WebRTC video:
  • Use the shared singleton from flutter_webrtc and output the remote track to a CMSampleBufferDisplayLayer, which is then passed to AVPictureInPictureController.

I will continue tomorrow

[khlebobul]

There is also an interesting comment here about iOS: flutter-webrtc/flutter-webrtc#1645 (comment)

[hensi-elaunch]

@peilinok How can I display a specific widget in PiP on an iOS device? Please suggest ASAP.

[vrathod0303]

@peilinok How can I display a specific widget in PiP on an iOS device? Please suggest ASAP.

Have you find solution If you have find it so please suggest me I am also facing the same issue