Easy to go mediapipe samples with p5.js!!
Note
従来のvideoタグにp5jsキャンバスを重畳する方式から、createCaptureでp5jsでのカメラキャプチャを行う方式に変更しました。この方式により、mediapipeのタスクをp5jsで簡単に実装できるようになりました。もし以前の方式を使いたい場合は、v0.10.13を利用してください。The method of overlaying a p5js canvas on the conventional video tag has been changed to the method of capturing a camera with p5js using createCapture. This method makes it easy to implement mediapipe tasks with p5js. If you want to use the previous method, please use v0.10.13.
To make it easier to handle mediapipe with p5, I have downloaded the necessary asm and js files for each example. p5MediaPipe branches are created for each version of mediapipe.
p5MediaPipe stores all necessary libraries in the project file for implementation in standalone applications.
- hands-landmarker : DEMO
- object-detection : DEMO
- object-detection-mobile-web-app-template : DEMO
- gesture-recognition : DEMO
- image classification: DEMO
- image segmentation: DEMO
- Only this example uses vision_bundle.js of v0.10.2 because vision_bundle.js of latest version causes an error.
- face landmark detection: DEMO
- pose landmark detection: DEMO
- LLM Inference: DEMO
- This example is an experimental implementation of LLM Inference. The model such as gemma-1.1-2b-it-gpu-int4.bin (https://www.kaggle.com/models/google/gemma/tfLite/gemma-1.1-2b-it-gpu-int4), is not included in the project file, so you need to download the model from the official site and load it.
- This example is an experimental implementation of LLM Inference. The model such as gemma-1.1-2b-it-gpu-int4.bin (https://www.kaggle.com/models/google/gemma/tfLite/gemma-1.1-2b-it-gpu-int4), is not included in the project file, so you need to download the model from the official site and load it.
If a newer version of mediapipe has been released, you can update the mediapipe version for each project with the following command. If necessary, replace "update" with "install" in npm.
npm update @mediapipe/tasks-vision
sh copy_files.sh
- mediapipe by Google: https://developers.google.com/mediapipe
- p5.js by processing foundation: https://p5js.org/
- fauxelsによる動画: https://www.pexels.com/ja-jp/video/3253739/