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/drawing_utils@0.1/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.1/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/holistic@0.1.