Streaming MVC Video for Mobile Web Browsers

Question

Hi guys, I want to stream video from my Azure blob through the ASP.NET MVC web application for users on desktop browsers and, of course, mobile browsers.

What I have created so far is an ASP.NET MVC application that serves the website and the WebApi service, which will be PushStreamContent. This works amazingly on Chrome and Edge on the desktop. But wen I'm trying to open it on a Chrome, Safari, Firefox mobile device, it just doesn't play.

My code is:

Project Type MVC

<video id="vPlayer" class="video-js" autoplay controls playsinline preload="auto" data-setup='{"fluid": true}'poster="@ImgManager.GetVideoImgUrl(Model.ThumbnailUrl)"> <source src="//xyz.nl/api/Videos/Get?filename=340a85a3-ccea-4a2a-bab6-74def07e416c.webm&type=video%2Fwebm" type="video/webm"> <source src="//xyz.nl/api/Videos/Get?filename=340a85a3-ccea-4a2a-bab6-74def07e416c.mp4&type=video%2Fmp4" type="video/mp4"> 

Webpi

 public HttpResponseMessage Get(string filename, string type) { var video = new VideoStream(filename); var response = Request.CreateResponse(); response.Content = new PushStreamContent(video.WriteToStream, new MediaTypeHeaderValue(type)); return response; } 

WebAPI Assistant

 public class VideoStream { private readonly string _filename; public VideoStream(string fileName) { _filename = fileName; } public async Task WriteToStream(Stream outputStream, HttpContent content, TransportContext context) { try { var storage = new AzureMainStorage("avideo"); byte[] file = await storage.GetFileAsync(_filename); var buffer = new byte[65536]; using (var video = new MemoryStream(file)) { var length = (int)video.Length; var bytesRead = 1; while (length > 0 && bytesRead > 0) { bytesRead = video.Read(buffer, 0, Math.Min(length, buffer.Length)); await outputStream.WriteAsync(buffer, 0, bytesRead); length -= bytesRead; } } } catch (HttpException ex) { Utilities.LogErrorToDb(ex); return; } finally { outputStream.Close(); } } } } 

Answer 1

So, after some time, trying all sorts of things that I pressed into this article from Microsoft, I solved this problem perfectly. Link to the article

Here is the code that worked for me:

 public HttpResponseMessage Get(string filename, string type) { MemoryStream stream = new MemoryStream(new AzureMainStorage("avideo").GetFile(filename)); HttpResponseMessage partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent); partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, "video/mp4"); return partialResponse; }