Can we re-init the facefilter?

[mschiano]

How can I work around the 'ALREADY_INITIALIZED' error message? Can I force it to reinitialize? I'm working within React.

I have an AR component which is triggered from another component — it will change the view. I can then close out of my AR (face filter) view to bring me back to its parent component.

When I attempt to go back into my AR view, it’s eroding and telling me already initialized.

1. can I somehow kill/destroy the facefilter init from React’s componentwillunmount?

Or

2. somehow reinit the library if already initialized?

[mschiano]

Adding to this -- I know about toggle_pause, but it still shows my camera is on.

[xavierjs]

Hi,

This issue is strongly related to this one: #57
React is done to handle standard HTML elements. It would be very unoptimized to follow the react pattern and to append a new <canvas> with a new facefilter initialization each time we have to use it.

In this app we use react/redux : https://jeeliz.com/sunglasses

There is a <div> placeholder in the react DOM where the canvas should be, and the AR canvas overlays the placeholder in absolute coordinates. This is the most optimized way. The AR canvas is handled by reducers (visibility, resizing, toggle_pause/set_animateDelay).

I strongly not recommend to start/stop/restart the video acquisition through WebRTC. Some implementations of the standard/video drivers is really dumb. On apple devices for example there are a lot of reliability problems.

If you want to reinit facefilter you can still reload the full page. It won't be very handy for a one page app but you will be sure that the browser has reset everything properly.

If you still want to add this feature, we can add it as a service.

Best,
Xavier

[xavierjs]

More info about this issue:

_The canvas element is in the index.html template.
it is put into a global variable.
React handle it through the placeholder events.
For example componentDidMount will trigger a function to resize the canvas and overlay the placeholder.
This function can also move the canvas to append it in the placeholder element.

It is a react antipattern, but there is only 1 facefilter canvas and I don't see a better way to do it._