Record square video on React-Native - react-native

I'm trying to build an react native app that allow user to record and publish square video (like instagram). Here are my attempts :
1 - Find a library that crop video in app => fail
2 - Find a library that show a square camera screen => fail
3 - Record video using native picker and use hidden overflow to display square video => success
I think that solution 3 is not optimal, do you have others ideas ?
(Library I checked : react-native-image-picker, react-native-image-crop-picker, react-native-camera, react-native-video-processing)

I think react-native-camera and react-native-video-processing is the right combo. You capture video with camera and then aggregate it with processing lib. To display a preview square screen to a user it would be best to crop camera view and make it look as a square. Later, in background, make it actual square.
I'm messing with this currently too :)

Related

How to only display a square section of the video feed from expo-barcode-scanner?

I need to use a barcode scanner for my react native expo project, but I only want to display a square section of the camera feed to it will nicely fit in a popup (Modal). So far, it has only display the camera aspect ratio. I haven't found anything on how to do that with expo-barcode-scanner.
Is there a way I can do this?

How To add Focus, Brightness and Zoom controls to react native camera?

I used react-native-camera on my iOS app and now trying to add Focus, Brightness and Zoom controls to it. So far I was unable to come up with a solution. Any idea how to do this?
I tried to find an option in different react native camera packages. Also posted in their git repos for help. Finally tried this post: https://medium.com/react-native-development/react-native-camera-app-with-live-preview-saturation-and-brightness-filters-d34535cc6d14 Where they take a photo from the camera every 5 milliseconds and adjust its brightness which seems to be very unstable and it makes the app crash.
It is not possible to use the focus and zoom functionalities with react-native-camera.
Unluckily the focus api has many bugs and the zoom functionalities will not render fast enough with javascript.
Maybe a solution is not using react-native-camera and instead just writing an intent to open the default camera application
The following app uses this solution, all the camera functionalities work perfectly.
Could they re-open the issue as it seems to not be solved?
Developers may need to review all the open issues to estimate the project deadlines.

React Native: Multiple previews of camera stream

I've got an application in React Native to be developed in Android and iOS, in which I'd like to take the camera stream, make some processing, and render it multiple times.
Imagine an app like Instagram, in which you can add filters to the camera live and it shows the applied filters with on live previews. It would be more or less the same.
I need to get the camera stream and be able to show it on screen multiple times.
I've tried react-native-camera, but it only lets me to get one instance of the camera to be shown.
With this same library, I've tried to take pictures in intervals of the camera and to render them via <Image> container but, of course, it's a performance kill and the app ends up crashing.
How can I achieve what I'm trying to do? Do you know of any module or any approach that allows me to do so?
Thank you.

How to add custom image on native map in Titanium?

currently i am working on native map in Titanium for android and iOS.
you might have seen native maps on which a custom image layer or layout is being displayed, which will rotate and zoom according to the user input (currently i am not talking about annotations)
i have tried using annotation map tile too but it doesn't seems to work as the native map app i have seen
if you have any question or are not able to understand my question please let me know so i could clarify and get solution for one of you
Update:
Can you give a better explanation of what you've tried?
you might already know about mapbox.com and leafletjs.com, by using their library we could make customize maps and offline map in webview but i am looking for some Titanium module which could help me use native map of iOS and android for performing similar functionalities(i am avoiding commercial library and plugins as my app is not commercial app). i want to create map tiles which could be used for offline purpose as the user would have downloaded with the app.
what i have tried yet!!
1: http://i.stack.imgur.com/CLiNh.jpg
2: http://i.stack.imgur.com/QOLO7.jpg
in first image link i have given image in which i showing screenshot of map with rotation (if you notice compass) and the map tile moved accordingly to it
in 2nd image ... i had put a map tile using createAnnontation function, but unable to fix its layout remains same and it doesn't resize when i do zoom in/out too
I assume you are talking about custom tiles on top of a MapView.
There is an example module for iOS at https://github.com/benbahrenburg/benCoding.Map which used the Titanium map module as a base. It is a bit dated, but see the TileOverlay example and code and it will get you on the right track.
The best tutorial I've found on how to create the tiles is at http://www.ericbinnion.com/creating-custom-overlays-for-ios-mapkit-framework/
I've tried to create a similar TileOverlay functionality by forking the Android map module with limited success. I never got it to work as well as the native maps.
You could also check out using Mapbox with Titanium. There are great tutorials and tools for creating your own tiles layers and manipulating existing layers. Adam Paxton gave a great demo of it at TiConf in New York this year.

how to show device camera's data on a CCScene when using cocos2d-x on android

In an android game, I want to start device's camera and let player see the camera input inside a CCScene. Does anyone know how to do that?
I am searching for the same thing. I haven't figure it out yet but come across the following:
http://syswerke.com/projects/blog/opencv-camera-capture-in-cocos2d-x-applications/
http://docs.opencv.org/doc/tutorials/ios/video_processing/video_processing.html#opencviosvideoprocessing (iOS)
http://www.cocos2d-iphone.org/forums/topic/using-a-uiimagepickercontroller-and-cocos2d-sample-code/#post-34228 (iOS)
http://www.cocos2d-x.org/forums/6/topics/11524 (suggesting to save to file/buffer and pass to native code)
I've seen example on iOS that works (e.g. https://www.youtube.com/watch?v=TM9EIzB5I-8).
I'll update more if/once I figure it out