Access Device Camera with Blazor

Question

I have a Blazor Web Assembly PWA, how do I open a devices native camera?

I am trying to write a PWA to capture and save pictures.

EDIT

Would like to save captured images as jpeg's to Azure Blob Storage.

Answer 1

You can achieve this with HTML input. You only need to add the attribute capture for opening device camera straight away.

<input type="file" accept="image/*" capture>

You can have a look at the full source code here:

https://github.com/mehmettahameral/Blazor-wasm-pwa-camera

and live demo here: https://infallible-bohr-56743b.netlify.app/

--

about saving the images: it depends where do you want to save it really. If you can tell me more, I might update the solution.

Hope it helps 🤞

Answer 2

You can follow this tutorial: https://wellsb.com/csharp/aspnet/blazor-webcam-capture to capture camera device, stream the content, process an image.

Then, you can use the Azure Blob Storage client library v12 for .NET to upload your images to your Storage Account.

You can find a Quickstart here: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-dotnet