cassdlcm/mediapipe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add FPS

Browse Source
This commit is contained in:
Dweep Joshipura 2021-02-17 10:25:50 +05:30 committed by GitHub
parent 24c0280946
commit 61c71c2d7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/getting_started/js_utils.md
View File

@ -79,8 +79,17 @@ camera.start();
``` ```
### Control Panel Utilities ### Control Panel Utilities
To showcase and monitor the model in elegant ways, MediaPipe has this Control Panel module. 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. This panel is also convenient to use and set up.
One of the most interesting features is the built-in `FPS` object that allows us to monitor the FPS or Frames per Second.
```js ```js
// Initialize the FPS control
const fpsControl = new FPS();
// In the event handler function onResults() in the [Hands demo][Ho-pg]()
function onResults(results) {
// Tick the FPS, i.e., set Incrementation breaks
fpsControl.tick();
// then do the required processing on the results object
// Pass in a <div> // Pass in a <div>
new ControlPanel(controlsElement, { new ControlPanel(controlsElement, {
// Whether to invert the camera, defaults to false // Whether to invert the camera, defaults to false
@ -95,6 +104,8 @@ new ControlPanel(controlsElement, {
.add([ .add([
// a StaticText is simply a label // a StaticText is simply a label
new StaticText({title: 'MediaPipe Hands'}), new StaticText({title: 'MediaPipe Hands'}),
// Add the FPS control to the Control Panel
fpsControl,
// a Toggle is one with only 2 options (i.e., true or false) // a Toggle is one with only 2 options (i.e., true or false)
new Toggle({title: 'Selfie Mode', field: 'selfieMode'}), new Toggle({title: 'Selfie Mode', field: 'selfieMode'}),
// A slider can have multiple options. This will have the options 1,2,3 and 4. // A slider can have multiple options. This will have the options 1,2,3 and 4.