cassdlcm/mediapipe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
1d0e9c39c5
mediapipe/docs/getting_started/javascript.md

4.5 KiB
Raw Blame History

layout title parent nav_order
default MediaPipe in JavaScript Getting Started 4

MediaPipe in JavaScript

{: .no_toc }

  1. TOC {:toc}

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 plaforms:

Browser Platform Notes
Chrome Android / Windows / Mac Pixel 4 and older unsupported. Fuschia 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:

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.