question

Ahmed-7249 avatar image
0 Votes"
Ahmed-7249 asked Bruce-SqlWork answered

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

199639-1.png
199661-2.png


dotnet-aspnet-core-blazor
1.png (142.9 KiB)
2.png (62.0 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

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

Bruce-SqlWork avatar image
1 Vote"
Bruce-SqlWork answered Ahmed-7249 edited

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

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

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

199811-1.png

199784-2.png

199755-3.jpg

so please any way to solve that ?




0 Votes 0 ·
1.png (143.7 KiB)
3.jpg (475.0 KiB)
Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered

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

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