Azure Blob Storage: Streaming the Azure Blob Storage Videos using Shared Access Signature (SAS) Token in the Blazor Web Application

-

In this article, we will implement an access of the Videos stored in Azure Blob Storage using SAS Tokens and play these videos in Blazor Server Applications without downloading them. The Azure Blob Storage is a scalable, cost-effective, and secure object storage solution for the cloud. We can storage binary files like documents, videos, spreadsheets, etc. in Blob storage and we can access them as on when we need it. The scalability feature of Blob storage helps to store and access large amount of unstructured data that is encrypted at rest and in transit using Microsoft Entra ID as well as with Role-Based Access Control. The Blob storage offer Durability that is designed with geo-replication options. The Blob storage offers Multiple storage tiers like Hot, Cool, and Archive to optimize costs based on data access patterns.   

The Common Uses of Blob Storage are as follows:

  • Data Lake for Data analytics needs.
  • Content Storage and Delivery to serve documents, media files as well as images directly to users.
  • Backup and Restore of data for disaster recovery.
  • Big Data Analytics uses to store and analyze large datasets with Azure Data Lake
To access the Media files from the Blob storage one of the mechanisms is to use a Shared Access Signature (SAS) Token. This allows to grant limited access to the Blob resources without sharing the storage account key. The SAS Tokens are of following types

  • User Delegation SAS
    • This is secured with Microsoft Entra Credentials that offers superior security. This is applied to Blob Storage only 
  • Service SAS
    • This is secured with the storage account key; this delegates access to a specific resource withing one of the Azure Storage services.
  • Account SAS
    • Like Service SAS, this also secured with the storage account key. This delegates access to resources across multiple services within the storage account.
The SAS Token can be created using Azure Portal, Azure Storage Explorer, or programmatically via the Azure SDK. In this article we will create SAS token via Programmatically. While creating SAS token programmatically, we must set the permissions to limit the Blob access as well as we must set the validity period to a minimum necessary.   

To create a SAS token, we must use the Azure.Storage.Blobs package in the .NET Client project. This package offers the BlobSasBuilder class. This class has a constructor that access following two parameters:

  • BlobContainerSasPermissions enumeration, this contains list of permissions that can be set for a Blob's access policy e.g. Read, Add, Create, Write, etc.
  • DateTimeOffset, this is used to define the time at which the SAS token becomes invalid
The BlobSasBuilder, class has the following properties:

  • BlobContainerName: This represents the name of the Blob container that is being accessible
  • BlobName: The name of the Blob being accessible
  • Resource: The resource that is being accessible via the SAS Token. If the shared resource is Blob, then the value for this property is "b". The value can be "c" if it is the Blob Container name.      

To play the Video files from the Azure Blob Storage, we will use the Blazor Web App. This is a Server controlled Blazor Application Template.

To create and use Azure Blob storage you must have Azure subscription. To use the Azure Blob Storage, we must create a Storage Account that offers Access Key to access the Blob container created in Storage Account. I have already published articles to upload files in Blob storage, these can be read from following links:

Microsoft Azure Storage Blob: Download multiple Blobs from the Azure Storage Blob Containers using SemaphoreSlim Class

Blazor Web Assembly with .NET 6: Uploading File to Azure BLOB Storage





Follow steps explained in above articles to create Storage Account named 'channelvideos' and to create Azure Blob Storage, create a container named 'videos' as shown in Figure 1:



Figure 1: The Storage Account and Container 

In the Videos container add media files, I have used ".mp4" files. From the Access Keys section copy the Connection string as shown in Figure 2. Paste the Connection String in Notepad so that we can use it.



Figure 2: The Connection String for the Storage Account

Let's create a client application.

Step 1: Open Visual Studio and create a Blazor Web Application. Name this application as Blazor_VideoStreamBlob. In this project add Azure.Storage.Blobs package. In the appsettings.json file add new keys for the Storage Account Connection String and Blob Name as shown in Listing 1.

"AzureStorageSettings": {

"BLOB_CONNECTION_STRING": "[CONNCTION-STRING]",

  "BLOB_CONTAINER_NAME": "videos"

}

Listing 1: The Connection String and Blob Container Name

