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.
Related
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 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.
I am working with a sample application like vine. My requirement is that I have to create a 'ghost' filter for video as in vine.
Actual requirement is
-Record a video on long press on the view
-On pause of record, I need to show the last frame of the recorded video above my view. Please see the expected working here
I have checked PBJVision library and found this feature working. But I need to implement this feature separately in my application.
While analysing the code, I found that this can be achieved using Open GLES. I have tried using a GLKView but it just shows a dark shade instead of image frame. Since I am new in this area, please help me.
I've managed to make my app use the front camera via this website.
By changing the code I can decide which camera the app will use.
I want my users to make that decision though, so I'm looking for a way to implement this... For example by putting a checkbox on index.html or by putting a button on the scanning-screen which swaps the camera.
Does anyone have any idea how to do this?
I would be very thankful...
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.