Implementing Azure Video Streaming in MVC C-Sharp

As more businesses rely on video content to engage with customers, it’s become increasingly important to have a reliable, scalable video streaming solution. Azure Video Streaming is one such solution that provides fast and efficient streaming of high-quality video content. In this blog post, we’ll walk you through the process of implementing Azure Video Streaming in an MVC C# web application.

Prerequisites

Before we get started, make sure you have the following:

• An Azure subscription
• An MVC C# web application
• A video to stream

Create an Azure Media Services account

The first step in implementing Azure Video Streaming is to create an Azure Media Services account. Follow these steps to create an Azure Media Services account:

1. Log in to your Azure portal.
2. In the left-hand navigation pane, click on “Create a resource”.
3. Search for “Media Services” in the search bar.
4. Click on “Media Services” from the search results.
5. Click on the “Create” button to create a new Media Services account.
6. Fill out the required information, such as the account name, subscription, and resource group.
7. Click on the “Review + create” button to review your settings.
8. Once you’re satisfied with your settings, click on the “Create” button to create your Media Services account.

Upload your video to Azure Media Services

After you’ve created your Media Services account, the next step is to upload your video to Azure Media Services. Follow these steps to upload your video:

1. Log in to your Azure portal.
2. Go to your Media Services account.
3. Click on “Assets” in the left-hand navigation pane.
4. Click on the “Upload” button to upload your video file.
5. Follow the prompts to upload your video.

Encode your video for streaming

Before you can stream your video, you need to encode it for streaming. Azure Media Services supports a variety of encoding options, including Adaptive Bitrate Streaming (ABR) and Smooth Streaming.

ABR is a technique for streaming videos that adjusts the bitrate of the video in real-time based on the viewer’s internet connection speed. This ensures that the viewer always gets the best possible video quality without buffering.

Smooth Streaming is another technique for streaming videos that uses multiple bitrate streams to deliver a smooth, uninterrupted viewing experience.

To encode your video, follow these steps:

1. Log in to your Azure portal.
2. Go to your Media Services account.
3. Click on “Transforms” in the left-hand navigation pane.
4. Click on the “Add” button to create a new transform.
5. Fill out the required information, such as the name and output settings.
6. Click on the “Save” button to create your transform.
7. Click on “Jobs” in the left-hand navigation pane.
8. Click on the “Submit Job” button to create a new job.
9. Fill out the required information, such as the input asset and output settings.
10. Click on the “Submit” button to start the job.

Create an Azure CDN endpoint

Now that your video is encoded for streaming, the next step is to create an Azure CDN endpoint. Follow these steps to create an Azure CDN endpoint:

1. Log in to your Azure portal.
2. Go to your Media Services account.
3. Click on “Streaming endpoints” in the left-hand navigation pane.
4. Click on the “Add” button to create a new streaming endpoint.
5. Fill out the required information, such as the name and pricing tier.
6. Click on the “Create” button to create your streaming endpoint.
7. Click on the streaming endpoint to view its details.
8. Click on the “Manage” button to manage your endpoint.
9. Click on the “Custom domains” tab to add a custom domain.
10. Follow the prompts to add your custom domain.

Implement Azure Video Streaming in your MVC C# web application

Now that your video is uploaded, encoded, and ready to be streamed, it’s time to implement Azure Video Streaming in your MVC C# web application. Follow these steps to implement Azure Video Streaming in your web application:

1. Install the Azure Media Services NuGet package in your web application.
2. Add the following code to your controller action that will serve the video:

   using Microsoft.WindowsAzure.MediaServices.Client;
   
   public ActionResult StreamVideo(string assetId)
   {
       CloudMediaContext context = new CloudMediaContext("your-media-services-account-name", "your-media-services-account-key");
       var asset = context.Assets.Where(a => a.Id == assetId).FirstOrDefault();
       var assetFile = asset.AssetFiles.Where(f => f.Name.ToLower().EndsWith(".ism")).FirstOrDefault();
       var locator = context.Locators.CreateLocator(LocatorType.OnDemandOrigin, asset, AccessPermissions.Read, TimeSpan.FromDays(30));
       var url = locator.Path + assetFile.Name + "/manifest";
       ViewBag.VideoUrl = url;
       return View();
   }
   

3. In your view, add the following code to display the video:

   <video src="@ViewBag.VideoUrl" controls></video>
   

4. Replace “your-media-services-account-name” and “your-media-services-account-key” with your actual Media Services account name and account key.

And that’s it! You’ve successfully implemented Azure Video Streaming in your MVC C# web application. Your video will now be served through the Azure CDN endpoint you created, ensuring fast and reliable streaming for your viewers.

Conclusion

In this blog post, we’ve walked you through the process of implementing Azure Video Streaming in an MVC C# web application. By following these steps, you can ensure that your video content is served quickly and efficiently to your viewers, providing a seamless and engaging viewing experience.