Uses image classification on video snapshots to trigger overlays of the numbers 1, 3 and 5 or an image of the thumbs up emoji 👍. The purpose of this project is to make it clear, on video, what estimate you are giving to a story during Planning Poker.
Model trained on 6000 images and hosted using Teachable Machine.
To make this work for yourself you'll need to train your own model by training a new Image Project. Use the classes Est1, Est3, Est5 and ThumbsUp to make the classification work out of the box, otherwise change the code to match the class names you pick. You'll also need to train a class like Background to capture the state where no overlay image should be shown.
When the model has finished training, click export and copy the link into sketch.js, assigning it to the imageModelURL variable.
You should now be able to run the sketch either locally or with the p5.js editor.
There are probably multiple ways to do this but I used Open Broadcast Studio (OBS).
- Open OBS and create a new video capture source, set it to your webcam.
- Open the p5 web editor, click
file > share > present. This will open a new tab with your p5 code running in it. Drag this into a new browser window. - Create a new window capture source in OBS. Set this to the browser window opened in (2).
- Right click on the browser capture source in OBS. Apply the Chroma Key filter. Resizing both this source and the video source to allign the overlay position top right.
- (Mac Users) Install mac-obs-virtualcam. Download the
.pkgfile and run the installer. Restart OBS (you may also need to restart your machine, if step 6 is unsuccessful). - In OBS go to
tools > start virtualcam. - Join your Zoom meeting or Google Hangout, choose the OBS Virtualcam as your video source.
- Impress your friends and collegues with your integuity and whimsy.
- Use CDN for p5.js distro
- Add more fun gestures
- Render gifs rather than images