In this project add a new folder named Infrastructure. In this folder add a new class file name BLOBConnect.cs. In this class file, we will add code for creating SAS Token using the BlobSasBuilder class. The code is shown in Listing 2.


using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;
using Azure.Storage.Sas;

namespace Blazor_VideoStreamBlob.Infrastructure
{
    public class BLOBConnect(IConfiguration configuration)
    {
        private readonly string? _connectionString = configuration.GetSection("AzureStorageSettings:BLOB_CONNECTION_STRING").Value;
        private readonly string? _containerName = configuration.GetSection("AzureStorageSettings:BLOB_CONTAINER_NAME").Value;


        public async Task<string> GetBlobSasToken(string blobName)
        {
            var blobSvcClient = new BlobServiceClient(_connectionString);
            var containerClient = blobSvcClient.GetBlobContainerClient(_containerName);
            var blobClient = containerClient.GetBlobClient(blobName);

            var sasBuilder = new BlobSasBuilder(BlobContainerSasPermissions.Read, DateTimeOffset.UtcNow.AddMinutes(15))
            {
                BlobContainerName = _containerName,
                BlobName = blobName,
                Resource = "b",
               
            };
            await containerClient.SetAccessPolicyAsync(PublicAccessType.None);
           
            var sasToken = blobClient.GenerateSasUri(sasBuilder).Query;
            return await Task.FromResult( $"{blobClient.Uri}{sasToken}");
        }

        // code to list all blobs in a container
        public List<string> ListBlobs()
        {
            var blobSvcClient = new BlobServiceClient(_connectionString);
            var containerClient = blobSvcClient.GetBlobContainerClient(_containerName);
            var blobs = containerClient.GetBlobs().Select(b => b.Name).Where(b => b.EndsWith(".mp4")).ToList();
            return blobs;
        }


        
    }
}

Listing 2: The BLOBConnect class   

The BLOBConnect class, reads the connection string and container name from the appsettings.json using the IConfiguration interface. The method ListBlobs() uses the BlobServiceClient class to read all blobs having extension as ".mp4". The GetBlobSasToken() method access the blob name as input parameter. This method is used to generate SAS token for this blob using the BlobSasBuilder class. The permission is set to Read, and the expiry is set to 15 minutes. The GenerateSasUri() method of the BlobClient class accepts an instance of the BlobSasBuilder class. This method generates the Uri based SAS Token. This token will be further used to access the BLOB.             

Step 2: In the Pages folder of the project, add a new Razor component named BlobStreamer.razor. In this component we will use the HTML Video tag to play the Video from the Blob storage. In this component, we will inject the BLOBConnect class. In this component we will access the ListBlobs() method from the BLOBConnect class to show list of mp4 blobs. We will show all these blobs in the radio buttons by generating them using the List of blobs. The HTML Markup and the code for this component is shown in Listing 3.


@page "/blobstreamer"
@rendermode InteractiveServer

@inject HttpClient Http
@inject Blazor_VideoStreamBlob.Infrastructure.BLOBConnect blobConnect
<h3>BLOB Video Streaming using SAS Token</h3>

<div class="container">
    <div class="row">
        <div class="col-md-6 border-3 border-primary list-group">
                @foreach (var video in Videos)
                {
                <input type="radio" value="@video" name="r" @onclick="@(() => OnVideoSelected(video))"/>
                    <label class="form-check-label" for="r">
                        @video
                    </label>
                    <br />
                }
        </div>    
        <div class="col-md-6">
        @if (!string.IsNullOrEmpty(VideoUrl))
        {
            <video width="600" controls autoplay>
            <source src="@VideoUrl" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        }
        else
        {
            <p>Loading video...</p>
        }
        </div>
         
    </div>
</div>


@code {
    public List<string> Videos { get; set; }  = new List<string>();  
    public string VideoUrl { get; set; } = string.Empty;
    public string selectedVideo { get; set; } = string.Empty;

    protected override void OnInitialized()
    {
        Videos =  blobConnect.ListBlobs();
    }


    private async Task OnVideoSelected(string value)
    {
        VideoUrl = "";
        selectedVideo = value;

        var sasToken = await blobConnect.GetBlobSasToken(selectedVideo);

        VideoUrl = sasToken;

    }
}

