This page shows you how to set up your development environment to use MediaPipe Tasks in your JavaScript and TypeScript web applications. ## Supported platforms and versions To create web applications with MediaPipe Tasks, your development environment requires the following: - Modern browser with WebAssembly support (Chrome, Edge, Safari, or Firefox; WebGPU-enabled browser recommended for large generative, retrieval, and decision models) - A web application that uses Node.js and npm. Alternatively, you can import MediaPipe Tasks ES modules directly through a content delivery network (CDN). ## MediaPipe Tasks dependencies MediaPipe Tasks provides five prebuilt domain packages for vision, text, audio, retrieval, and decision tasks. Install the package that matches the task used by your application, or import its ESM bundle from a CDN such as [jsDelivr](https://www.jsdelivr.com/). ### Vision tasks The MediaPipe Tasks vision package (`@mediapipe/tasks-vision`) contains tasks that process images, video files, and live camera streams (such as Hand Landmarker, Face Landmarker, Pose Landmarker, Object Detector, and Image Segmenter). See [Prepare vision input data](https://developers.google.com/edge/mediapipe/solutions/prepare_data#vision) for supported DOM media inputs. npm install @mediapipe/tasks-vision To import directly from a CDN in HTML without a bundler, point `FilesetResolver` to the matching `/wasm` directory on the CDN: ### Text tasks The MediaPipe Tasks text package (`@mediapipe/tasks-text`) contains tasks that analyze and embed text strings (such as Text Classifier, Language Detector, and Text Embedder). npm install @mediapipe/tasks-text To import directly from a CDN in HTML: ### Audio tasks The MediaPipe Tasks audio package (`@mediapipe/tasks-audio`) contains tasks that classify audio clips, transcribe speech, and synthesize voice audio (Audio Classifier, Audio Transcriber, and Text-to-Speech). See [Prepare audio input data](https://developers.google.com/edge/mediapipe/solutions/prepare_data#audio) for `AudioContext` and `AudioWorkletNode` examples. npm install @mediapipe/tasks-audio To import directly from a CDN in HTML: ### Retrieval tasks The MediaPipe Tasks retrieval package (`@mediapipe/tasks-retrieval`) provides on-device chunking, vector indexing, retrieval-augmented generation (RAG), and multimodal text, image, and audio embeddings (Semantic Retriever and Universal Embedder). npm install @mediapipe/tasks-retrieval To import directly from a CDN in HTML: ### Decision tasks The MediaPipe Tasks decision package (`@mediapipe/tasks-decision`) evaluates structured choices, boolean rules, and rubric scores in a single calibrated forward pass (Decision Maker). npm install @mediapipe/tasks-decision To import directly from a CDN in HTML: ## BaseOptions configuration `BaseOptions` configures the model source and hardware delegate shared across MediaPipe Task APIs: | Option name | Description | Accepted values | |---|---|---| | `modelAssetBuffer` | The model asset file contents as a `Uint8Array` typed array or `ReadableStreamDefaultReader`. | `Uint8Array` \| `ReadableStreamDefaultReader` | | `modelAssetPath` | The URL or relative path of the model asset to download and map into memory. | `string` | | `delegate` | Enables hardware acceleration through WebGL/WebGPU (`GPU`) or WebAssembly (`CPU`). Default value: `CPU` (`GPU` for `AudioTranscriber` and `DecisionMaker`). | `"CPU"` \| `"GPU"` | ## Troubleshooting For help with technical questions related to MediaPipe, visit the [discussion group](https://groups.google.com/forum/#!forum/mediapipe) or [Stack Overflow](https://stackoverflow.com/questions/tagged/mediapipe) for support from the community. To report bugs or make feature requests, [file an issue on GitHub](https://github.com/google-ai-edge/mediapipe/issues).