cassdlcm/mediapipe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
0a937eba98
mediapipe/docs/getting_started/javascript.md
Joe Fernandez 0a937eba98 Internal change 
PiperOrigin-RevId: 513255798
2023-03-01 09:21:25 -08:00

5.0 KiB
Raw Blame History

layout title parent nav_order
default MediaPipe in JavaScript Getting Started 4

MediaPipe in JavaScript

{: .no_toc }

  1. 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. This content will not be moved to the new site, but will remain available in the source code repository on an as-is basis.

This notice and web page will be removed on 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. 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.