Snap Chat like face filters using React native ViroReact

Question

I want to make barber app in which users can try hair styles on them using Augmented reality technology. I want to build the app using react native, and I have found that in react native only ViroReact providing the facility of AR. So can we implement this thing using ViroReact?? If not then what should I use??

Answer 1

You can use the capability of face tracking provided by AR platform to assist the app in implementing natural interactions between users and virtual objects.

Here is the documentation of ViroReact.

Huawei provides React Native plug-ins for you to integrate AR Engine, by using the capabilities of facial recognition, graphics rendering, and AR display to access Product (hair style) AR fitting.

The main procedures are as follows:

1. Create a FaceViewActivity inherited from Activity, and create the corresponding layout file.
2. Override the onCreate method in FaceViewActivity to obtain FaceView.
3. Create a listener for Switch. When Switch is enabled, call the loadAsset method to load the 3D model of the product. Set the position of facial recognition in LandmarkType.

mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        mFaceView.clearResource();
        if (isChecked) {
            // Load materials.
         int index = mFaceView.loadAsset("FaceView/sunglasses.glb", LandmarkType.TIP_OF_NOSE);
        }
    }
});

4. Create a onBtnTryProductOn in MainActivity. When the user taps the onBtnTryProductOn button, the FaceViewActivity is called, which enables the user to view the AR fitting effects.

You can download the plugin on Github.

For more details, see docs.

Answer 2

I am to late for answer but may be use full to others.

Sceneform library may be useful for AR face detection and it related filtering functionality. Its available for react native & android native