Click here to Skip to main content
11,481,404 members (61,837 online)
Click here to Skip to main content

Upload and Convert Video File to Flash Video (flv) and Progressive Streaming using ASP.NET Handler

, 1 Aug 2013 CPOL 99.1K 9.3K 125
Rate this:
Please Sign up or sign in to vote.
Upload video/audio file and convert video to Flash video (flv) and do progressive streaming using an ASP.NET handler.

Introduction 

Using this application, you can upload video in any format (.mov, .avi, .wav, flv). If you do not upload a video file in flv format, then it will be converted to an flv file using ffmpeg for progressive streaming. An ASP.NET handler is used for pseudo-streaming and a flowplayer is used to show the flv files. You can also play MPEG-4 H.264 (.mp4) formatted file using flawplayer. I will also discuss progressive streaming of .mp4 here.

Implementation

In my previous blog here, you can see the implementation of an ASP.NET handler for uploading a file using valums AJAX upload and I am using this file upload handler for uploading video and audio files. As flv is the best format for websites, the video file is converted to flv format after upload.

Uploading Video File and Converting to Flash Video (flv) Format

In my previous article, I have shown how to upload an image file using valum's AJAX upload using ASP.NET handler. I am using the same valum’s upload control for uploading the video/audio file. This supports multiple uploads by default but you can set params to upload single files only by setting the parameter multiple:false. Also I have given restrictions in allowed extensions.

var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader-demo1'),
        action: 'FileUpload.ashx',
        template: '<div class="qq-uploader">' +
        '<div class="qq-upload-drop-area"><span>Drop files here to upload
</span></div>' +
        '<div class="qq-upload-button">Upload a video</div>' +
        '<ul  class="qq-upload-list"></ul>' +
     '</div>',
        multiple: false,
        allowedExtensions: ['flv', 'mov', 'mp4', 'avi', '3gp', 'mgp', 'wmv'],
        debug: true,
        onComplete: function (id, fileName, responseJSON) {
            if (responseJSON.success)
                $("#videoContainer").append("<div class='player' 
	style='display:block;width:400px;height:400px;
	background-image:url(" + responseJSON.image + ");
	' href='" + responseJSON.path + "'>
	<img src='images/play_large.png' alt='Play this video' />
	</div>");

            flowplayer("div.player", "Scripts/flowplayer/flowplayer-3.2.7.swf", {
                clip: {
                    autoPlay: false,
                    autoBuffering: true
                }
            });
        }
    });

In the above code snippet, valum’s upload options are changed to support single upload and only video files. I have also changed the template of the upload button. I will discuss the OnComplete code later.

As the user is watching the progressive stream of flv files, when the user is uploading an flv file, only a thumbnail is created from that file. But when the user uploads other a formatted file like .mov, avi, mpeg or .wav, then a video file is converted to flv format. FFMPEG is a very lovely tool for converting video files. Using this tool, you can extract audio from video and also generate a thumbnail from a video file specific frame.

I am not familiar with the ffmpeg command arguments so I used standard options for Flash Video (flv). The format I have got from WinFF is:

"ffmpeg.exe" -i "sample.avi" -vcodec flv -f flv -r 29.97 
	-s 320x240 -aspect 4:3 -b 300k -g 160 -cmp dct  -subcmp dct  
	-mbd 2 -flags +aic+cbp+mv0+mv4 -trellis 1 -ac 1 -ar 22050 -ab 56k "sample.flv" 

Using this code snippet, I have converted my 25MB .wav file to an 1.4M flv file. You will not be able to run the ffmpeg command using ASP.NET basic authentication. So for running ffmpeg.exe, you need to impersonate a specific user account. Here, you can see how to impersonate a specific user in code.

if (Path.GetExtension(phyicalFilePath).Equals(".flv")) return phyicalFilePath;
if (AuthenticationHelper.ImpersonateValidUser("user", ".", "*******"))
{
    var argument = string.Format("-i {0} -vcodec flv -f flv -r 29.97 
	-s 320x240 -aspect 4:3 -b 300k -g 160 -cmp dct  -subcmp dct  
	-mbd 2 -flags +aic+cbp+mv0+mv4 -trellis 1 -ac 1 -ar 22050 
	-ab 56k {1}", phyicalFilePath, 
	Path.ChangeExtension(phyicalFilePath, "flv"));
           // var argument = string.Format("-i {0} -crf 35.0 
	-vcodec libx264 -acodec libfaac -ar 48000 -ab 128k 
	-coder 1 -flags +loop -cmp +chroma -partitions 
	+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 
	-g 250 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 
	-b_strategy 1 -threads 0 {1}", phyicalFilePath, 
	Path.ChangeExtension(phyicalFilePath, "mp4"));
               
    ProcessStartInfo process = new ProcessStartInfo(ffmpegPhysicalPath, argument);
    Process proc = new Process();
    proc.StartInfo = process;
    proc.Start();
    proc.WaitForExit();
    AuthenticationHelper.UndoImpersonation();
    return Path.ChangeExtension(phyicalFilePath, "flv"); 

