# Gesture-Based Beauty Parameter Adjustment System for LetMagic SDK on UniApp Live Streaming Platform Amid fierce competition among live streaming platforms, innovative interaction methods are vital to elevating streamer experience and content expressiveness. When streamers are fully immersed in performances or commentary, repeatedly lowering their heads to locate and tap beauty adjustment sliders on screen inevitably breaks their rhythm and distracts their attention. To solve this pain point, we designed and implemented a gesture-driven beauty adjustment system. Streamers can dynamically tweak effects such as skin smoothing intensity and face slimming degree through intuitive on-screen swipes, pinches and other gestures, enabling imperceptible control where visual effects respond instantly to hand movements. This article thoroughly analyzes the design concepts and implementation logic of the system. ## Original Design Intention: Free Streamers’ Hands and Attention Traditional beauty adjustment panels essentially transplant the operation logic of professional post-production software onto mobile devices, forcing streamers to complete a disjointed, inefficient workflow: 1. Shift gaze away from the live main view to locate control widgets 2. Precisely tap or drag tiny sliders 3. Repeatedly look up and down to compare footage before and after adjustments The gesture control solution addresses this core pain point, guided by three design principles: intuitive operation, scenario integration and zero interruption. - **Intuitive Operation**: Gesture mapping aligns with natural human perception. For example, swiping upward over the face brightens skin tone, while pinching inward with two fingers slims facial contours. These gestures feel like directly sculpting one’s digital appearance. - **Scenario Integration**: Gestures blend seamlessly with live content. Musical streamers can tap their cheeks to switch filters following the beat; gaming streamers can quickly swipe mid-match to sharpen visuals. Gestures become part of the performance instead of disrupting it. - **Zero Interruption**: All adjustments are performed directly on the video preview canvas without exiting full-screen mode or relying on floating buttons, preserving a clean, immersive live view. ## Core Architecture: Three-Layer Linked Gesture Processing Pipeline Built on UniApp’s hybrid framework, the system adopts a three-stage pipeline consisting of a gesture capture layer, logic parsing layer and native execution layer to deliver ultra-fast responses from touch input to visual effect changes. ### Layer 1: Gesture Capture Layer (UniApp View Layer) Instead of covering the entire video frame with a transparent gesture overlay (which would intercept all touch events and interfere with likes, comments and other interactions), we adopt intelligent zone division and intent prediction. Basic gesture features are extracted in real time, including swipe direction (up/down/left/right), the central point and distance variation between two fingers (to identify zoom and pinch motions), and gesture duration. Raw feature data is instantly passed to the next layer. ### Layer 2: Logic Parsing Layer (UniApp Logic Layer / Vuex State Management) A gesture-parameter mapping engine maintains a configurable rule table with sample mappings as follows: 1. Single-finger vertical swipe within the right-edge active zone → mapped to skin smoothing intensity. Pixel displacement of the swipe is converted into a 0–100 intensity value via a smooth transition function. 2. Two-finger pinch over the facial area → mapped to face slimming intensity. The shrink ratio of finger distance directly determines the strength of the reshaping effect. #### State Management & Anti-Jitter Optimization - Real-time feedback: As gestures continue, the mapping engine continuously outputs updated parameter values and synchronizes state variables that drive UI hints (such as translucent indicator bars along screen edges). - Intelligent anti-shake throttling: To prevent parameter fluctuations and excessive native function calls triggered by frequent gesture events, the engine applies smooth filtering to gesture data and outputs stable target parameters at a visually fluid rate of up to 60 times per second. ### Layer 3: Native Execution Layer (Native Plugins & LetMagic SDK) #### Cross-Platform Plugin Communication Parameter instructions generated by the parsing layer invoke encapsulated native plugin methods via `uni.requireNativePlugin` or UniModule, delivering batched parameter updates to the native side. #### Native Beauty SDK Control Upon receiving commands, native plugins immediately call exposed LetMagic SDK APIs to set new parameter values. A key optimization lies in incremental updating and batch submission: frequent single parameter calls within a short window are merged and sent to the rendering pipeline all at once to reduce overhead. #### Integration with RongCloud Audio & Video Pipeline Frames processed by the beauty SDK are rendered for local preview in real time. Meanwhile, via custom video pre-processing or external video source interfaces provided by the RongCloud Audio & Video SDK, beautified frames with up-to-date effects are seamlessly encoded and pushed to the live streaming CDN, so audiences instantly see all adjustments made by streamers. ## Key Technical Implementation & Experience Optimization ### Dynamic Gesture Learning & Personalized Adaptation The system records streamers’ frequent gesture patterns and adjustment amplitudes to gradually learn individual preferences. For instance, if a streamer consistently uses large gesture movements for minor tweaks, the system automatically increases the control sensitivity of that gesture for more comfortable operation over time. ### Visual Feedback System Subtle yet clear visual cues eliminate blind operation during gesture control: - Faint glow indicators: Minimal translucent halos or arrows appear near fingertips to mark the adjusted parameter type (e.g., an upward arrow for enhanced whitening) and current intensity while gestures are active. - Parameter HUD: Key real-time values (e.g., Skin Smoothing: 75) briefly display in a corner of the frame in a heads-up display style for quick verification. All feedback elements are rendered efficiently with CSS animations on the UniApp view layer to eliminate perceptible latency. ### Conflict Resolution & Accidental Touch Prevention - Priority arbitration: Gesture recognition takes precedence within designated active zones; brief taps without sliding pass through to trigger other interactive functions such as screen clearing and camera switching. - Misoperation filtering: Unintentional taps are discarded by evaluating gesture stability at touch start and the clarity of movement trajectories. ## Conclusion Implementing gesture-controlled beauty adjustment on UniApp live streaming platforms is far more than adding a fancy feature — it represents a paradigm shift in user interaction: users no longer need to navigate fixed UI widgets, and operations respond directly to their intentions. We built a complete technical closed loop covering precise gesture capture, intelligent parsing and efficient native execution, converting complex parameter tuning into intuitive spatial gestures that make beauty control utterly natural. This fully unlocks streamers’ creativity and lets them focus entirely on live content, while underlying technology quietly and accurately fulfills every beautification demand. This set of logic is not limited to beauty adjustment, and provides an extensible underlying framework for richer real-time interactive controls in future live streaming scenarios.