search

jeeliz / jeelizFaceFilter

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
https://jeeliz.com
Apache License 2.0
2.71k stars 535 forks source link

How to add capture image feature? #122

Closed ghost closed 5 years ago

ghost commented 5 years ago

Hi Xavier, I have two questions, I am trying to use the demo based on Canvas2d "Draw with your mouse" in a create-react project and I am running into errors. Can you suggest a good way to do it?

Secondly, once I can successfully integrate the demo in the create-react-app, I want to add a feature where we can click a picture of us with the filter. Something like a photo-booth.

Can you please guide me on how should I approach this? Thanks mate.

xavierjs commented 5 years ago

Hi,

I don't want to work with specific frameworks like React. React is great to build front-end apps but Jeeliz FaceFilter is something which can be usable with any framework. You can submit a PR with a React demo, but I won't provide support for high end frontend frameworks like React, Angular, Vue, ...

Your second question is strongly related to this closed issue: https://github.com/jeeliz/jeelizFaceFilter/issues/53 If you draw above the canvas with <div> elements I think it will be a mess to implement the capture image feature.

You should use THREE;js or raw webgl to draw on your canvas so that you can directly get capture the image using canvas.toDataURL(). React is great for front-end dev but I think it will be a loss of time and performance to use it for this. You can still use react for the global structure of your app, but for the face filter module you have to get out of react paradigm, use a unique canvas not managed by react. This closes issue contains some information about how to interface it with react: https://github.com/jeeliz/jeelizFaceFilter/issues/74

Best, Xavier

ghost commented 5 years ago

You're very helpful as always. I'll look into the above closed issues. Thanks again!