MediaPipe in JavaScript

{: .no_toc }

TOC {:toc}

Attention: Thanks for your interest in MediaPipe! We are moving to https://developers.google.com/mediapipe as the primary developer documentation site for MediaPipe starting April 3, 2023.

Ready-to-use JavaScript Solutions

MediaPipe currently offers the following solutions:

Solution	NPM Package	Example
Face Mesh	@mediapipe/face_mesh	mediapipe.dev/demo/face_mesh
Face Detection	@mediapipe/face_detection	mediapipe.dev/demo/face_detection
Hands	@mediapipe/hands	mediapipe.dev/demo/hands
Holistic	@mediapipe/holistic	mediapipe.dev/demo/holistic
Objectron	@mediapipe/objectron	mediapipe.dev/demo/objectron
Pose	@mediapipe/pose	mediapipe.dev/demo/pose
Selfie Segmentation	@mediapipe/selfie_segmentation	mediapipe.dev/demo/selfie_segmentation

Click on a solution link above for more information, including API and code snippets.

Supported platforms:

Browser	Platform	Notes
Chrome	Android / Windows / Mac	Pixel 4 and older unsupported. Fuchsia
		unsupported.
Chrome	iOS	Camera unavailable in Chrome on iOS.
Safari	iPad/iPhone/Mac	iOS and Safari on iPad / iPhone /
		MacBook

The quickest way to get acclimated is to look at the examples above. Each demo has a link to a CodePen so that you can edit the code and try it yourself. We have included a number of utility packages to help you get started:

@mediapipe/drawing_utils - Utilities to draw landmarks and connectors.
@mediapipe/camera_utils - Utilities to operate the camera.
@mediapipe/control_utils - Utilities to show sliders and FPS widgets.

Note: See these demos and more at MediaPipe on CodePen

All of these solutions are staged in NPM. You can install any package locally with npm install. Example:

npm install @mediapipe/holistic.

If you would rather not stage these locally, you can rely on a CDN (e.g., jsDelivr). This will allow you to add scripts directly to your HTML:

<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/holistic.js" crossorigin="anonymous"></script>
</head>

Note: You can specify version numbers to both NPM and jsdelivr. They are structured as <major>.<minor>.<build>. To prevent breaking changes from affecting your work, restrict your request to a <minor> number. e.g., @mediapipe/[email protected].