Here you can see the command for converting a video file into Flash video (flv) format. When you use my code, you have to set the ffmpegPhysicalPath field variable with the physical path of the ffmpeg.exe file.

You can send the flv file path to the client when the flv conversion is completed and the flowplayer will ask the ASP.NET handler for streaming the video. But I also want to show a thumbnail splash image so that user can understand that the video is uploaded. And on clicking the splash image, the ASP.NET handler will be called and the user can see the video using flawplayer.

Generating a thumbnail image from the video file is very easy using ffmpeg. In the flawplayer forum, you can see the details of generating a thumbnail from the video: http://flowplayer.org/tutorials/generating-thumbs.html.

After completing these steps, I send a JSON response to contain the flv location and image location.

var flvpath = ConvertToFLV(phyicalFilePath);
var tumbnail = CreateThumbnail(phyicalFilePath);

context.Response.Write("{success:true, name:\"" + 
   filename + "\", path:\"" + path + "/" +
   Path.GetFileName(flvpath) + "\", image:\"" + 
   path + "/" + Path.GetFileName(tumbnail) + "\"}");

Uploading a Large File

You might fail to upload large files as by default IIS supports content length up to 30000000 bytes.

FlashVideoStreaming/contentlenght.png

You also need to set maxRequestLength in web.config otherwise you will get an exception while fetching a large file. Suppose I support a maximum 2 GB size file in my site. My web.config settings are:

<system.web>
    <compilation debug="true" targetFramework="4.0" />
    <httpRuntime maxRequestLength="4124672" requestValidationMode="2.0" />
  </system.web>

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="4223664128"></requestLimits>
      </requestFiltering>
    </security>
    <handlers>
      <add name="MP3Streaming" path="*.mp3" verb="*" type="MP3Streaming" 
		resourceType="Unspecified" preCondition="integratedMode" />
      <add name="flvStreaming" path="*.flv" verb="*" type="FLVStreaming" 
		resourceType="Unspecified" preCondition="integratedMode" />
    </handlers>
</system.webServer> 

Here maxRequestLength is in KB and maxAllowedContentLength is in byte format. Now you can upload a maximum 2G file using Valum's upload control.

Watching Progressive Streaming Video using ASP.NET Handler

Flowplayer forum http://flowplayer.org/forum/5/14702#post-14702 discusses the steps to implement progressive streaming using an ASP.NET handler very well so for IIS settings you can read information there. I have just copy pasted and used the same code in my handler. So when flowplayer requests to the server to get an flv file, the FLVStreaming handler will be called which will provide the flv file progressively.

You can download flowplayer SWF file from the FlowPlayer site. A thumbnail of the video and flv location is sent after uploading using Valum's control. So here OnComplete function code is:

onComplete: function (id, fileName, responseJSON) {
    if (responseJSON.success)
        $("#videoContainer").append("<div class='player'  
			style='display:block;width:400px;height:400px;
			background-image:url(" + responseJSON.image + ");
			' href='" + responseJSON.path + "'>
			<img src='images/play_large.png' alt='Play this video' />
			</div>");

                    flowplayer("div.player", 
			"Scripts/flowplayer/flowplayer-3.2.7.swf", {
                        clip: {
                            autoPlay: false,
                            autoBuffering: true
                        }
                    });
                }
            });

You can see here the thumbnail image is set as the background and a play image is displayed in the middle. After clicking on the image, the flowplayer script will be called and a request for the flv file is send to the server and then the FLVStreaming handler will be called.

FlashVideoStreaming/videoplayer.png

Streaming MP4 Video

FlowPlayer also supports H.264 mp4 video format. You can also use the JW Player.

Converting Video File into MP4 Formatted Video File

The ffmpeg command for converting a video file into a h264 MP4 formatted video file is:

var argument = string.Format("-i {0} -crf 35.0 -vcodec libx264 
		-acodec libfaac -ar 48000 -ab 128k -coder 1 -flags +loop 
		-cmp +chroma -partitions +parti4x4+partp8x8+partb8x8 
		-me_method hex -subq 6 -me_range 16 -g 250 -keyint_min 25 
		-sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -threads 0 {1}", 
		phyicalFilePath, Path.ChangeExtension(phyicalFilePath, "mp4"));

The implementation of the andler for MP4 can be found here. You can see that the client type is different for MP4. You can also use the JW Player. But I do not want to mix two implementations here, so I did not provide the MP4 handler here.

Streaming an MP3 Audio

The handler for MP3 audio is the same as for the flv player but just the content-type is different.

context.Response.AppendHeader("Content-Type", "audio/mp3");
context.Response.AppendHeader("Content-Length", fs.Length.ToString()); 

Flowplayer also supports MP3 files. We can change the configuration of FlowPlayer using the following script:

