Search code examples
c#videovideo-streamingblazor-server-side

stream video from AzureBlob in Blazor component Web Server c#


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>
}

Solution

  • 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;
            }