Android App Development: How to Overlay Video on a Video
Since we live in the epoque of Snapchat, Instagram and other visual social networks, lot’s of people started to get obsessed with cool and funny video effects. Many companies create corporate channels to promote their services through video content, optimizing it for better ranking. Mobile app developers wonder more and more how to overlay video on a video, what kinds of techs to use and will it be successful at all. That’s why developers of Mobilunity decided to conduct a small test the main idea of which was to record a video with effects using a mobile device, so that the process would look like this:
- Firstly, you choose one animated overlay effect from the list.
- Then, you click the button “Slap Me” and the chosen effect is shown on the screen.
- You record the video.
- Complete variant of the video can be saved on the SD card or shared with your friends on social networks
FFmpeg Library for Testing Video Overlay Effects
Our developers decided to use FFmpeg library for this test. If we need to do some transformations or changes in the video – the library has a rich number of filters to choose from. For our task we have chosen two filters – chroma key and overlay. We have tried to execute the filters in the command line on PC with Windows OS.
Example of applying a chroma key filter
First example below shows how animated overlay video influences the main video:
ffmpeg -i video.mp4 -i effect.mp4 -filter_complex "[0:v][1:v]overlay=eof_action=pass[out]" -map "[out]" out.mp4
In case we need to remove background color in the video effect – we can use chroma key filter. Next example shows how we can remove background color in the video and overlay effect on it:
ffmpeg -i video.mp4 -i effect.mp4 -filter_complex "[1:v]chromakey=0x12da11:0.2[chromakey_res];[0:v][chromakey_res]overlay=eof_action=pass[out]" -map "[out]" out.mp4
Testing of FFmpeg Library on Android
On Windows this code works perfectly fine, but we also needed to test FFmpeg library on Android OS. We had two choices to perform this:
- Build FFmpeg’s source code for Android and use NDK to write needed code on C language.
- Use the library which builds the bridge between Java and native C++ libraries.
Firstly we’ve selected the former variant. We tried to build FFmpeg’s source code for Android OS. We checked out several tutorials on how to do this, but there were some issues anyway. We tried to fix these issues but got new ones instead. This is why we finally decided to select the second variant. We’ve created small project for testing, where we tried to use chromakey and overlay filters. After this testing we found out that chromakey filter doesn’t exist, but it was successfully added after month. Anyway, we had an issue with overlay filter as well. It turned out that this library doesn’t support video overlay effects, it is only capable of overlaying images on the video.
Based on our research we understood that creating an application with video overlay effects takes a lot of time. Most of the applications don’t need to be written with the help of the libraries on C language. If your application performs many calculus, in this case you may consider to use such type of libraries, but you need to be very careful, because it complicates your code much and as a result you won’t be able to debug the function which was written on C language.
We conduct different types of experiments in order to gain more experience in mobile app development and provide high quality and trendy mobile solutions to our clients. Being experts in web and mobile development, we are offering great solutions for different types of businesses, so that they could choose the best-fitting model of development, whether it’s outstaffing (dedicated teams for hire) or outsourcing an idea to Mobilunity.