DEV Community

Cover image for Why is Blazor Hybrid's file input crashing on iOS?!
Mohammad Hossein Rastegarinia
Mohammad Hossein Rastegarinia

Posted on

3

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (2)

Collapse
 
msynk profile image
Saleh Yusefnejad

wow, great findings and nice article 👏
good job MARD 👌

Collapse
 
mhrastegari profile image
Mohammad Hossein Rastegarinia

Thanks dear Saleh 😎❤️

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay