How to create your own video editor — powered by FFmpeg Android?

FFmpeg

FFmpeg is a powerful multimedia framework which allows us to decode, encode, transcode, stream, filter and play most of the media content available now. With the help of these tools, you can develop and application that can manipulate any form of media to the desired output. Sky is not the limit when using FFmpeg. I prefer FFmpeg-all which is a Bible for FFmpeg but it is difficult to read if you do not know what you are looking for. To make it easy, I will summarise the basics of video manipulations using FFmpeg which, then you can use in your own applications or libraries that you are working on. I have developed a simple library that enables you to trim and crop a video, additionally you can compress any video and convert it into any format that you desire.

Library: VideoEditor

In order to use FFmpeg in your android project, you have to follow a few simple steps,

1. In your app level build.gradle, add a dependency for FFmpeg.

2. Add a check to see if the device supports your current version of FFmpeg or not.

3. In your main class file, initialise the FFmpeg module.

4. Decide on what do you want to implement and convert it into a FFmpeg command.

Commands can be fed into the FFmpeg class with the help of an array. Each option is passed as an element in the array. This array is then loaded using the execute method from FFmpeg class.

Example 1: Trim

Here is the utility function for converting time in milliseconds to the desired format for feeding it as Start and End positions in the above command.

Example 2: Crop

The crop rect can be displayed in the UI to let the user reposition the crop area and the Rect values can be fetched using this library,

Library: ImageCropper

You can implement this by adding an image view which loads the current frame of the video and adding the CropImageView layout over it to get the crop bounds. Once crop area is selected, the returned Rect values can be used to calculate the desired values in the crop option of the above command.

5. For a classy UI, you can create a custom RangeSeekBar that can help you traverse in the video. It consists of a left and right handles to control the trim area and a line handle to manipulate the frame currently shown. Also a TimeLineView that shows the frames available in the video would be great.

RangeSeekBar with left and right handles

Line handle for seeking a frame from video

6. TimeLineView can be implemented with a simple method. The underlying concept is divide the video into a certain number of frames depending on the view’s width and display them sequentially. Duration of the video can be found using MediaMetadataRetriever and we already know the view’s width. A single frame at a particular duration in the video can be fetched using getFrameAtTime() method in MediaMetadataRetriever. So, the total number of possible frames that can be displayed is viewWidth / frameWidth. But, at times, the frame width can have a large width resulting in displaying only few frames in the TimeLineView. So, we have to maintain a threshold to make sure, more frames are displayed. If the number of calculated frames < threshold, crop the frames to a certain extend and then display them. The below code, explains the process.

7. Changing Formats

Changing the format of a video is very simple, just specify whatever format you want in the outputPath of the command that you execute using FFmpeg class. Example: Video_Sample_001.mp4 will process the output in mp4 format irrespective of what the input format is.

8. Video Compression

Video compression is nothing but scaling down the resolution of the video and it can be done with the help of a simple FFmpeg command.

scale option helps us to specify the desired width and height of the output video. You can specify it in numbers like scale=100:200 and also using the generic terms scale=iw:ih if you don’t want to change either of the dimensions. You can also perform operations in the scale option. If you want to downscale by a factor of 2, you can do scale=iw/2:ih/2, and if you don’t want to risk changing the aspect ratio, you can do scale=700:-1.

9. Callbacks

Callbacks such as OnTrimVideoListener and OnCropVideoListener in my VideoEditor library, helps you to track the progress, completion and error states of the FFmpeg command execution. Implement these callbacks in your activities/fragments.

10. Add VideoTrimmer in your project

In your layout.xml,

In your activities/fragments,

setOnTrimVideoListener sets the listener OnTrimVideoListener which you have implemented in your activity/fragment.

setOnVideoListener sets the listener OnVideoListener which you have implemented in your activity/fragment for controlling the video.

setVideoUri sets the video Uri for which you want to trim.

setVideoInformationVisibility is optional and it decides whether to show the time range TextView or not.

setMaxDuration sets the maximum range of the RangeSeekBar.

setMinDuration sets the minimum range of the RangeSeekBar.

setDestinationPath allows you to set your desired destination path for your output.

11. Add VideoCropper in your project

In your layout.xml,

In your activities/fragments,

setOnCropVideoListener sets the listener OnCropVideoListener which you have implemented in your activity/fragment.

setMinMaxRatios is optional, which allows you to set minimum and maximum aspect ratios for cropping.

setDestinationPath allows you to set your desired destination path for your output.

Your output will be returned to the callback’s getResult method as an Uri with which you can save the media to the MediaStore and make them usable in other applications.

Github: https://github.com/tizisdeepan

Twitter: https://twitter.com/tizisdeepan

LinkedIn: https://www.linkedin.com/in/tizisdeepan/

Library: https://github.com/tizisdeepan/VideoEditor

Happy Coding!