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

Ahmed 1 Reputation point
2022-05-06T11:53:04.977+00:00

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

Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,389 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 55,686 Reputation points
    2022-05-06T15:02:04.217+00:00

    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 person found this answer helpful.
  2. Bruce (SqlWork.com) 55,686 Reputation points
    2022-05-08T17:22:15.493+00:00

    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.

    0 comments