Innovating Music Social Experiences with Real-Time Beauty Effects

shuoxin wangshuoxin wang
5 min read

Many people have their eyes set on short video platforms, but StarMaker—a music social app—has quietly risen to global prominence. Featuring “K-singing + social,” StarMaker incorporates voice rooms, live streams, and casual games. Since its launch in 2016, the platform has rapidly amassed over 310 million users worldwide, thanks to its high-quality audio/video experience, varied interaction features, and a comprehensive music library. It now consistently ranks among the top music/audio apps in more than 130 countries and regions.

However, with explosive user growth comes new challenges in performance and user experience.

CHALLENGE

1. Optimizing Low-End Device Compatibility & Beauty Performance

StarMaker’s user base is mainly in regions like the Middle East, Southeast Asia, and South America, where affordable Android phones are widespread. In some cases, customers still use five-year-old devices with CPUs of only 1.8–2.4GHz and OS versions below Android 11. Running online karaoke, live streaming, and beauty effects on these underpowered phones often leads to lag, overheating, or frequent disconnects.

Ensuring satisfying beauty-effects performance on low-spec handsets became a pressing issue for StarMaker. Initially, the team attempted an in-house solution, but adapting to countless device models and optimizing each filter (face slimming, eye enlargement, stickers, etc.) proved extremely labor-intensive.

2. From Hardware Compatibility to Localized Beauty Styles

As the StarMaker user demographic became more diverse, the app needed to address variations in skin tones, facial structures, and cultural aesthetics:

  • Face recognition and effects fitting: By training and testing algorithms on multiple ethnic facial features, the SDK is able to deliver more precise and natural beauty outcomes.

  • A rich library of stickers and effect materials that reflect global cultural events and everyday life scenes. Regular updates ensure users can always find trending, creative options aligned with their personal style.

CORE STRATEGY: Maintaining Beauty Quality While Maximizing Performance

After evaluating resource allocation and product demands, StarMaker decided to integrate the Tencent RTC Beauty AR SDK. Within just two weeks, they completed in-depth optimization on both performance and visual effects, enabling devices over a decade old to maintain a stable 30 fps while applying beauty filters.

  1. Streamlined Rendering Pipeline

    The Tencent RTC SDK examined basic beautification, makeup, and dynamic effects, merging redundant rendering processes and minimizing extra rendering nodes to accelerate overall performance.

  2. Lightweight Makeup

    Traditional “full makeup” was broken into modular components, each using minimal configuration files for combination. This reduces runtime overhead, while supporting flexible layering of other special effects, resulting in lower CPU and memory usage.

  3. Dynamic Sticker Loading and Cache Optimization

    By improving cache hit rates and refining loading logic, the SDK cuts down on frequent parsing, enhances performance for large animated overlays, and expedites sticker loading and playback.

Aside from general improvements, Tencent RTC pursued deeper optimizations for low-end devices:

  • Different AI models are chosen according to scene requirements—lightweight models for basic beautification and high-precision models for more intensive makeup effects.

  • A custom fast-skin-smoothing algorithm plus flexible face-mesh configurations further reduce CPU and memory usage, automatically toggling or disabling certain features when not needed.

Thanks to this multi-layered, targeted optimization, the SDK’s per-frame processing time on low-end phones dropped by up to 50%. Whether broadcasting at 1080p, 720p, or 480p, users can enjoy smoother beauty effects at approximately 30 fps.

How to build a real-time beautification app on the web

Beauty AR Web allows you to implement AR beautification, filters, makeup, stickers, and other features on websites. This guide describes how to quickly run a web application that supports real-time beautification locally.

Step 1. Create a license

1. Applying for a trial license

Ensure you have created a web license as instructed in Applying for a trial license.

Fill in the project name and enter the local development address for the domain, taking test.webar.com as an example. Click Confirm to complete the creation.

Getting the App ID 、license key, and token.

After the creation, you can see the information of the created test project in the project list and get the License Token for Beauty AR Web and the License key for the test project. You also can get the App ID.

Step 2. Run locally

  1. Pull sample project code.
 git clone <https://github.com/tencentcloud-webar/web-demo-en.git>
 cd quick-start
  1. replace the specified configuration items in index.js with the license key, token, and APPID obtained in step 1 as shown below:
/** ----- Authentication configuration ----- */

/**
 * Tencent Cloud account's APPID
 * 
 * You can also view your APPID in the [Account Center](<https://console.tencentcloud.com/developer>).
 */
const APPID = ''; // Set it to your Tencent Cloud account APPID.

/**
 * Web LicenseKey
 * 
 * obtained from Before You Start
 */
const LICENSE_KEY = ''; // Set it to your license key.

/**
 * The token used to calculate the signature.
 * 
 * Note: This method is only suitable for debugging. In a production environment, you should store the token and calculate the signature on your server. The front end can get the signature by calling an API. For details, see
 * <https://trtc.io/document/50099?platform=web&product=beautyar#e4ce3483-41f7-4391-83ae-f4b61e221ea0>
 */
const token = ''; // Set it to your token.

/** ----------------------- */
  1. Run the project in the local development environment.

Run the following commands successively in the project directory and access localhost:8090 in the browser to try out the capabilities of Beauty AR Web.

# Install dependencies
npm i 

# Compile and run the code
npm run dev

After following the steps above, you can try out the filters and effects of the SDK for desktop browser. You can use the built-in materials to try out various makeup filters and effects as instructed in Start Integration, or use more capabilities of Beauty AR Web such as custom stickers, makeup, and filters.

Conclusion

From tackling performance on entry-level hardware to aligning aesthetics across different cultures, StarMaker’s journey in music-based social networking is powered by a constant drive to refine its user experience. Its success underscores that, by genuinely focusing on user needs and perfecting product features, music and social interaction can blend seamlessly—delivering a new note of “sing-and-chat” leisure to audiences worldwide.

My name is Susie. I am a writer and Media Service Product Manager. I work with startups across the globe to build real-time communication solutions using SDK and APIs.

If you want to build face filter or other special effect into your app, welcome to contact us.

0
Subscribe to my newsletter

Read articles from shuoxin wang directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

shuoxin wang
shuoxin wang