suggestions on snapchat clone with different images super-imposed over camera?

[acomito]

Have you come across this functionality yet? It sounds like you can use react-native-camera:

Subviews
This component supports subviews, so if you wish to use the camera view as a background or if you want to layout buttons/images/etc. inside the camera then you can do that.

But not sure that shows up in the final snapped pictured.

[spencercarli]

Hmm I've never tried that and honestly I'm not sure how it would be done. As it stands right now the camera is actually serving as the background and then the photo button is overlaid on it.

But to add and save a video on it I'm not sure. Maybe take a snapshot of the screen with the item on it? But as I type that it doesn't seem right...

Wish I could be of more help - good luck!

[sheprdinc]

Hey in Snapchat, when you're in selfie mode, you can decorate your face with filter overlays that stick to your face and follow your face movement around on the screen. Directing this question at @acomito , have you accomplish this yet in React Native app? Is this even possible in React Native? Or would I have to go pure native for that, like Android or iOS?

[acomito]

@sheprdinc I never ended up pursuing this app. It sounds similar to a card swiping component like tinder, where the card follows your finger around the screen which is the gesture API and animate APIs. But in this case the item isn't following the position of your finger its the position of a face. My guess is it'd be a combination of the animate API moving the decoration around the x/y axis and some sort of facial recognition API playing a similar role to what the gesture API was doing with tinder swipe cards. But I don't know if there's a react-native module for that let alone a native one... maybe helpful to check some of these out:

https://www.reddit.com/r/javascript/comments/4waokb/use_react_native_and_microsoft_face_api_to_a/

https://www.sitepoint.com/use-react-native-to-a-create-a-face-recognition-app/

https://code.tutsplus.com/tutorials/how-to-create-a-face-detection-app-with-react-native--cms-26491

But in summary I'm guessing you need to get gesture-API-like data (that follows the face) and tie that in with react-native animations.

[spencercarli]

Man thinking about this it could be a really fun project to hack around on. I was looking at tracking.js (which has a face detection api). My only unknown is how you could get access to the real time video stream from something like react-native-camera. Might toy around with this a bit today.

[acomito]

@spencercarli @sheprdinc

https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14

[sheprdinc]

you both have sent in me in the right direction to begin my tinkering... much appreciated @spencercarli @acomito

Also, @twomedia seems to have solved it using SCrecorder library and its React Native wrapper:
rFlex/SCRecorder#220 (comment)
https://github.com/maxs15/react-native-screcorder
https://itunes.apple.com/us/app/sticker-booth-animated-gif/id1157522905?mt=8

[twomedia]

@sheprdinc The iMessage "Sticker Booth" app I built using SCRecorder doesn't use React Native. It's just a standard iMessage app.

[Daniel-TheProgrammer]

@sheprdinc The iMessage "Sticker Booth" app I built using SCRecorder doesn't use React Native. It's just a standard iMessage app.

That is true @twomedia