--- layout: default title: MediaPipe in JavaScript parent: Getting Started nav_order: 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][F-pg] | [@mediapipe/face_mesh][F-npm] | [mediapipe.dev/demo/face_mesh][F-demo] [Hands][H-pg] | [@mediapipe/hands][H-npm] | [mediapipe.dev/demo/hands][H-demo] [Pose][P-pg] | [@mediapipe/pose][P-npm] | [mediapipe.dev/demo/pose][P-demo] [Holistic][Ho-pg] | [@mediapipe/holistic][Ho-npm] | [mediapipe.dev/demo/holistic][Ho-demo] Click on a solution link above for more information, including API and code snippets. The quickest way to get acclimated is to look at the examples above. Each demo has a link to a [CodePen][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][draw-npm] - Utilities to draw landmarks and connectors. * [@mediapipe/camera_utils][cam-npm] - Utilities to operate the camera. * [@mediapipe/control_utils][ctrl-npm] - Utilities to show sliders and FPS widgets. Note: See these demos and more at [MediaPipe on CodePen][codepen] All of these solutions are staged in [NPM][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](https://www.jsdelivr.com/)). This will allow you to add scripts directly to your HTML: ``` ``` Note: You can specify version numbers to both NPM and jsdelivr. They are structured as `..`. To prevent breaking changes from affecting your work, restrict your request to a `` number. e.g., `@mediapipe/holistic@0.1`. [Ho-pg]: ../solutions/holistic.md#javascript-solution-api [F-pg]: ../solutions/face_mesh.md#javascript-solution-api [H-pg]: ../solutions/hands.md#javascript-solution-api [P-pg]: ../solutions/pose.md#javascript-solution-api [Ho-npm]: https://www.npmjs.com/package/@mediapipe/holistic [F-npm]: https://www.npmjs.com/package/@mediapipe/face_mesh [H-npm]: https://www.npmjs.com/package/@mediapipe/hands [P-npm]: https://www.npmjs.com/package/@mediapipe/pose [draw-npm]: https://www.npmjs.com/package/@mediapipe/pose [cam-npm]: https://www.npmjs.com/package/@mediapipe/pose [ctrl-npm]: https://www.npmjs.com/package/@mediapipe/pose [Ho-jsd]: https://www.jsdelivr.com/package/npm/@mediapipe/holistic [F-jsd]: https://www.jsdelivr.com/package/npm/@mediapipe/face_mesh [H-jsd]: https://www.jsdelivr.com/package/npm/@mediapipe/hands [P-jsd]: https://www.jsdelivr.com/package/npm/@mediapipe/pose [Ho-pen]: https://code.mediapipe.dev/codepen/holistic [F-pen]: https://code.mediapipe.dev/codepen/face_mesh [H-pen]: https://code.mediapipe.dev/codepen/hands [P-pen]: https://code.mediapipe.dev/codepen/pose [Ho-demo]: https://mediapipe.dev/demo/holistic [F-demo]: https://mediapipe.dev/demo/face_mesh [H-demo]: https://mediapipe.dev/demo/hands [P-demo]: https://mediapipe.dev/demo/pose [npm]: https://www.npmjs.com/package/@mediapipe [codepen]: https://code.mediapipe.dev/codepen