How to Integrate Face Stickers Into Your Apps With HUAWEI ML Kit
in this tutorial, we learn how to use a machine learning kit to create virtual stickers that stay on an object in motion in your camera.
Join the DZone community and get the full member experience.Join For Free
Nowadays, you’ll see cute and funny face stickers everywhere. They’re not only used in camera apps, but also in social media and entertainment apps. In this post, I'm going to show you how to create a 2D sticker using HUAWEI ML Kit. We’ll share the development process for 3D stickers soon, so keep an eye out!
Apps that are used to take and edit photos, such as cameras and social media apps (TikTok, Weibo, and WeChat, etc.), often offer a range of stickers which can be used to customize images. With these stickers, users can create content which is more engaging and shareable.
Add the Huawei Maven Repository to the Project-Level build.gradle File
Open the build.gradle file in the root directory of your Android Studio project.
Add the Maven repository address.
Add SDK Dependencies to the App-Level build.gradle File
Apply for Camera, Network Access, and Storage Permissions in the AndroidManifest.xml File
Set the Face Analyzer
Obtain Face Contour Points and Pass Them to the FacePointEngine
Use the camera callback to obtain camera frame data, then call the face analyzer to obtain face contour points, and pass the points to the FacePointEngine. This will allow the sticker filter to use them later.
You can see the face contour points which the ML Kit API returns in the image below.
Sticker JSON Data Definition
Make a Cat Sticker
Create a JSON file of the cat sticker, and find the center point between the eyebrows (84) and the point on the tip of the nose (85) through the face index. Paste the cat's ears and nose, and then place the JSON file and the image in the assets directory.
Render the Sticker to a Texture
We use the GLSurfaceView to render the sticker to a texture, which is easier than using the TextureView. Instantiate the sticker filter using
onSurfaceChanged, pass the sticker path, and start the camera.
Initialize the Sticker Filter in onSurfaceChanged
Draw the Sticker on the Screen Using onDrawFrame
And that's it, your face sticker is good to go.
Let's see it in action!
For more information, please visit HUAWEI Developers.
For detailed instructions, please visit Development Guide.
You can join the HMS Core developer discussion on Reddit.
You can download the demo and sample code from GitHub.
To solve integration problems, please go to Stack Overflow.
Opinions expressed by DZone contributors are their own.