Blazor Hybrid Android Throws Exception Not Supported Picture-In-Picture(PIP)

[cdaligdig]

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

I already posted the same question in community no one answer so i posted here as well.

https://learn.microsoft.com/en-us/answers/questions/2237028/blazor-hybrid-android-ios-not-supported-picture-in

Thank you

[mattleibow]

This may be a limitation of a web control in an app - unlike a browser which can handle this. You may need to open a new activity as a PIP with a second blazor control.

[mattleibow]

@Eilon do you recall ever seeing things like this with blazor?

[cdaligdig]

this is unfurtunate as per answer above, this is a limitation of web control in an app.

Hoping you guys can support it in future updates.

You may need to open a new activity as a PIP with a second blazor control.

I will try this as work around, thanks bro!

[cdaligdig]

Hi @mattleibow,

As a work around i tried to replicate the recommendation above,

A Second Blazor Control in a activity.

[Activity(Theme = "@style/Theme.Transparent", Exported = false,  ShowForAllUsers = true,  TurnScreenOn = true, ShowWhenLocked = true)]
public class OverlayActivity : Activity
{
    private IWindowManager? _windowManager;
    private View? _overlayView;
    private WindowManagerLayoutParams? _layoutParams;


protected override void OnCreate(Bundle? savedInstanceState)
{
	base.OnCreate(savedInstanceState);

	ShowOverlay();
}

private void ShowOverlay()
{
	_windowManager = GetSystemService(Context.WindowService).JavaCast<IWindowManager>();

	// Create BlazorWebView
	var blazorWebView = new BlazorWebView();
	var mauiContext = IPlatformApplication.Current.Services.GetRequiredService<IMauiContext>();
	var platformWebView = blazorWebView.ToPlatform(mauiContext);
}

isnt IMauiContext should always be available upon application started no need to register it in dependency injection.

if i am doing wrong please atleast give me a sample repository since i cant seem to find any reference for this

Thank you