Introduction

In this article we will see how we can perform video conversion using the command line and a video tool popularly known as FFMPEG in Silverlight 4.

About FFMPEG

FFMPEG is a free to use command line tool to convert multimedia files, which includes both audio and video. You can download the tool from here.

This tool is widely used for video conversion on websites. The reference for the tool and its commands and the FAQ can be found at www.ffmpeg.org.

Why in Silverlight

Why Silverlight? Well Silverlight is also a web based technology that can also provide video conversion on solution. The Expression Encoder product also provides video encoding feature but that has to be installed on the system and then the encoded video has to be uploaded or streamed.

Now we will see how we can use the tool in our Silverlight Application.

We need to have the followings to proceed:

• Visual Studio 2010
• Download and keep a copy of the tool FFMPEG.exe.
• Silverlight 4

Create Silverlight Application

Fire up Visual Studio 2010 in Admin mode (Run as Administrator), create a Silverlight Application and select the version as .Net Framework 4; give the solution a name such as FFMPEGSL4.

We need to run the application out of browser with elevated trust level. To do that, refer to the following screenshot.

You can check the checkbox for Show install menu if you have hosted the silverlight application in a web page. Or you can uncheck it if you are not in web application mode.

Now we need to have a normal .NET 4 class library, which will be available for COM. Name the library as ComFFMPEG.

Delete the default class1.cs created for you.

Add a new class to the ComFFMPEG project and name it as ComFFMPEGHelper.cs.

As we discussed earlier we need to have the class library visible as COM. To do that, right click on the project and select properties. It will bring the properties section of the class library project.

In the Build section of the property page, select the checkbox "Register for COM interop". Save the changes and we are ready to work with Silverlight 4. Silverlight 4 has the cool feature that it interacts with the COM directly without the help of Silverlight class library.

We need to register the assembly for COM Visibility. Go to the Application tab and find the Assembly Information Button.

By default the checkbox for "Make assembly COM-Visible" is unchecked. Check the option and fill the details of assembly (filling the details is optional and can be ignored).

Now we need to include the FFMPEG.exe to the project. Remember, for running the commandline tool we need a full path. So we can either take the path from the project or we can refer to the path from the file system where it is copied.

As you see in the below image, we have created a folder "FFMPEG" and we have copied the ffmpeg.exe into that.

Now open the class "ComFFMPEGHelper". We need to set the attributes required for making the COM-Visibility.

Use the namespace "System.Runtime.InteropServices", which contains the attributes.

We need the following attributes:

• Guid
• ProgId
• ComVisible

We can either provide the ComVisible attribute on the class itself or on a method-basis inside the class.

We need the "Microsoft.CSharp.dll" reference so that we can use the dynamic programing in Silverlight. So go ahead and add the reference to the Silverlight project.

Now let's design the Silverlight page for our basic conversion operations. Open the application in Expression Blend and implement the following design.

Displaying Media (Video) Information

Let's create a method and name it as DisplayMediaInfo in the ComHelper.cs and to make it COM visible let's add the attribute [ComVisible(true)].

Now we need to create a process and call the File FFMPEG. Remember that we have to give absolute path to call the process from the COM.

To display the media information, the following command is required, which is in the following format:

ffmpeg.exe -i <filename.extension>

Note that we have to use absolute path for the file (i.e. full path). The following code shows the implementation of the above description.

As you can see from the above code, we are passing a string as a parameter to the method. The parameter will contain the absolute path of the file.

Normally, FFMPEG.exe gives output through the StandardErrorOutput, so we need to check whether there is any error for the displaying info. Here is the trick for the tool: the -i command is normally for taking the input. But if we don't give any further output filename then by default it displays the error message as "No Output File is mentioned". So we can ignore that message here, and display the information.

As you can see, we are returning a string from the method, which will have all the details about the media.

Now come back to Silverlight project and open MainPage.xaml.cs.

On the Button Click event of the "Open Media" we have to call the method dynamically. Use the following code snippet for calling the method from COM.

Now that we have the string returned with all the information about the media, and we can separate the info with the following method.

As you see above the required information is gathered by the above method. The information provided might be different for each file but the inforamtion will be in the format always.

Now that we have displayed the media information, we can display the thumbnail of the media. There are two ways in which we can display a thumbnail.

The first one is easy: add a media element to the page and set the StartPosition of the media to 4 seconds; that would give you a thumbnail.

The second method is also easy, since we are using COM for calling the ffmpeg.exe; which has the capability to give output as image file. I have used the 2nd method, which we have just discussed.

Display Thumbnail of the Media (Video):

Using FFMPEG we can take a snapshot of a particular time and save it as any image format. In this sample we will save the image as a JPEG format. The following command is required for taking snapshot:

ffmpeg -itsoffset -4 -i <filename.extension> -vcodec mjpeg -vframes 1 -an -f rawvideo -s 320x240 <filename.jpg>

In the above command the absolute path has to be given for input and output filenames. The following code snippet is written in ComFFMPEGHelper class and the method is also COM visible.

Now we need to call the method from Silverlight, so go back to MainPage.xaml.cs, where we will call the method.

Convert Video with H.264 Codec

As you know we have H.264 video codec support for Silverlight 4. So we will convert a video file which is not having the codec. In FFMPEG, there are a number of presets available to convert a video in H.264 codec. You copy the presets folder to the COM project as we have done for FFMPEG.exe.

To access a preset from the folder, we also need its absolute path.

To call a preset using FFMPEG use the following command:

ffmpeg –i <filename.extension> -codec libx264 -vpre <preset path> <filename.extension>

Using the above command we can convert any video format to H.264 codec based video file. For our sample application we will save the file in MP4 extension.

The following code has to be written in the Com library, which is COM visible.

Now go back to MainPage.xaml.cs since we need to call the method.

When we convert a video of small size or large, usually it takes some time to convert. During that time, we should see some information like the Video is converting or the progress of the conversion.

To achieve that we have added the BusyIndicator control which is available in Silverlight 4 toolkit. We will set the IsBusy property to true.

Also, we need to run the conversion in background, so we will use a BackgroundWorker which will convert the video in the background.

The following code shows how to do it.

Now that we are done with the code, it's time for testing the application. Run the application and select a video file from the My Documents folder.

The following screenshots shows the application running.

Conclusion

We have successfully converted a video using FFMPEG and a Silverlight 4 application.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 13 articles on DotNetSlackers. View other articles or the complete profile here.