"Need help with serving/streaming video files to frontend using Entity Framework, ASP.NET Core API (.NET 6) deployed on Azure App Services, and MongoDB deployed to Atlas"

Question

Hi, I'm working on a project for streaming videos and I'm currently stuck on trying to figure out how do I serve / stream a video file for front end?

If I run everything locally, the video stream is still sent from the backend to the frontend in chunk file form and the user can watch without still loading the full video, but when I use entity framework, asp .net core api (.net 6) deploy on Azure App Services, MongoDB deployed to Atlas, the frontend video must wait for the backend to fully return before loading and watching the video.

I tried to find out and people said that because I configured the azure server incorrectly, it doesn't support chunk files. I have configured like this but it still doesn't work.

Answer 1

@Max I am not familiar with the website_chunked_transfer application setting. Upon reviewing the list of approved application settings, I do not see it listed there. With PaaS products, not all items may work as they do on a local instance.

I would argue that there are better ways to serve media in Azure such as using Azure CDN but I will provide a below sample if you wish to go via the Web App route.

To chunk data on an Entity Framework web app for video streaming within a web app, you can use the Range header in the HTTP request to request a specific range of bytes from the video file. This allows you to send the video file in small chunks, which can be streamed to the client as it is received.

Here's an example of how you can implement this in your Entity Framework web app:

1. In your controller action that serves the video file, check if the Range header is present in the HTTP request. If it is, parse the range values to determine the start and end byte positions of the requested chunk.
2. Open a FileStream to the video file and seek to the start position of the requested chunk.
3. Read the requested chunk of data from the FileStream and write it to the HTTP response stream.
4. Set the Content-Range header in the HTTP response to indicate the byte range of the requested chunk.
5. Set the Content-Length header in the HTTP response to indicate the length of the requested chunk.
6. Set the Content-Type header in the HTTP response to the appropriate MIME type for the video file.

Here's some sample code to get you started:

public IActionResult GetVideo(string videoId)
{
    // Get the path to the video file
    string videoPath = GetVideoPath(videoId);

    // Open a FileStream to the video file
    using (FileStream videoStream = new FileStream(videoPath, FileMode.Open, FileAccess.Read))
    {
        // Check if the Range header is present in the HTTP request
        if (Request.Headers.ContainsKey("Range"))
        {
            // Parse the range values to determine the start and end byte positions of the requested chunk
            string rangeHeader = Request.Headers["Range"].ToString();
            long start = long.Parse(rangeHeader.Substring(rangeHeader.IndexOf('=') + 1, rangeHeader.IndexOf('-') - rangeHeader.IndexOf('=') - 1));
            long end = long.Parse(rangeHeader.Substring(rangeHeader.IndexOf('-') + 1));

            // Seek to the start position of the requested chunk
            videoStream.Seek(start, SeekOrigin.Begin);

            // Calculate the length of the requested chunk
            long length = end - start + 1;

            // Write the requested chunk of data to the HTTP response stream
            Response.StatusCode = 206; // Partial Content
            Response.Headers.Add("Content-Range",