Computer vision, in the browser
Emote Detector
Give your camera a thumbs-up, flex beside your head, or yawn, and the matching Clash Royale emote pops up with its sound. MediaPipe's face, hand and pose landmarkers run on your device; no video ever leaves it.
Camera
Your camera shows here. Nothing is recorded or uploaded.
Press “Start camera” (about 40 MB of models load once) or “Play demo”.
The three gestures
-
Thumbs Up Fingers folded, thumb straight up.0% -
Goblin Muscle Flex: bend one arm, fist up beside your head.0% -
Princess Yawn A big yawn: mouth wide, eyes narrowed.0%
Hold a pose for about three frames (a tenth of a second). Emotes wait two seconds between plays.
How it works
- Each video frame goes through three MediaPipe models on your device: 478 face points, 21 points per hand, 33 body points.
- Three hand-written rules turn those points into scores: elbow angle plus wrist height and wrist-to-head distance for the flex; thumb direction plus folded fingers for the thumbs-up; mouth height relative to width plus eyelid gap for the yawn.
- A score above 0.5 for three frames in a row switches a gesture on; three frames below switches it off. The strongest active gesture fires its emote, with a two-second cooldown.
The rules are a line-for-line port of the original Python app (source and details). There is no trained classifier in this page: the original's six-class MobileNetV2 reached 68 % validation accuracy, so it stayed out.