MediaPipe currently offers the following solutions:
Click on a solution link above for more information, including API and code snippets.
|Chrome||Android / Windows / Mac||Pixel 4 and older unsupported. Fuschia|
|Chrome||iOS||Camera unavailable in Chrome on iOS.|
|Safari||iPad/iPhone/Mac||iOS and Safari on iPad / iPhone /|
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/@email@example.com/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@firstname.lastname@example.org/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.,