Blazor Hybrid Android/IOS Not Supported Picture-In-Picture(PIP)

Question

Application: Messaging Application (Chat and Video Calls) using SignalR and WebRTC
Framework: MAUI Blazor Hybrid

Android OS: 15 - API 35

.Net Version: 9

Is Picture-In-Picture supported in BlazorWebView?

You see i tried to implement a PIP that similar to video calls (Ex. Skype,Messenger,Instagram).

if i missing some declaration and implement please correct me or atleast give documentation for blazor hybrid thank you!

<div id="video-call-body">
	<div id="primary-active-video" class="position-relative">
		<video id="remoteVideo" class="w-100 h-100" style="pointer-events: none;  object-fit: cover;" autoplay></video>
		<div class="position-absolute end-0 top-0 text-white small">
				@_iceStatus
		</div>
	</div>
	<div id="smaller-active-video">
		<video id="localVideo" class="w-100 h-100" style="pointer-events: none; object-fit: cover;" autoplay muted></video>
	</div>
</div>

<div id="video-call-footer">
	<div class="call-icon">
		<i class="bi bi-pip" @onclick=EnabledPIP></i>
	</div>
</div>

@code{
	private async Task EnabledPIP()
	{
		await JSRuntime.InvokeVoidAsync("enablePiP");
	}
}

I would like to execute a remote video at very least (it should be both but it seems pip only trigger one video).

async function enablePiP() {
    const video = document.getElementById("remoteVideo");
    if (video !== null && video.readyState >= 3) { 
        if (video.requestPictureInPicture) {
            await video.requestPictureInPicture().catch(error => {
                console.log('PiP failed:', error);
            });
        }
    } 
}

Added SupportPictureInPicture = true, ResizeableActivity = true in MainActivity.cs

[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, SupportsPictureInPicture = true, ResizeableActivity = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
	public class MainActivity : MauiAppCompatActivity

but unfortunately it still throws Not SupportedError

Answer 1

Unfurtunately this is a limitation of web control in an app as per below

Refer: https://github.com/dotnet/maui/issues/28544