Setup guide for web

This page shows you how to set up your development environment to use MediaPipe Tasks in your JavaScript web applications.

Supported platforms and versions

To create web applications with MediaPipe Tasks, your development environment requires the following:

  • Chrome or Safari browser
  • A web application that uses Node.js and NPM. Alternatively, you can use script tags to access MediaPipe Tasks through a content delivery network (CDN).

MediaPipe Tasks dependencies

MediaPipe Tasks provides three prebuilt libraries for vision, text, and audio. Depending on the MediaPipe Task used by the app, import the vision, text, or audio library into your development project.

Generative AI tasks

The MediaPipe Tasks Generative AI module contains tasks that handle image or text generation. To import the MediaPipe Tasks Generative AI libraries, import the following dependencies into your development project.

LLM Inference API

The MediaPipe LLM Inference task is contained within the tasks-genai library.

npm install @mediapipe/tasks-genai

If you want to deploy to a server, you can use a content delivery network (CDN) service, such as jsDelivr, to add code directly to your HTML page.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

Vision tasks

The MediaPipe Tasks vision module contains tasks that handle image or video inputs. To import the MediaPipe Tasks vision library, import the following dependency to your into your development project.

npm install @mediapipe/tasks-vision

If you want to deploy to a server, you can use a content delivery network (CDN) service, such as jsDelivr, to add code directly to your HTML page.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Text tasks

The MediaPipe Tasks text module contains tasks that handle string inputs. To import the MediaPipe Tasks text library, import the following dependency to your into your development project.

npm install @mediapipe/tasks-text

If you want to deploy to a server, you can use a content delivery network (CDN) service, such as jsDelivr, to add code directly to your HTML page.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/text_bundle.js"
    crossorigin="anonymous"></script>
</head>

Audio tasks

The MediaPipe Tasks audio module contains tasks that handle sound inputs. To import the MediaPipe Tasks audio library, import the following dependency to your into your development project.

npm install @mediapipe/tasks-audio

If you want to deploy to a server, you can use a content delivery network (CDN) service, such as jsDelivr, to add code directly to your HTML page.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/audio_bundle.js"
    crossorigin="anonymous"></script>
</head>

BaseOptions configuration

The BaseOptions allow for general configuration of MediaPipe Task APIs.

Option name Description Accepted values
modelAssetBuffer The model asset file contents as a Uint8Array typed array. Uint8Array
modelAssetPath The path of the model asset to open and map into memory. TrustedResourceUrl
Delegate Enables hardware acceleration through a device delegate to run the MediaPipe pipeline. Default value: CPU. [CPU,
GPU]

Troubleshooting

For help with technical questions related to MediaPipe, visit the discussion group or Stack Overflow for support from the community. To report bugs or make feature requests, file an issue on GitHub.