CODEWITHSUNDEEP
.net-corecameraprogressive-web-appsblazorblazor-webassembly
Anthony Ryan
Anthony Ryan

Reputation: 395

Access Device Camera with Blazor

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.

Upvotes: 11

Views: 25204

Answers (2)

Andres Talavera
Andres Talavera

Reputation: 2210

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://learn.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-dotnet

Upvotes: 2

Mehmet Taha Meral
Mehmet Taha Meral

Reputation: 3843

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 🤞

Upvotes: 25

Related Questions