Listing 3: The Component code

As shown in Listing 3, the OnVideoSelected() method will be executed when the radio button for a file is selected, this will call the GetBlobSasToken() method of the BLOBConnect class. This method returns the Blob URL that is assigned to the VideoUrl property that is bound to the Vide tag.

We have set the rendermode for the component to InteracctiveServer so that the interactive events like @onclick event on the radio button to access the URI based SAS token for a selected Blob so that it can play in the Video tag.  

Step 3: Modify the App.razor to prevent the right-click event on the component as shown in Listing 4.


    <script>
            
document.addEventListener('contextmenu', function (event) {
    event.preventDefault();
});
    </script>

Listing 4: Prevent the right-click        

This is an important step to make sure that the Video URL cannot be copied by right-clicking on the video.

Step 4: Modify the NavMenu.razor by adding the navigation link for the blobstreamer component which we have added in Step 2. The code in shown in Listing 5.   


 <div class="nav-item px-3">
     <NavLink class="nav-link" href="blobstreamer">
         <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> E-Learner
     </NavLink>
 </div>

Listing 5: Navigation   

Run the application and click on the E-Learner link, this will render the blobstreamer component that shows the list of Blobs, when a radio button is clicked for blob, it will start playing in the video tag as shown in Figure 3.



Figure 3: The Result

This is how the Blob from the Azure Blob Storage can be directly played in the client application. The code for this article can be downloaded from this link.

Popular posts from this blog

Uploading Excel File to ASP.NET Core 6 application to save data from Excel to SQL Server Database

-
Image
Recently, while conducting a session on ASP.NET Core 6, my client raised a query regarding uploading excel files to the ASP.NET Core MVC application and then further saving data from excel to the SQL Server Database table. I gave him the solution and then thought to write a post on it. As we all know, the Excel Workbook is one of the most heavily used files to save data. But to persist data it is recommended that it should be stored in an SQL Server database.  If the data is stored in an SQL Server database it can be queried easily.  Figure 1, explains an implementation of the application which we are going to discuss in the article. Figure 1: The ASP.NET Core That accepts Excel files and then further store data from Excel Files in SQL Server Database The   ExcelDataReader.DataSet Library To read excel files in ASP.NET Core applications, we need to use the ExcelDataReader.DataSet package. This is a lightweight and fast library for reading Excel files in .NET applications....
Read more

ASP.NET Core 6: Downloading Files from the Server

-
Image
In this article, we will implement the file downloading feature using ASP.NET Core 6 application. In real-world applications, we can have various files like reports, spreadsheets, images, PDF documents stored on the server. (Note that all cloud-hosted applications prefer to store these files on the storage services, e.g. Blob, S3, etc.). But what if the client prefers to store files on the separate file server mapped to the web application host server? Then, in that case, we may need to download these files from the file server. In this article, we will implement exactly the same thing.   Step 1: Open Visual Studio 2022 and create a new ASP.NET Core MVC Application targetted to .NET 6. Name this application as Core6_FileDownload. In this project add a new folder and name it as ServerFiles. In this file add some images. (You can add Excel, PDF, Word, Files). Step 2: Since we need to read the ServerFiles folder using the ASP.NET Core application, we need to add the IFi...
Read more

ASP.NET Core 6: Using Entity Framework Core with Oracle Database with Code-First Approach

-
Image
In this article, we will see how to use Oracle Database with Entity Framework Core with Code-First Approach. The reason behind writing a post on this is, recently while conducting training, one of my students raised the query regarding the EF Core with Oracle. Since Oracle is one of the most powerful databases, various enterprise applications are using it for the past several years and since the .NET Core is the most popular technology for building modern apps, the scenarios for accessing the Oracle database in .NET Core apps the use Entity Framework Core is common. Oracle Data Provider for .NET Entity Framework Core The Oracle Data Provider for .NET i.e. ODP.NET is used to access data from the Oracle database in the .NET Core apps using Entity Framework Core. This uses the Oracle.EntityFrameworkCore.dll, a managed library. This data provider allows using Code-First and Database-First approaches to perform Read/Write Operations with Oracle database.    Implementation To implem...
Read more