I have something like this in my cordova app
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location.href = 'https://mobile.xxx.com';
}
Now I need to use webRTC in this website. And works fine when I run it in mobile browser (chrome 54.0.2840.85).
However, when I use the apk, the webview will not load the webRTC features like camera or micro.
So, in mobile browser it works fine, in webview the rtc will not work.
This is what I have in config.xml
<content src="index.html" />
<access origin="https://mobile.xxx.com" />
<allow-navigation href="https://mobile.xxx.com" />
<allow-intent href="https://mobile.xxx.com" />
<plugin name="cordova-plugin-network-information" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-splashscreen" version="4.0.0" source="npm" />
<plugin name="cordova-plugin-whitelist" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-dialogs" version="1.3.0" source="npm" />
<plugin name="cordova-plugin-statusbar" version="2.2.0" source="npm" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="phonegap-version" value="cli-6.3.0" />
<preference name="permissions" value="none"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
<preference name="show-splash-screen-spinner" value="true" />
<preference name="stay-in-webview" value="true" />
<preference name="orientation" value="portrait" />
<preference name="loadUrlTimeoutValue" value="700000" />
Already tried crosswalk but same problem. How can I have webrtc in cordova webview?
To clarify, I am just looking for a functional demo.
I'm not sure what WebRTC specific features you're using but it isn't fully supported yet for most mobile browsers. See here.
As far as I understood from https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos , to access media we are supposed to make navigator.mediaDevices.getUserMedia
Similarly for mobile app, you will have to specify the permissions in config.xml related to camera or microphone that you are using.
For media access
<plugin name="cordova-plugin-media-capture" spec="1.4.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take videos"/>
<variable name="MICROPHONE_USAGE_DESCRIPTION" value="To record voice while taking videos"/>
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="To provide photo browsing."/>
</plugin>
For camera access
<plugin name="cordova-plugin-camera" spec="2.3.0">
<variable name="CAMERA_USAGE_DESCRIPTION" value="To take photos"/>
</plugin>
For more details of using the above plugins in mobile app, refer :
https://github.com/apache/cordova-plugin-camera
https://github.com/apache/cordova-plugin-media-capture
Related
I am building an app with phonegap build. My app has some plugins as i list below. When i run the app, at start it asks for "record audio" and "modify or delete SD card contents. read the contents of your SD card".
How can I prevent asking this permissions at start and make it ask on exact run time?
`<plugin name="cordova-plugin-camera" spec="2.4.1" />`
`<plugin name="cordova-plugin-compat" spec="1.2.0" />`
`<plugin name="cordova-plugin-whitelist" spec="1.3.3" />`
`<plugin name="cordova-plugin-file" spec="4.3.1" />`
`<plugin name="cordova-plugin-file-transfer" spec="1.6.1" />`
`<plugin name="cordova-plugin-media-capture" spec="1.4.3" />`
`<plugin name="cordova-plugin-statusbar" spec="2.4.3" />`
`<plugin name="cordova-plugin-globalization" spec="1.11.0"/>`
`<plugin name="cordova-plugin-splashscreen" spec="5.0.3"/>`
`<plugin name="cordova-plugin-android-permissions" spec="1.0.0" />`
`<preference name="permissions" value="none" />`
`<preference name="orientation" value="portrait" />`
`<preference name="AutoHideSplashScreen" value="true"/>`
`<preference name="SplashScreenDelay" value="1300" />`
`<preference name="ShowSplashScreenSpinner" value="false" />`
`<preference name="fullscreen" value="false" />`
`<preference name="SplashMaintainAspectRatio" value="true" />`
`<preference name="SplashScreenBackgroundColor" value="#34495e" />`
`<preference name="SplashScreen" value="screen" />`
`<preference name="FadeSplashScreen" value="true"/>`
I found my own answer. Phonegap build app asks permissions at start but when you upload it to google play, the app downloaded from play store asks permissions on runtime.
I posted a question about this a couple weeks ago but got no response. So Im posting again with a clearer issue/question.
My issue:
1.) I run:
$ ionic cordova build android --release --prod
2.) Then I sign it.
3.) Then I upload to google play.
4.) Then I download it from google play and the app hits the splash screen, then gets stuck on a white screen after the splash screen closes on lower versions of android (So far anything under version 6.0.0).
To verify that it is my app that is the issue, I created a new app through the ionic cli using the "super" template. Then I built, signed, and uploaded it all the exact same way. I downloaded it from google play, and it worked. I made it into the app, including versions lower then 6.0.0.
So, my question is
How do I see what is causing the issue if it only happens in a release/production build?
Is there a way to debug?
Are there known functions (pipes, masks, modules, etc...) that angular/ionic uses that don't work in older browsers found in older versions of android that could be causing this?
Project information:
#ionic/cli-plugin-cordova : 1.6.1
#ionic/cli-plugin-ionic-angular : 1.4.1
#ionic/cli-utils : 1.7.0
ionic (Ionic CLI) : 3.7.0
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.0
System:
Node : v6.11.0
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
npm : 3.10.10
Config file:
<preference name="android-minSdkVersion" value="16" /> // This is the same as the default value generated by ionic-cli
// I use the hide() function in platform.ready() of my app.component to hide the splash screen. Did the same in the test generated app. Shouldnt be the issue.
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="500" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="30000" /> // Arbitrary time. platform.ready() should be called way before this.
<preference name="loadUrlTimeoutValue" value="700000" /> // Added this because it was recommended for larger app sizes..?
My Plugins (I saw that someone else had a similar issue caused by a module import..?):
<plugin name="cordova-plugin-console" spec="^1.0.5" />
<plugin name="cordova-plugin-contacts" spec="^2.3.1" />
<plugin name="cordova-plugin-device" spec="^1.1.4" />
<plugin name="cordova-plugin-fingerprint-aio" spec="^1.2.1" />
<plugin name="cordova-plugin-geolocation" spec="^2.4.3">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value=" " />
</plugin>
<plugin name="cordova-plugin-googlemaps" spec="^1.4.3">
<variable name="API_KEY_FOR_ANDROID" value="AIzaSyBbYqJI-CZfV8_Zmj3laEGMbHsQenYo3V4" />
<variable name="API_KEY_FOR_IOS" value="AIzaSyBbYqJI-CZfV8_Zmj3laEGMbHsQenYo3V4" />
<variable name="NSLOCATIONWHENINUSEUSAGEDESCRIPTION" value="Show your location on the map" />
<variable name="NSLOCATIONALWAYSUSAGEDESCRIPTION" value="Trace your location on the map" />
</plugin>
<plugin name="cordova-plugin-http" spec="^1.2.0" />
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
<plugin name="cordova-plugin-nativegeocoder" spec="^1.0.2" />
<plugin name="cordova-plugin-nativestorage" spec="^2.2.2" />
<plugin name="cordova-plugin-screen-orientation" spec="^1.4.3" />
<plugin name="cordova-plugin-secure-storage" spec="^2.6.8" />
<plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
<plugin name="cordova-sqlite-storage" spec="^2.0.4" />
<plugin name="ionic-plugin-deploy" spec="^0.6.7" />
<plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
<plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="^3.2.2" />
I ended up removing android and iOS platforms, reinstalling them, and installing crosswalk again. Not 100% sure if it was crosswalk that fixed it It could have been some small code change I made.
Generally, when the loading screen is infinite, it's an issue with your code.
My app works perfectly fine in the browser.
What I do is I show and hide this iFrame using a checkbox.
However when I released it for android, the new iFrame I added fills the entire page instead of having it's fixed position which I stated in CSS.
I'm converting my app to an Android app using PhoneGap Build.
My app uses the following permissions.
<preference name="permissions" value="none"/>
<preference name="orientation" value="default"/>
<preference name="target-device" value="universal"/>
<preference name="webviewbounce" value="false"/>
<preference name="prerendered-icon" value="true"/>
<preference name="stay-in-webview" value="false"/>
<preference name="ios-statusbarstyle" value="black-opaque"/>
<gap:plugin name="org.apache.cordova.file"/>
<gap:plugin name="org.apache.cordova.file-transfer"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<access origin="*"/>
<plugin name="cordova-plugin-whitelist" version="1"/>
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="android-minSdkVersion" value="7" />
<preference name="android-targetSdkVersion" value="19" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
Can someone explain why my app fills the page and does anyone know of a way to solve this problem?
EDIT:
I was able to fix the problem two different ways.
I merged the html of that page into my main app and merged the script into my main script.
I also fixed it using the .load JQuery API.
Even though I was able to solve my problem here I still don't understand why the iFrame filled the entire page.
Environment: This is the only cross-platform app I've worked on. I did not build it. It's about 5 years old. Targets: Android 4.4 and above, iOS is not limited. I'm developing on a Mac, using Phonegap Build- specifically 3.7.0. I am getting this error on my Android emulator- API 23 and 19.
I am trying to access imageURI to check for file size. My FileTransfer limit is about 10 mb. Here is my code for that:
resolveLocalFileSystemURI(this.pageContainer.items.items[0].imageURI, function(fileEntry){
fileEntry.file(function(fileObj){
if (maxSize <= fileObj.size){
Ext.Msg.alert("Error", "Chosen image is too large. Submit a different image.");
return;
}
else {
Ext.Msg.alert("You are here:", "file size accepted "+ fileObj.size);
}
})
})
Problem is that it's unable to get down past resolveLocalFileSystemURI. The adb log says:
E DatabaseUtils: java.lang.SecurityException: Permission Denial: reading
com.android.externalstorage.ExternalStorageProvider uri
content://com.android.externalstorage.documents/document/1A03-
3B0B%3ADCIM/Camera/elevation.jpg from pid=2921, uid=10080 requires
android.permission.MANAGE_DOCUMENTS, or grantUriPermission()
I know that you can add this permission to AndroidManifest, and go from there, but I am actually just using the PhoneGap build 3.7.0. I have to edit config.xml, which is currently using these settings:
<plugin name="org.apache.cordova.camera" source="pgb" spec="0.3.2" />
<plugin name="org.apache.cordova.device" source="pgb" spec="0.2.12" />
<plugin name="org.apache.cordova.file" source="pgb" spec="1.3.3" />
<plugin name="org.apache.cordova.file-transfer" source="pgb" spec="0.5.0" />
<plugin name="org.apache.cordova.geolocation" source="pgb" spec="0.3.10" />
<plugin name="org.apache.cordova.network-information" source="pgb"
spec="0.2.12" />
<preference name="phonegap-version" value="3.7.0" />
<preference name="android-minSdkVersion" value="19" />
<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="prerendered-icon" value="false" />
<feature name="http://api.phonegap.com/1.0/network" />
<feature name="http://api.phonegap.com/1.0/camera" />
<feature name="http://api.phonegap.com/1.0/geolocation" />
<feature name="http://api.phonegap.com/1.0/media" />
<feature name="http://api.phonegap.com/1.0/contacts" />
<feature name="http://api.phonegap.com/1.0/file" />
<feature name="http://api.phonegap.com/1.0/device" />
Previously, I did not include the <feature>, but in an attempt to remidiate added it to my config.xml which resulted in no change in behavior. What do I need to add to my config.xml to do the same as MANAGE_DOCUMENTS?
The solution for this was to upgrade my PhoneGap Build version to cli-5.2.0 (among other versions, I'm sure). My build was too old to support granting Android access to the file when coupled with my Android target of 19+.
I used Cordova 4.0 to create a phonegap app (that has worked fine via cli on iOS), but I also want to use build.phonegap.com particularly for Android.
The main issue is that upon installing the APK on Android, the security warning lists all features, when I do not actually need any.
I have read that you can remove all permissions with <preference name="permissions" value="none" />and then selectively add back the ones you want.
However, this is not working; I still get all the permissions requested upon install. I must be missing something, or something has changed. (Did I make a mistake using Cordova instead of Phonegap? That's reasonably easy to correct..)
My config.xml is below:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.test" version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
xmlns:gap="phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android">
<name>Test</name>
<description>
Test.
</description>
<author email="test#test.com" href="http://test.com">
Test
</author>
<content src="index.html" />
<access origin="*" />
<gap:plugin name="org.apache.cordova.statusbar" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
</widget>
Edit: To remove ambiguity, I want to remove the Android security warnings saying this app needs full access to contacts, camera, internet access, etc. I do not need any of these.
config.xml , is just a bunch of information. It is not executed sequentially. so if you mention you require DisallowOverscroll permission and then mention you dont require any permission, it means ,
<preference name="permissions" value="none" />
will not overWrite
<preference name="DisallowOverscroll" value="true" />
for example:
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
and
<preference name="DisallowOverscroll" value="true" />
<preference name="permissions" value="none" />
both are same.