How can i get image directly from api return image in Blazor WASM?

Question

question

Ahmed-7249 asked May 6, '22 Bruce-SqlWork answered May 8, '22

How can i get image directly from api return image in Blazor WASM?

Hello

Please, I work on the Blazor WASM project and connect to the API via its URL and token via HTTP Client and things are fine - but I have a problem in receiving data from one other API that returns images or video.

In the Inspector, when I go to Preview, I find the desired image or video.

The question is how do I capture the video or image that I'm returning so that I make it be the src value of the element of the image or video in the razor view - and the client does not want me to use base64 because it was slow when I tried it

dotnet-aspnet-core-blazor

1.png (142.9 KiB)

2.png (62.0 KiB)

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AgaveJoe · May 06 at 12:33 PM

If you are targeting .NET 6 see Blazor: Byte-array interop.

https://www.meziantou.net/generating-and-downloading-a-file-in-a-blazor-webassembly-application.htm

0 ·

Answer 1 · 2022-05-06T15:02:04.217Z

Bruce-SqlWork answered May 6, '22 Ahmed-7249 edited May 6, '22

Blazor WASM can not access the network directly, it uses Javascript interop. It also can not access the Dom directly, again it uses interop. So while byte-array passing between the javascript and C# code, will spend up image passing, you are still downloading in javascript, passing the data to C#. then C# is passing the data back to javascript to display.

to be performant, your blazor code should call javascript to fetch and display the image. You don't explain your use case, but you will find lots of articles on javascript and image/video. You might be interested in media api in the browser.

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Ahmed-7249 · May 06 at 05:14 PM

Thanks a lot Bruce

I start doing that and I finally can get image or video I need - but the problem I have now that I can't make code more dynamic - in my example data back from API as list and in front I do Foreach and get all data I need and set element - but now how can I bind method that fetch image or video to inside my loop to get image or video for each record - i hope please you can help me with way to complete that

as you know from code I write I can use getFile as this

await _onboardingServices.GetFile("api media url with id")

and can't use async code inside razor

so please any way to solve that ?

0 ·

1.png (143.7 KiB)

3.jpg (475.0 KiB)

Answer 2 · 2022-05-08T17:22:15.493Z

Bruce-SqlWork answered May 8, '22

createObjectUrl converts a bytes array (blob) to a base64 string, that cam easily be used as a data url for an <img src="...">. it will not work for video.

for javascript to supply the video stream, you use the browser media source extension:

https://w3c.github.io/media-source/

an alternative to this is to use WebRTC, often used for chat apps. you could write a customs video stream to canvas with this library.

to use these you would need to learn a lot about video streaming. there is javascript library that may do what you need:

https://github.com/video-dev/hls.js

you would use fetchSetup and xhrSetup to control your custom authentication.

note: these techniques will only work with modern (evergreen) browsers. what is the real issue you are trying to address? typically you would just render a stream url as the video source with a time limited one time key as a url parameter.

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

question