stream 视频 Blazor 组件 Web 服务器 Z240AA2CEC4B29C56F3BEE520ADC8Z

Question

I am working on a feature where I want to stream video from azure blob.video files are already uploaded to azureBlob, I can use the blob URI but my blobs are compressed so I cant stream video directly from the Blob URI. for that reason I fetch the blob from the azure storage, Decompressed it and got the actual memory stream of a video. Now I want to play the video from that stream. I researched out and find out that from JS it can be achieved. but I don't want to use js snippet to run this. is there any balzor web component from which I can achieve this. I have also tried to used blazored.video library from Nuget but still I didn't find that much helpful.

@using Blazored.Video
@using Blazored.Video.Support


@if (File != null)
{
    <BlazoredVideo class="w-100"
                   style="max-width:800px;"
                   controls="controls">
        <source src="@File.FileUri" type="video/mp4" />
    </BlazoredVideo>
}

Answer 1

I have found a way to achieve this It simply requires me to create a web API that returns the content stream of my video.

I follow this example to handle streaming in my Web API

Asynchronously Streaming Video with.Net Core API from Azure Blob Storage

My work

Page.razor

<BlazoredVideo class="w-100"
               style="max-width:800px;"
               controls="controls">
    <source src="api/Blob/PlayVideo" type="video/mp4" />
</BlazoredVideo>

API Endpoint

 [HttpGet("api/Blob/PlayVideo")]
        [AllowAnonymous]
        public async Task<IActionResult> AnonymousPlayVideoAsync()
        {               
                var cloudBlob = await _azureBlobStorageService.RetrieveBlobiAsync("Test.mp4");
          
             var stream = new MemoryStream();
            await cloudBlob.DownloadToStreamAsync(stream);

            //.. Decompression of Stream comes here

            var result= new FileContentResult(stream.ToArray(), "video/mp4");
            result.EnableRangeProcessing = true;           
            return result;
        }