Instagram style face filters created with web technologies
MIT License
A demo showcasing what's possible with face filters on the web. Built completely with free and open-source libraries. These ones in particular:
These are more for myself, but might be useful for anyone who wants to fork and have a play!
npm install
npm run dev
: Start development servernpm run build
: Package up the app (will appear in dist
)npm run deploy
: Uses gh-pages to automatically deploy to Github Pages.This project is mostly Typescript, but the sketch files are Javascript. This is just to allow for quick and creative development for the fun parts of the code. :)
Rather than constantly pulling faces on a webcam while developing, you can choose to load in a video instead. These are not included in the repo and must be added to a directory in the root named test-video
. You'll need to reference this video settings.ts
(e.g. fakeCam: myCoolTestVideo.mp4
). Set fakeCam
to false
if you don't want to use the test video. Please note, that things break if there isn't some sort of video to use (even if you've disabled it).
The dev server needs to run as HTTPS for webcam access. Unfortunately iOS is quite fussy with this and just simply enabling https: true
for Webpack dev server isn't enough. Therefore, when testing iOS, you'll need to make some changes to the setup. Details are mentioned in this Github comment.
inline: false
in the devServer
webpack settings (webpack.dev.js
).If you're not worried about iOS, just set https
to true
in webpack.dev.js
, rather than referencing the certificates.