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

Question

我正在开发一个功能，我想从蓝色斑点视频.video文件已经上传到azureBlob，我可以使用斑点URI，但我的斑点是压缩的，所以我不能直接从斑点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>
}

Answer 1

我已经找到了一种方法来实现这一点，它只需要我创建一个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;
        }