MediaWatermark: GPU/CPU-based iOS Watermark Library

Today, visual content represents the biggest part of global internet traffic. According to Social Media Examiner, images and videos together account for about 60% of all marketing content that companies publish on the web. This emphasizes the need to brand visual content with corporate identities and make it interactive. Therefore, developers have to be able to meet this need by providing their customers with effective programming solutions.

The issue of branding image and video content, or in other words images and videos overlaying, is exactly what one of our RubyGarage iOS-mates recently faced.

Why did we create a video watermark library?

Working on an application that included a lot of visual content, our iOS developer realized the need for a library or framework. In particular, he needed to add watermarks such as logos, text, and images to videos.

After investigating third party libraries for adding watermarks over images and videos that might be useful, he quickly realized that existing libraries were a good fit only for complex projects. On the contrary, our developer needed a light and simple solution.

Thus, he decided to create his own watermark library for video and image overlays – MediaWatermark – that could be integrated and installed quickly and efficiently, letting you put watermarks on videos and images.

What is MediaWatermark?

MediaWatemark is an open source GPU/CPU-based iOS watermark library for overlays adding to images or video content. It has a simple interface and straightforward functionality.

Let’s go through the details of how exactly this library was developed and what objectives it meets.

Solutions Behind MediaWatermark

While there are many ways to implement rendering functionality, we chose to use graphics processing unit (GPU) and central processing unit (CPU) to work with video and images. Let’s brush up on the concepts of GPU and CPU.

A GPU is based on floating-point arithmetics, which ensures smooth image rendering. Behind the scenes, the GPU performs a lot of floating-point computation of the values for pixels. Working efficiently with a GPU, using its texturing and pixel engines, helps to increase raw image rendering performance significantly, by one hundred or even one thousand fold, especially on mobile iOS devices.

What's the difference between a CPU and a GPU?

A CPU is a processor that can be used for any computation operations, including graphics processing. To understand the main difference between a CPU and a GPU, we need to compare how they approach processing tasks. A CPU has several cores, which perform sequential serial processing operations, whereas a GPU consists of thousands of small cores built in a massively parallel architecture optimized to handle multiple intensive tasks simultaneously. The GPU architecture makes using a GPU for image rendering more efficient.

While a GPU is faster, a CPU has higher operating frequency and greater versatility, We developed MediaWatermark taking into account the GPU’s high performance and efficiency as well as the CPU’s universality.

What are the advantages of MediaWatermark?

Now that we’ve offered an overview of the technical background and concepts behind MediaWatermark, let’s touch upon its advantages. What distinguishes this library from its counterparts and makes it so useful and convenient to implement in your project? We will consider the following benefits.

• Simplicity & Versatility. As the need to render images and texts over videos or other images is pretty frequent in development work, a library like this will go great with nearly any web or mobile application developed for iOS. MediaWatemark is easy to install and integrate, and performs a wide variety of tasks.
• Light Code. This library prevents the need to write a solution for image and video overlays each time such functionality is required, or to investigate complex solutions all over again. MediaWatemark doesn't contain much code and makes it easy to render one image over another image or over a video.
• Ease of Launching. Before using this library in your work, you may run the example project we’ve shared in the repo. When you’re ready to install and use it, you simply need to add the following line to your Podfile: pod "MediaWatermark".

How does it work?

Now that the purposes and advantages of our iOS watermark library are clear, how about actually implementing it? To run an example project or integrate MediaWatermark, you need to make sure that several technical requirements are in place.

Prerequisites

This library is developed for iOS devices only, and supports video and image watermark and overlaying filters in Swift. It works with iOS version 9.0 or higher and Swift 3.1, and is available through CocoaPods.

We’d like to share several examples so you can see how MediaWatermark performs various common tasks.

The following script templates are workable, however to make sure that everything works properly we suggest adding the complete library to your iOS project.

Example 1

To add two images with different coordinates over a third image, you may use the following code snippet. The images are placed according to the coordinates you set in the code.

Example 2

The next script template will work if you need to render an image and text over another image:

Example 3

The last example belongs to our initial task that led us to create the MediaWatermark library. To add an image and text over a video, you may refer to the following code extract:

We hope you enjoy the solution we’ve created, and we’ll be glad if you pick MediaWatermark out of all the image and video overlay and watermark libraries to add to your iOS project. You can rate it on GitHub and share your experience of using this library with us on Twitter.