I am trying to mimic the half-screen camera as exists in apps like Taptalk. The goal is to have a live camera in a self-contained view on the upper half of the screen controlled by a Cordova plugin, with the lower half of the screen containing the normal HTML-based Cordova content.
I know the standard cordova camera plugin allows you to bring up the fullscreen camera component, and I know that doing this natively, at least on iOS would be relatively straightforward, but I'm really not sure where I would start trying to do this in a cross-platform way within a larger phonegap app (via Ionic).
I'm guessing I need to write a custom Cordova plugin ala this excellent article, but the main conceptual issue I'm worried about is that I think I'd have to use a view positioned and sized to only fill the top half of the screen, as opposed to a fullscreen ViewController (focusing on iOS for now).
Does anyone have any advice for implementing this approach?
I ended up writing my own Cordova plugin, SnapsCamera.
It uses a half-screen-sized view with UIImagePickerController's UIView added as a subview.
Related
As the title says, I want to display animated GIFs on the iOS splash screen.
However, I saw a lot of information that the iOS splash screen does not support animated GIFs.
If you know how to achieve a splash screen-like behavior on iOS, could you give me some advice?
Of course, it also supports Android, so I think that a method that can be realized on Android is good.
Sorry for poor English.
react-native: 0.60.6
Thank you.
#gysnet use react-native-community/lottie-react-native
https://github.com/react-native-community/lottie-react-native
Unfortunately as far as I am aware RN only allows the splash screen content to be static, however there are workarounds.
I was able to get around it by first setting a standard static splash screen, and then having that transition into an initial screen containing the animated splash on a timeout.
There is a good example of how you can do this here:
https://www.youtube.com/watch?v=MY6rE5plNIc
If you don't mind using lottie instead of gif, i would suggest looking into this package.
https://www.npmjs.com/package/react-native-lottie-splash-screen
It implements animation splash screen using airbnb lottie files in react native. Also, I apply this for multiple react native projects and it worked well.
Have a nice day!
I was wondering if anyone here knows how to add a camera area like this one(similar to snapchat I guess) in Xamarin Forms (preferably,mainly with XAML)Camera area is suppose to have a livecast & it is going to be on iOS
needed this screen:
I tried Xam.Plugins.Media but couldn't manage to create the needed screen
The media plugin, goes into the platform specific Camera Screen, takes a picture then returns. You can't put extra buttons on the screen in this way.
To get a video feed and manage the capture yourself, you will need to implement a lot of platform specific things.
Android
https://developer.xamarin.com/recipes/android/media/video/record_video/
iOS (Look at the AV samples)
https://developer.xamarin.com/samples/ios/Media/
I've tried to figure out if the functionality I need is possible with a PhoneGap plugin and haven't found a clear answer.
I'd just like some clarification as far as if this is within the scope of a plugin.
The functionality would be...
Within the webview a user triggers a button.
A camera preview screen of custom size, not full
screen, pops up over the webview.
The preview shows view from front facing camera except it's
cropped to the custom size.
A video automatically starts recording for a set amount of time,
then stops.
Once the video stops recording the preview screen goes away and the
local path to the movie file is returned to a callback.
Is this all reasonable functionality for a phonegap plugin?
Yes, you can definitely implement that functionality as a Phonegap plugin.
Possible steps that you can take are the following:
- Write the native code of the functionality first (Note: You can call and start activities through Phonegap plugin).
- Create a layout (Maybe, something that will overlay the webview with transparent background).
- Use the File API of Phonegap to access the movie file you just captured.
I'm looking to integrate PhoneGap's BarcodeScanner plugin with my app but would like to integrate it with the existing HTML/JS (inside the WebView) a little more closely than it currently allows.
Ideally I would like to see the BarcodeScanner's 'camera capture' view appear underneath PhoneGap's main WebView so I can layer my app's controls on top (toolbar etc).
I have come across a similar plugin from Moodstocks (http://www.moodstocks.com/2013/04/03/augmented-reality-with-phonegap-sencha-touch/) which appears to do just this by giving the WebView a transparent background and displaying it above the camera's view. The source code for this plugin can be found here (https://github.com/Moodstocks/moodstocks-phonegap-plugin) and more specifically (based on my reading the code with very unknowledgable eyes!) on Line 74-80 of the MSScannerController.m (https://github.com/Moodstocks/moodstocks-phonegap-plugin/blob/master/ios/MSScannerController.m).
So my question is, firstly, is this achievable? and, secondly, how can I modify the PhoneGap plugin to do it?
Any pointers or direction would be very helpful!
For the first question, the answer is quite sure - YES.
For the second question, what we (I work for Moodstocks) have done is:
Detaching the webview from MainViewController, knowing that you can retrieve the webview via plugin. In MoodstocksPlugin.m, lines 99-100 show how we pass the plugin's reference:
Attaching the webview to the current view controller, which is our scanner controller. MSScannerController.m, Line 46 shows how we take the webview over:
I hope this can give you several ideas about how to modify the original PhoneGap BarcodeScanner plugin, just out of curious, why not use MoodstocksPlugin directly? ;)
p.s Here is a video shows the animation of our Sencha Touch demo made with our plugin.
i wanna to embed an animated logo in the application startup screen, this logo is already done in 2 formats of files SWF and Flash, my question is about how to embed these files directly in the application startup screen, such that the animated logo appears directly on the startup screen.
Appreciate your concern,
Thanks in advance
This is not possible. iOS does not support Flash.
Update: to follow up with a possible solution, since your Flash is just an animation, perhaps you can just render it to a video and use that instead?
First off, your start-up screen is a static image ("Default.png")... so you can't do animated stuff there.
Once your app fully starts up and the static image disappears, then you could have something animated.
In a practical sense, it can not be Flash or a SWF though (Flash files are SWF files, by the way). One can build Flash-based apps for iOS using Adobe AIR, but that's a full blown environment and IDE separate from Xcode.
It'd be smarter to do your start-up animation using CoreAnimation, HTML5 or some other fine animating framework (Unity, Cocos2d or whatever).
Or a separate video file (in which case the user has minimal interaction possibilities). But +1 to Darren for suggesting this answer faster than I could think of it.
If you are planning to publish your app on the AppStore, then what you are trying to do is Impossible !
Your best option is to create the animation you want using Core animation or you can simply convert that animation to a video and play it once your app is loaded.