Hello everyone,
hope you’re all enjoying the summer!

In one of my new apps (yep, I love building apps on UWP Platform), I wanted to build a video service like YouTube, giving the ability to the users to upload their videos and watch them. For that purpose I am using Windows Azure StorageWindows Azure Storage and a Windows Azure Mobile App Service.

Progressive download enabled video file

Everything worked fine except one thing; When the user selected a video to watch the video couldn’t play until the whole video downloaded locally which is very frustrating especially when the video is quite big.

So I start searching for a way to make it available to the end user even if it’s not fully downloaded.
After a bit of research, one important thing about playing MP4 video file as progressive download is that the moov atom needs to be located at the beginning of the file, or else the entire file will have to be downloaded before it begins playing. The moov atom is a part of the file that holds index information for the whole file.

So, I was searching for a tool or a library available to UWP which will do that thing; Move the moov atom before the mdat atom of the video file. There are a bunch of tools out there like ffmpeg (by using a proper movflag when encoding the video) and qt-faststart which does exactly that thing.
But I couldn’t find any available to use in UWP.

First, I wrote a QueueTrigger to get the new video when it got uploaded, use ffmpeg to encode it using the faststart flag and upload it back to Azure Storage. But things got complicated for nothing.

Then, I was trying to write my own code to move the moov atom of the file at start and I did it after a bit of work. But it wasn’t working for every mp4 video file. Some video files have more atoms than others and I was too lazy to fix it.

I ended up writing a Windows Runtime Component which uses the code base of qt-faststart tool of FFmpeg, which is open source hosted on GitHub.

I adjusted it a bit to work for my purpose and that’s it! It works perfectly.

You can find it here qt-faststartUWP and use it as you want.

 

How to use

Simply clone the repo locally, build it and add reference to that from your project. Then use the QtFaststart class as below:


QtFaststart qt = new QtFaststart();
qt.EncodeVideoFileFromUri(storageFile.Path); //The path to the video file.

And that’s it! Your video file is ready to be streamed over the web.

Did you find it useful? Do you have any question? Write in comment below!

Thanks for reading,
George