[MUSIC PLAYING] JEN PERSON: The
MediaPipe Image Segmenter tasks lets you divide
images into regions based on predefined categories. You can use this functionality
to identify specific objects or textures, and then apply
visual effects like background blurring. There are APIs available
for Android, Python, and the web with more
coming in the future. To get started using the Image
Segmentation task for the web, it's a good idea to
first take a look at the available
segmentation models. The task includes several
models specifically trained for segmenting people and their
features within image data, including a person in the
background, a person's hair only, and a person's hair,
face, skin, clothing, and accessories. There's also a more
generalized model that segments different
categories, including background, person, cat,
dog, and potted plant. The available models might
change over time so definitely check the docs for
the latest details. If you're not sure what model
is right for your use case, try them all out in
MediaPipe Studio. You can also try out different
configuration options so you can see everything
the task can do. Now that you've chosen
a model, install the tasks-vision package. You can download the
package using npm and use a JavaScript
compilation tool like Webpack or you can import the
package using a CDN. MediaPipe for web uses
WebAssembly or WASM, a binary instruction format
for a stack-based VM. You don't need to
understand WASM to use media pipe
solutions for the web, just know that WASM
allows non-web-based code to run on the web. And for the best
user experience, you don't want to bundle
your model or WASM binary into your website. Instead, store them server
side and provide links when initializing
your Image Segmenter. Let's take a look at how
to initialize the Image Segmenter using example code. Here, I have a function
createImageSegmenter. First, we configure
our WASM binary loading using the
FilesetResolver.forVisionTasks method. Then, we create
the Image Segmenter using the
ImageSegmenter.createFrom options method, passing the
FilesetResolver you just created and the model. You can also provide
optional parameters. outputCategoryMask
provides an image mask where each pixel is colored the
best fit category at that pixel according to the segmentation. outputConfidenceMasks
provides a list of image masks, one for each
category where each pixel's value tells you how well
that pixel corresponds to that particular category. Running mode is
either image or video, depending on whether you
segment images or videos. Image is the default value. To run segmentation
on an image, use the imageSegmenter.segment
method, passing the image source. This function is
synchronous, which is a good thing to keep in
mind when designing your UI. This source can be
an HTMLCanvasElement, HTMLVideoElement,
HTMLImageElement, ImageData, or ImageBitmap. There's also a version
of the segment method that uses a callback. The callback-based
method is more efficient and memory will be freed
automatically for you, but the segment result
resources will only exist when the
callback is running, so use the other method
if you need to be able to access them later. You can access your
segmentation results through the categoryMask or
confidenceMasks properties. The content of
the output depends on the output type you set
when you configured the task. Each use case for this
data will be unique so check out the CodePen
demo for an example you can tweak to fit your needs. When you're done using the
Image Segmenter results, call the close
method to clean up. If you use the closure method,
then you don't need this step. To segment objects
in frames of a video, get the current time
using performance.now. Then, get the
segmentation result using the Image Segmenter
segmentForVideo method, passing your video element
and the current time. And that's it. With this code, you can get
started with image segmentation in your own web app. You can check out a complete
code example on CodePen and view all the available
solutions on the MediaPipe website or get hands on with
solutions in MediaPipe Studio. All these great resources
are linked in this video. All right, you've
heard enough from me. It's your turn. Tell me what you're working
on, tell me what you learn, tell me what you
still want to know. Leave a comment here on
YouTube or on LinkedIn. I can't wait to
see what you build. [MUSIC PLAYING]
