Why is Blazor Hybrid's file input crashing on iOS?!

mhrastegari

Mohammad Hossein Rastegarinia

Posted on August 28, 2023

Why is Blazor Hybrid's file input crashing on iOS?!

On Android and WinUI input tag with type of file is working fine when trying to capture image/video with the camera, but on iOS doing weird stuff like crashing on a real device or showing a black screen when you want to upload an image or video from the camera! so no worries we're here to fix them all.

Crashing on opening camera

Why it's happening only on the Hybrid app?
Because unlike PWA or SPA, it's basically an actual app accessing all the native stuff + Web UI and the crashing is because you need to give it the right permissions just like a native app!
So go to YOURPROJECTNAME\Platforms\iOS\Info.plist and add these lines:

<key>NSCameraUsageDescription</key>
<string>This app uses camera for...</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app uses microphone to record videos for...</string>
Enter fullscreen mode Exit fullscreen mode

Camera view is black!

I don't know if this is on BlazorWebView or not but when you open the camera from an input tag it shows a black screen! so I read WKWebView's docs and found the AllowsInlineMediaPlayback property and we have to enable it in our BlazorWebView!
In your MainPage.xaml.cs add these lines:

BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("CustomBlazorWebViewMapper", (handler, view) =>
{
#if IOS
    var configs = handler.PlatformView.Configuration;
    configs.AllowsInlineMediaPlayback = true;
#endif
});
Enter fullscreen mode Exit fullscreen mode

So that was all you needed to fix the input tag on a Blazor Hybrid iOS app!
Luckily we've covered these in BitPlatform templates and more!

Happy coding ;D

💖 💪 🙅 🚩
mhrastegari
Mohammad Hossein Rastegarinia

Posted on August 28, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related