var uploader = new qq.FileUploader({
        element: document.getElementById('file-uploader-demo2'),
        action: 'AudioUpload.ashx',
        multiple: false,
        template: '<div class="qq-uploader">' +
        '<div class="qq-upload-drop-area"><span>Drop files here to upload
</span></div>' +
        '<div class="qq-upload-button">Upload a mp3</div>' +
        '<ul style="display:none" class="qq-upload-list"></ul>' +
     '</div>',
        allowedExtensions: ['mp3'],
        debug: true,
        onComplete: function (id, fileName, responseJSON) {
            if (responseJSON.success)
             
            $("#audioContainer").append("<a id='audioPlayer'  
style='display:block;height:30px;' href='" + responseJSON.path + "'/>");
            $f("audioPlayer", "Scripts/flowplayer/flowplayer-3.2.7.swf", {

                // fullscreen button not needed here
                plugins: {
                    controls: {
                        fullscreen: false,
                        height: 30,
                        autoHide: false
                    }
                },

            clip: {
                autoPlay: false,

                // optional: when playback starts close the first 
// audio playback
                onBeforeBegin: function () {
                    $f("player").close();
                }
            }
        });
    }
}); 

After the upload is complete, flowplayer will be displayed like this. And clicking on the Play button, it will call the MP3 streaming handler and run the MP3 in a progressing manner.

FlashVideoStreaming/mp3player.JPG

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Syed BASHAR
Software Developer
Bangladesh Bangladesh
Name SYED MD. ABUL BASHAR
Email ID: miltoncse00@gmail.com

I am now working as software engineer in Malaysia. I am from Bangladesh and I have completed my B.Sc (Engg.) in CSE from Rajshahi University of Engineering and Technology (RUET).I spend much time in learning latest technology.

My LinkedIn Profile : http://bd.linkedin.com/in/miltoncse00[^]

My blog :http://ciintelligence.blogspot.com/[^]

Comments and Discussions

 
QuestionHow to Download Source Code in one click... Pin
aarif moh shaikh28-Nov-14 19:13
professionalaarif moh shaikh28-Nov-14 19:13 
Questionmp4 to mp3 Pin
ch.haya12-Jul-14 2:23
memberch.haya12-Jul-14 2:23 
GeneralMy vote of 5 Pin
Babak Jahangiri24-Aug-13 21:41
professionalBabak Jahangiri24-Aug-13 21:41 
Questionwhy we can't download the sourcecode Pin
wuhanhush11-Aug-13 1:54
memberwuhanhush11-Aug-13 1:54 
GeneralMy vote of 5 Pin
wuhanhush11-Aug-13 1:52
memberwuhanhush11-Aug-13 1:52 
QuestionDownload link Pin
namirtek7-Aug-13 0:08
membernamirtek7-Aug-13 0:08 
QuestionRe: Download link Pin
wuhanhush11-Aug-13 1:55
memberwuhanhush11-Aug-13 1:55 
Questiongetting errors Pin
Shantanu sinha30-Jul-13 18:14
memberShantanu sinha30-Jul-13 18:14 
AnswerRe: getting errors Pin
Syed BASHAR1-Aug-13 7:52
memberSyed BASHAR1-Aug-13 7:52 
GeneralRe: getting errors Pin
Shantanu sinha1-Aug-13 19:33
memberShantanu sinha1-Aug-13 19:33 
Question200 stream not found netstream.play.streamnotfound.... [modified] Pin
dinesh_8-Nov-12 23:39
memberdinesh_8-Nov-12 23:39 
GeneralMy vote of 5 Pin
Rahman Masudur31-Aug-12 22:33
memberRahman Masudur31-Aug-12 22:33 
QuestionAbout IIS Pin
P. Gopinathan6-Aug-12 21:26
memberP. Gopinathan6-Aug-12 21:26 
AnswerRe: About IIS Pin
Syed BASHAR9-Aug-12 22:22
memberSyed BASHAR9-Aug-12 22:22 
GeneralRe: About IIS Pin
P. Gopinathan11-Aug-12 3:19
memberP. Gopinathan11-Aug-12 3:19 
GeneralRe: About IIS Pin
Syed BASHAR11-Aug-12 4:23
memberSyed BASHAR11-Aug-12 4:23 
QuestionUse with webcam Pin
magic.on6-Jun-12 11:15
membermagic.on6-Jun-12 11:15 
Questionquestion Pin
Sara_Mardini7-Apr-12 9:28
memberSara_Mardini7-Apr-12 9:28 
QuestionHii Pin
Member 799495419-Feb-12 0:38
memberMember 799495419-Feb-12 0:38 
Question2.0 framework compiled version Pin
Member 41310722-Feb-12 6:28
memberMember 41310722-Feb-12 6:28 
QuestionThis code in VB.NET Pin
Member 455468711-Oct-11 2:25
memberMember 455468711-Oct-11 2:25 
Questionplease provide me same source code in asp.net 3.5 Pin
Member 82294135-Oct-11 0:03
memberMember 82294135-Oct-11 0:03 
QuestionDon't Work Pin
sozturk_198123-Sep-11 5:05
membersozturk_198123-Sep-11 5:05 
AnswerRe: Don't Work Pin
Syed BASHAR23-Sep-11 5:58
memberSyed BASHAR23-Sep-11 5:58 
QuestionIf rewrite on NET 3.5 CopyTo method - not [modified] Pin
toologic200016-Sep-11 10:56
membertoologic200016-Sep-11 10:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 1 Aug 2013
Article Copyright 2011 by Syed BASHAR
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid