cassdlcm/mediapipe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
d41f6a88c0
mediapipe/docs/getting_started/js_utils.md
Dweep Joshipura d41f6a88c0
Create js_utils.md
2020-12-25 14:28:32 +05:30

4.4 KiB
Raw Blame History

layout title parent nav_order
default JavaScript Utilities MediaPipe in JavaScript 1

JavaScript Utils for MediaPipe

{: .no_toc }

  1. TOC {:toc}

Utilities

MediaPipe offers utilities for enabling users to use the MediaPipe Examples with ease, and conveniently integrate with existing code.
The utilities MediaPipe currently has are ~

Drawing Utilities

These are for drawing on canvas using output from MediaPipe's solutions.
Currently, this includes three functions ~

  1. drawLandmarks
drawLandmarks(canvasContext, landmarks, {
            fillColor: fillColor,
            color: color,
            lineWidth: lineWidth
        }

This function is for drawing landmarks.
The value for the landmarks parameter can be found using in the results array.

  1. drawConnectors
drawConnectors(canvasContext, landmarks, LANDMARK_CONSTANTS, {
    color: color,
    lineWidth: lineWidth
})

This is a function used for plotting connectors in various MediaPipe Solutions.
The LANDMARK_CONSTANTS are specific for every solution, so you could choose these there.

  1. drawRectangle
drawRectangle(canvasContext, {
    width: width,
    height: height,
    xCenter: xCenter,
    yCenter: yCenter,
    rotation: rotation
}, {
    color: color
})

This allows drawing of a rectangle, with a certain width, height and rotation given the coordinates of its location.

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.