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. 出於這個原因，我從 azure 存儲中獲取 blob，對其進行解壓縮並獲得視頻的實際 memory stream。 現在我想播放來自 stream 的視頻。 我研究了一下，發現從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 來返回我的視頻的內容 stream。

我按照這個例子在我的 Web API 中處理流式傳輸

使用.Net Core API 從 Azure Blob 存儲異步流式傳輸視頻

我的工作

頁.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;
        }