Is it possible to get a photo from camera in a phonegap app only with HTML input, without Camera API?
Scenario
I developed an app and encapsulated it through Phonegap (Build)
Users can submit photos using html file input. But there is no option to take a new photo from camera, only gallery and files (and any other storage app like drive or dropbox, if it is the case).
I would like to enable the camera option, but without the PhoneGap's Camera API.
Solutions
I've tried the following solutions without success:
1. The "capture" attribute (from Raymond Camden post)
With this method, all you have to do is to add the "capture" attribute like this:
<input type="file" capture="camera" accept="image/*" id="JustChooseAnID">
Raymond explains that with this method you don't need to use PhoneGap's Camera API since Google developed this option and showed it in a Google IO presentation and, according to Google devs and also Raymond, it works.
But.. not for me.
2. Config Phonegap to ask camera's permission (from Jorge Lizaso's question)
"Maybe the camera option is not showed up because your app doesn't have the proper permissions"
In the above question, 4 methods are mentioned to indirectly ask and receive the proper permissions to use the camera.
I have already tried methods 2 and 4 and, although my app now asks for camera permission and I allowed it properly, when I use the file input, all the options are presented (like gallery and files), but no camera.
3 (and 1). Use the latest version of webkit with Crosswalk to ensure solution #1
With the possibility of my android webview be outdated (and not compatible with solution #1), I decided to include in my app the best webview possible: the latest version of Google Chromium.
But.. no success again.
1, 2 and 3 combined
The result: no... success.
Yes, there is a solution, without the need for Cordova/PhoneGap's Camera API.
For reasons that are beyond my knowledge, the webkit used in CocoonJS (named WebView+) is far more optimized and adjusted to HTML5 apps than phonegap's Crossswalk (please, I am not related to Cocoon).
I discarded completely my Phonegap config.xml settings and tried Cocoon builder. I used the solution #1 (the capture attribute in file input) and added these plugins, via Cocoon:
<cocoon:plugin name="cordova-plugin-camera"/>
<cocoon:plugin name="cordova-plugin-media-capture"/>
<cocoon:plugin name="cordova-plugin-media"/>
<cocoon:plugin name="cordova-plugin-file"/>
<cocoon:plugin name="cordova-plugin-device"/>
It's important to note that I just installed these plugins in order to obtain the wanted permissions, but I am not using them at all.
Probably, more experienced developers will have better solutions but, for now, this is the best way I found to solve this problem.
Related
All guides I have seen like:
https://www.youtube.com/watch?v=NfG63Ge3aQk
have a main prefab, but I have NEVER found any package remotely close to containing a camera. Also when I follow the guide and download the package:
https://developers.google.com/vr/unity/download#google-vr-sdk-for-unity
Even the demo scenes have no special camera and contain faults.
Also to do without I have used unity input.gyro.attitude, but it gives weird movements when the phone is still
To my knowledge, the CardboardMain prefab is no longer included in the sdk. I'm pretty sure that now you just need to enable the Cardboard sdk in player settings ("virtual reality supported" checkbox) and add a GvR Raycaster script to your main camera.
Here is my issue, I am using Bootstrap (twbs:bootstrap), font-awesome (natestrauser:font-awesome) and Avatar (utilities:avatar).
When I load my application in a desktop browser, all assets load fine.
When I load my application in a mobile browser, all assets load fine.
But when I load my application in the compiled (Android) app, font-awesome and Avatar don't load their assets. The reason I am targeting them is they are both reliant on contacting outside sources. font-awesome is served off of a CDN and Avatar retrieves avatars from social networks. I know I can package font-awesome but I can't do the same for avatars so I need to figure this out.
I have looked to see if Meteor does something odd like sandboxing the app to prevent outside contact but I can't seem to find any mention of these kinds of issues. Is there a default security settings that I can set where it would allow my app to 'contact' whitelisted sites? It would be absurd but it is Meteor after all.
I figure someone more knowledgeable in Meteor can point out my error.
There is no code for font-awesome (besides using CSS classes) and there is really no specific code for Avatar besides {{> avatar ... }}
Thank you in advance!
Note, as of 5/30/2017: Please skip to EDIT 2 below unless you want to read the very long and confusing ramblings of my former self. Thank you.
Okay, I was right but not necessarily right about who was causing what (I was kind of right). The reasoning behind it makes sense so I am thankful for that.
Here is what I've determined. Cordova has a whitelist under /res/config.xml where URLs are whitelisted and only those URLs are the only URLs allowed outside of the application.
But, if you try to edit config.xml it will be overwritten by Meteor on build which indicates this config is governed / overwritten by Meteor.
I searched around and found a few things: Meteor / Cordova, Meteor. The second article gives the solution. You must use the package browser-policy to whitelist what URLs you want.
After installing browser-policy, you must include them in a file in /server. I tried installing them inside a if(Meteor.isServer) block outside of /server but it didn't work.
Hope this helped! I couldn't find anything similar to this and I presume others will run into this road block as well
EDIT: This will only fix it for desktop. For my issue, I had to create a top-level file called mobile-config.js and use config settings from this page to whitelist URLs. This change happened in Meteor 1.0.4
EDIT 2:
Here is it said more clearly: You must whitelist all outside URLs that you want to contact inside of mobile-config.js
For instance, if you want to contact google.com from your mobile app, you would add
App.accessRule('https://www.google.com')
Thankfully Meteor has fixed their extreme documentation issue and has now included this on the official documentation here
I have searched high and low for several days for this problem and I just can't figure it out, hopefully someone else has solved this.
The problem is simple, I have created a web-based game using mainly createjs, preloadjs, and soundjs. The plan was to load the content inside a UIWebView on iOS and WebView on Android to create the two apps.
The problem occurs on Android 4.4 and lower. Neither the videos or the sounds are playing. I'm starting with the simplest scenario; I have an image on a web page, attached a preloaded sound to play onclick;
init:
createjs.Sound.registerSound("sounds/sound_must_be_on.mp3", "soundOn");
$('.btn.sound').click(soundMustBeOn);
onclick listener:
function soundMustBeOn() {
createjs.Sound.setMute(false);
createjs.Sound.setVolume(1);
createjs.Sound.play("soundOn");
}
This works perfect on all modern desktop browsers, iOS and Android 5.x and higher. But on Android 4.4 (on a WebView) it just crashes. What have I missed? I have tried Cordova, Phonegap, SoundJS CordovaAudioPlugin, file:// paths, resources outside the android_asset folder, and plenty of other things. My quess is that I have used Phonegap totally wrong, I could really use a "for dummies" example.
Solved it.
I did what I didn't want to do, but I guess it had to be done. I encapsulated my entire web application within Cordova/Phonegap, downloaded and added the CordovaAudioPlugin.js file from SoundJS and simply registered the plugin as others have already done (also updated the file path)
createjs.Sound.registerPlugins([createjs.CordovaAudioPlugin]);
createjs.Sound.registerSound("/android_asset/www/sounds/sound_must_be_on.mp3", "soundOn");
I got a,
<input type="file" multiple accept="image/*" />
and I want my android users to be able to upload multiple files at a time. Users using nexus-5 report being unable to upload multiple files at a time. I also tried adding capture="camera" to the input but this only auto open the camera and only associate one picture at a time again. This works everywhere except on Android.
Is there anything I am missing?
I've hit the same brick wall. I've tried a number of mobile browsers and can't find any that work.
I found this link that tells you that none of the Android browsers support this:
http://caniuse.com/#feat=input-file-multiple
From extensive searching, I've seen information that suggests that Chromium supports this (but no beta yet) and it should make it into Chrome for Android but no indication of time-frame.
This seems to have changed since my last answer. If you now look at:
http://caniuse.com/#feat=input-file-multiple
You'll now see that Chrome 42 (or better) for Android does now support multiple file upload provided you're running Android 5.0 or better. That's quite a limitation but at least it's an improvement. As Android 5 (Lollipop) gains market share (18.1% in August 2015) this become more practical.
Here's one trick. Hit your normal <input type='file' multiple> button. File picker appears: do a long press on a file to select it, then select other files.
On the top bar an "Open" appears, select it and then multiple files are added to the files collection.
Kudos to Simon#atp for this.
However, not all available file pickers may work.
As of 12/20/2017, the new Chrome browser is allowing multiple file selection. Just select your files and click "Open" in the upper right hand corner.
You could work around this limitation by using javascript, canvas and blobs.
See https://github.com/josefrichter/resize/blob/master/public/preprocess.js for some example code to get you started.
I have a similar problem. And I tested the latest chrome and FireFox, both not working.
But the QQ browser which is using X5 core is seems to be the only browser works as I expected. So My solution would be using a App shell to encapsulate the X5 SDK.
I found a solution from GoNative(https://gonative.io/) link. As per our requirement we have to check and enter our URL. And they will send Android code link and DEMO apk over mail. In this file using we can upload multiple files in our web view. If we have to publish the app we have to purchase that thing. I tried to understand the multi file upload code. But couldn't find any thing help full. If any one crack that thing please tell us.
My real problem is that I need to get youtube videos to play from my app but I can't seem to get it to work... all my research has brought me to this point (hence why I am asking):
As documented here in order to allow external content to open in an iFrame with phonegap you need to modify phonegap.plist.
I've been using their "Build" service which allows you to just add a .zip file and it complies everything for you (spitting out complied code in different formats)
Is there a way to edit phonegap.plist and still use the "Build" service?
Is there a way to edit phonegap.plist and still use the "Build" service?
No, although you can configure some of the items that end up in the phonegap.plist through a config.xml (see docs), the ExternalHosts is not one of the current configurable options.
Also see this related discussion on their feedback forum.