Stream video content through Web API 2

Question

I'm in the process of working out what the best way is going to be to do the following:

I have a bunch of CCTV footage files (MP4 files, ranging from 4MB-50MB in size), which I want to make available through a web portal. My first thought was to stream the file through Web API, so I found the link below:

http://www.strathweb.com/2013/01/asynchronously-streaming-video-with-asp-net-web-api/

After implementing a sample project, I realised that the example was based on Web API 1, and not Web API 2.1, which is what I'm using. After doing some more research, I got the code to compile with WebAPI 2.1. I then realised that if I want to do streaming I cannot use MP4 files, there is a fair amount of technical detail behind this, so here is the thread:

Best approach to real time http streaming to HTML5 video client

It seems for this to work I need to encode my MP4 files to something like WebM, but that is going to take too much time. Icecast (http://icecast.org/), which is a streaming server, but I haven't tried it out yet, again not sure if this is what I need to do.

Now that I think of it, I actually don't need live streaming, I just need to allow the client to play the video file through their browser, perhaps using HTML5 video element? The thing is, my application needs to work on IOS as well, so I reckon that means I cant even encode my MP4 to FLV and just use flash.

All I really need is to have all my video clips as thumbnails on a web page, and if the client clicks on one, it begins to play ASAP, without having to download the entire file. Think of the "Watch Trailer" feature on imdb.com. Simply just play a video file, thats really what I want. I don't need LIVE streaming, which is what I think WebM is for? Again, not sure.

Answer 1

Two things:

1. Use a video element in your HTML (this works in browsers AND iOS):

   <video src="http://yoursite.com/api/Media/GetVideo?videoId=42" /> 
   

2. Support 206 PARTIAL CONTENT requests in you Web API code. This is crucial for both streaming and iOS support, and is mentioned in that thread you posted.

Just follow this example:

http://blogs.msdn.com/b/webdev/archive/2012/11/23/asp-net-web-api-and-http-byte-range-support.aspx

In a nutshell:

if (Request.Headers.Range != null)
{
    // Return part of the video
    HttpResponseMessage partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
    partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, mediaType);
    return partialResponse;
}
else 
{
    // Return complete video
    HttpResponseMessage fullResponse = Request.CreateResponse(HttpStatusCode.OK);
    fullResponse.Content = new StreamContent(stream);
    fullResponse.Content.Headers.ContentType = mediaType;
    return fullResponse;
}

Answer 2

Place the static video files on a web server and reference them in a video player. You can use HTML's standard player (<video src="http://location/of/file.mp4">) or go for something fancier - just google for "html video player".

To make sure that the video files don't have to download completely before starting to play just run them beforehand through qt-faststart.