confetti-with-threejs's Introduction

Confetti: With Pose Estimation and Three.js

Setup

Download Node.js. Run this followed commands:

# Install dependencies (only the first time). No need to run `npm audit fix`
# if you are instructed to do so.
npm install

# Run the local server at localhost:8080. You will likely see a message "Your
# connection is not private" (if you are on Chrome, or related message for other
# browsers). This is because we need to use HTTPS to access the webcam in the
# browser, but no certificate has been set up for localhost. You can either
# click "Advanced" -> "Proceed to localhost" (which I did for nearly all of my
# development), or you can follow the instructions below to install a
# certificate.
# Also, make sure to grant access to your camera when/if a prompt appears.
npm run dev

[Optional] Create ssl certificate

To access the webcam, the site must use HTTPS. However, without a certificate for localhost, your browser will likely complain with the mesage "Your connection is not private".

If you would rather not see this message, you need to generate a SSL Certificate for the webpack dev server.

To do this on Mac (based on the instructions here), perform the following:

Kill the webpack dev server on the terminal if it is currently running.
Run bash ssl_cert_gen.sh.
You will be prompted with information to populate the certificate. Defaults are already supplied so you can keep pressing return.
You will need to supply your password once or twice to add the certificate to your keychain.
Once this is complete, open webpack.dev.js, and comment out the line https: true, and uncomment the https object underneath.
Re-run npm run dev and now you should no longer see a warning from your browser.