---
layout: default
title: JavaScript Utilities
parent: MediaPipe in JavaScript
nav_order: 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][draw-npm],
* [Camera Utilities][cam-npm], and
* [Control Panel][ctrl-npm] Utilities.

### Drawing Utilities
These are for drawing on canvas using output from MediaPipe's solutions.                 
Currently, this includes three functions ~
1. *drawLandmarks*                                               
```js
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.

2. *drawConnectors*
```js
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.                           

3. *drawRectangle*
```js
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.
                                                              
### Camera Utilities
This module has a `Camera` object that can be initialized and used easily, like below.
```js
// Our input frames will come from here.
const videoElement =
    document.getElementsByClassName('input_video')[0];
const camera = new Camera(videoElement, {
  onFrame: async () => {
    // Send it to a demo, for example, hands
    await hands.send({image: videoElement});
  },
  // Set the width of camera to be rendered
  width: 1280,
  // And set the height
  height: 720
});
// Start the camera.
// Note: It will ask the user for permission, and will error out if this is not given.
camera.start();
```
### Control Panel Utilities
To showcase and monitor the model in elegant ways, MediaPipe has this Control Panel module.
This panel is also convenient to use and set up.
```js
// Pass in a <div>
new ControlPanel(controlsElement, {
      // Whether to invert the camera, defaults to false
      selfieMode: true,
      // Maximum Number of Hands to detect, a placeholder, only when using Hands API
      maxNumHands: 2,
      // Minimum Confidence score
      minDetectionConfidence: 0.5,
      // Minimum Tracking score
      minTrackingConfidence: 0.5
    })
    .add([
      // a StaticText is simply a label
      new StaticText({title: 'MediaPipe Hands'}),
      // a Toggle is one with only 2 options (i.e., true or false)
      new Toggle({title: 'Selfie Mode', field: 'selfieMode'}),
      // A slider can have multiple options. This will have the options 1,2,3 and 4. 
      // Range determines maximum and minimum allowed value
      // Step determines the difference between two options
      new Slider(
          {title: 'Max Number of Hands', field: 'maxNumHands', range: [1, 4], step: 1}),
      new Slider({
        title: 'Min Detection Confidence',
        field: 'minDetectionConfidence',
        range: [0, 1],
        step: 0.01
      }),
      new Slider({
        title: 'Min Tracking Confidence',
        field: 'minTrackingConfidence',
        range: [0, 1],
        step: 0.01
      }),
    ])
    // This is run when an option is updated. 
    // the options object will contain parameters for all the above in a array.
    .on(options => {
      videoElement.classList.toggle('selfie', options.selfieMode);
      hands.setOptions(options);
    });

```

[Ho-pg]: ../solutions/holistic#javascript-solution-api
[F-pg]: ../solutions/face_mesh#javascript-solution-api
[H-pg]: ../solutions/hands#javascript-solution-api
[P-pg]: ../solutions/pose#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