Streaming videos with ASP.NET Core 3

Question

I'm currently building a API in ASP.NET Core 3 as my first project with .NET Core.

I'm currently trying to send a video to my React.js frontend to watch it in the browser. Uploading files and videos does work without a problem and the method you see down below also already sends a file to the client but if the video is longer than a few seconds, the video player is really slow and it also takes a long time to skip a few seconds of the video. I think that's because the file is first completely downloaded and than played.

[Route("getFileById")] public FileResult getFileById(int fileId) {      var context = new DbContext();      var file = context.File.Find(fileId);      if (file == null)     {         Console.WriteLine("file " + fileId + " not found");         return null;     }      var content  = new FileStream(file.Name, FileMode.Open, FileAccess.Read, FileShare.Read);     var response = File(content, "application/octet-stream");     return response; } 

I think the way to solve my problem is to stream the file and not to send it as a whole. I've already googled on how to stream videos with ASP.NET Core 3 but I only find websites explaining it for ASP.NET Core 2 (e.g. http://anthonygiretti.com/2018/01/16/streaming-video-asynchronously-in-asp-net-core-2-with-web-api/)

I've already tried to use the code on these websites but the way they've done it is not compatible to ASP.NET Core 3.

How can I stream files in ASP.NET Core 3?

Answer 1

If you want to stream the video in the browser, your server should support HTTP range requests. In such case, the server is able to send just a small portion of a content requested by the client. As you want to stream video in the browser, you can use video html tag that requests for a content using range headers. Therefore you can also skip some time and immediately play the movie from that position, before it is completely downloaded.

ASP.NET Core 3 already has support for HTTP range requests, it is implemented in PhysicalFile method which has attribute enableRangeProcessing. As documentation says:

Returns the file specified by physicalPath (Status200OK), the specified contentType as the Content-Type, and the specified fileDownloadName as the suggested file name. This supports range requests (Status206PartialContent or Status416RangeNotSatisfiable if the range is not satisfiable).

[Route("getFileById")] public FileResult getFileById(int fileId) {     ...     return PhysicalFile($"C:/movies/{file.Name}", "application/octet-stream", enableRangeProcessing: true); } 

Note that the path have to be absolute (not relative).