在 Blazor 组件 Web 服务器 c# 中从 AzureBlob 流式传输视频

如何解决在 Blazor 组件 Web 服务器 c# 中从 AzureBlob 流式传输视频

我正在开发一项功能，我想从 azure blob 流式传输视频。视频文件已上传到 azureBlob，我可以使用 blob URI，但我的 blob 已压缩，因此我无法直接从 Blob URI 流式传输视频。出于这个原因，我从 azure 存储中获取 blob，对其进行解压缩并获得视频的实际内存流。现在我想播放该流中的视频。 我研究了一下，发现从JS可以实现。但我不想使用 js 片段来运行它。是否有任何 balzor Web 组件可以实现这一点。我也尝试使用 Nuget 的 blazored.video 库，但我仍然没有发现有多大帮助。

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

解决方法

我找到了一种方法来实现这一点，它只需要我创建一个 Web API 来返回我的视频的内容流。

我按照这个示例在我的 Web API 中处理流

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

我的作品

Page.razor

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

API 端点

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