WhoBuilt

Machine Learning with React Native using MediaPipe and TFLite

Oct 18, 2021· 37 min· 5.6K views·Watch on YouTube

Speaker

Shivay Lamba, a Google Summer of Code mentor at MediaPipe and TensorFlow and developer advocate at Fabrica, explains machine learning with React Native at React Native EU 2021, hosted by Callstack.

Why run machine learning on devices

Mobile devices are widely used, but their processors are less powerful than those in computers and servers. Running models on the device can reduce the latency of sending data to a cloud service. Compact models and mobile-focused support make tasks such as translation, image classification, and object detection more practical on phones.

MediaPipe and its ready-made solutions

Lamba describes MediaPipe as Google's open-source, cross-platform framework for building perception pipelines with audio, video, and sensor data. Its ready-to-use solutions include Selfie Segmentation, Face Mesh with 468 facial landmarks, Hand Tracking with 21 landmarks, and Human Pose with 33 landmarks. He cites uses such as background effects, virtual makeup, exercise monitoring, and augmented reality.

How MediaPipe processes a stream

A hand-tracking pipeline resizes video frames, converts them to tensors, runs model inference, and draws detected landmarks over the output. Lamba explains that MediaPipe graphs connect processing nodes called calculators, which pass packets containing images, tensors, metadata, and timestamps. Calculators handle stages such as image processing and inference, while subgraphs can group tasks like hand or pose landmarks.

Choosing between MediaPipe and TensorFlow Lite

TensorFlow Lite supports on-device inference from models converted from TensorFlow, and can run a wider variety of model types. Lamba positions MediaPipe as a fit for streaming audio and video tasks, such as pose detection, exercise monitoring, and facial effects. He then demonstrates a React Native image-detection example using a TensorFlow Lite package, selectable models, and bounding boxes labeled with predicted objects and confidence scores.

React Native support and next steps

Lamba says React Native support for MediaPipe solutions was limited at the time of the talk, while native Android and iOS support was available and integration work was underway. He recommends MediaPipe for streaming applications such as virtual physiotherapy or dance instruction, and TensorFlow Lite for lightweight on-device model inference. He points viewers to MediaPipe resources and invites questions through Twitter and GitHub.

Takeaways

  • Run inference on the device when reducing network latency matters.
  • Consider MediaPipe for real-time pipelines involving video, audio, or sensor streams.
  • Use TensorFlow Lite when you need to run a converted TensorFlow model on mobile.
  • Check model support and React Native integration before choosing a mobile ML approach.
  • For object detection, return confidence scores alongside labels and bounding boxes.

Mentioned in this talk

Search inside this talk

What was claimed 11

Related talks