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

acomito commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

@spencercarli @sheprdinc

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

sheprdinc commented 7 years ago

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: https://github.com/rFlex/SCRecorder/issues/220#issuecomment-252486325 https://github.com/maxs15/react-native-screcorder https://itunes.apple.com/us/app/sticker-booth-animated-gif/id1157522905?mt=8

twomedia commented 7 years ago

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

Daniel-TheProgrammer commented 3 years ago

@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

spencercarli / react-native-snapchat-clone

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