occurred on iPhone & Android both.
phoneGap 1.1.0
Update
My question: how can I prevent status bar cover my app. or otherwise prevent my up move up.
My Code is simple PhoneGap code:
navigator.camera.getPicture(onPhotoSuccess, onPhotoFail, {sourceType: 0})
see phoneGap api
On android It's phonegap bug.
PhoneGap use two native plugins to activate camera:
1) camera plugin
2) status bar plugin- to hide status bar on canera state.
the issue is - when camera cancelled (after take a photo) status bar is shown but the application doesn't move down and status bar covers it.
update
upgarde PhoneGap version to 1.4.1 resolved the issue on android.
I know this question is quite old but in case anyone finds this problem I fixed it forcing the screen size (not valid probably for the iPhone 5 screen) on the viewDidAppearAgain method on the view controller that inherits from CDVViewController.
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
[self.view setFrame:CGRectMake(0, 0, 320, 460)];
}
I was using phoneGap 2.1
Related
Edit: Duplicate of How to access camera on iOS11 home screen web app?
I'm running into a problem with using a apple web-app together with camera access through the getUserMedia API.
I have some application that is working fine when accessed through safari, it asks for persmission to use the camera and upon approval I can see the camera feed. But if I save this same page to the home screen as an web-app this does not work anymore. There is no prompt for camera access, which seems to be the problem as it is not enabled by default.
The line that gives the problems is a meta tag which enables full screen for a web application on iOS.
<meta name="apple-mobile-web-app-capable" content="yes">
Anyone know what is going on here and why this fails? Do I need to set camera permission somehow through a meta tag also?
Thanks in advance!
Apple has removed the ability to use getUserMedia inside a UIWebView, WKWebView, SFSafariViewController, or a webpage that has been "added to the home screen".
The reasoning is not clear, however I do not believe this to be a bug.
An Apple staff member wrote this about WebRTC in iOS 11:
...right now, WebRTC is only supported in Safari. No WKWebView, not even SFSafariViewController.
And I can confirm that this includes the UIWebView as well (through personal tesing).
The navigator.mediaDevices.getUserMedia function is back in iOS 14.3 which got out yesterday. (Make sure you are not using the navigator.getUserMedia which is deprecated).
We'll be using it in Cordova, I'll update this post if we find some instabilities.
Don't forget to use the playinline attribute in your <video> element if you don't want the video to start in fullscreen.
I am developing a ionic app which has functionality to set reminder in app. After one button click i want to open up list which contains native ringtones of msg for both android and ios. How can i get these sounds in a list and then play it in my local notification of reminder. Thanx in advance
You can look into Cordova plugins that will provide you an interface to load up the system ringtones.
A Cordova / Phonegap ringtone plugin for Android. Set an audio file as ringtone, notification tone or alarm tone.
This could be helpful : https://github.com/Hiraqui/cordova-plugin-ringtone
Recently, I have come across some apps, that are able to show me a picture (in addition to some text) in the application drawer / lock screen when a push notification arrives. I would like to know if it is possible to implement this with Ionic / Angular / ngCordova stack.
Even if the PushNotification retrieves the image property, I think the local notification is not able to display an image at the moment.
The question has already been asked in the cordova-plugin-local-notifications plugin GitHub Issues:
https://github.com/katzer/cordova-plugin-local-notifications/issues/536
but it hasn't been answered.
I am using Google Maps javascript API within an angular application. When using the app in Google Chrome on a regular desktop machine with a mouse, various navigation features (pan/zoom) work in the google maps part of the application just fine. However, when I try to use touch gestures on a windows 8.1 screen, the maps do not recognize any of the pan or zoom gestures. If I pinch to zoom, nothing happens. If I double tap on the screen like a mouse, then maps will zoom in. If I drag with a finger, the browser window handles the touch events instead of the maps div, so left and right navigates page history and up and down dragging scrolls the whole page instead of panning the maps.
As another experiment, I tried using google maps http://maps.google.com itself inside of Chrome, and it worked fine. So that means that it can be done somehow....
So, is it a viewport meta tag type of thing? Or does it have to do with sizing the map element? Or is it an angular thing and we need to do something with ngTouch somehow to allow the app to respond to touch events?
Update: the touch events do work on the same page on an iPad. I'm not sure what that says, but it's encouraging that at least it works on mobile safari. It seems that we need to communicate something to Angular to tell it to accept the touch events.
UPDATE
This issue was handled in the bug
https://issuetracker.google.com/issues/35824421
and was solved in version 3.27 of Google Maps JavaScript API in December 2016.
Putting the following code before the google maps api script tag helps me. But, unfortunately, it continues to disable mouse events. Please, can we a find a solution for Google Maps API with both touch and mouse support?
This solution in place of setting the application boot flags of '--user-agent chrome' or '--user-agent safari'
<script>
navigator = navigator || {};
navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;
//navigator.maxTouchPoints = navigator.maxTouchPoints || 2;
//window.ontouchstart = window.ontouchstart || function() {console.log('this is touchstart!');};
</script>
Note that only the first two lines are used, the other two are commented out and were not required.
My inspiration for this solution is from: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/ so thank you to Patrick and Robert.
This is in fact a Google Map bug #6425
The fun fact is that Google Map API is not serving the same content based on the User Agent. So, for some use case, the workaround is to spoof the User Agent, ether by :
Chrome Dev tool > Emulation > Model
a user agent spoofing extension
--user-agent chrome flag
Any android or iOS device will work, changing the default desktop google map app to a mobile like app. Drag and pinch will work again on this mobile like app.
After some testing, the minimal UA that switches to the mobile like app is "Chrome" or "AppleWebKit/537", but it sounds hazardous to use it, as it may very well change in the future.
For my purpose, chrome based kioks, this will do the trick until the bug is fixed.
I used the above solution and modified for it to work with a mouse as well
<script>
function MapTouch() {
return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
if (MapTouch() === true) {
navigator = navigator || {};
navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;
}
</script>
I had the same problem.
JJ Stiff's solution enabled the touch events.
Apparently if you also want the mouse to work, you have to add the following line:
navigator.msPointerEnabled = true;
I need my own splash screen when starting up my app.
I use SenCha Touch + Cordova.
Searched and found several ways to do splash screens, however I do not think they are up-to-date.
I saw some code which tried to add a few lines of code into launch function, but the latest Sencha Touch does not do it in the app.js any more instead, it add the Main view to its viewport.
Also, I checked Sencha Touch doc and found
Class currently only works with Cordova and does not have a simulated
HTML counter part. Please see notes on Cordova Docs for proper Native
project code changes that will need to be made to use this plugin.
But it provides some methods after that statement :
newExt.device.Splashscreen( ) : Ext.device.Splashscreen
So I feel confused and don't know which one should I follow.
What is the latest approach to do the splash screen in Sencha Touch?
I currently have the exact same problem as you. Here is information I got from Sencha:
All splashscreen functionality is provided by the Cordova/Phonegap plugin. Our class methods are just convenience methods to the cordova native API and will provide a 'stub' for you if Cordova is not available so that your application does not bomb upon startup (no splashscreen shows, it's just that your app will not crash when trying to access an API that is not there).
In theory, if your application is built with Cordova/Phonegap and your splashscreen images are provided with the application build as specified by Cordova/Phonegap you would initiate a call to Ext.device.Splashscreen.show() after the device is ready (as demonstrated in the example found in http://docs.phonegap.com/en/2.6.0/cordova_splashscreen_splashscreen.md.html#Splashscreen)
The splashscreen feature is a native API, not one that is provided by Touch. You can, should you wish, provide your own coding in your index.html file of your native application which will manually display an image (much the same way we do the initial CSS flashing load indicator), but ultimately that would be up to you to implement manually.
I would suggest that you follow the Cordova guidelines, place your images in the res/drawable directory of your android project and let Cordova do all the hard work for you by just making a single call to Ext.device.Splashscreen.show() when the device is ready and then calling Ext.device.Splashscreen.hide() in the launch area of your application to hide it when your app has rendered its view.
To include Cordova in your application, we now provide you with sencha cmd switches to enable Cordova. You can find more information here
http://docs.sencha.com/touch/2.3.1/#!/guide/cordova
Please note that you will have to download all required components of Cordova, modify the Cordova configuration files as outlined in the Cordova docs, and build the application using either the Cordova command line interface (CLI) or your favourite Android build IDE (Eclipse, IntelliJ, etc).
Use this plugin https://build.phonegap.com/plugins/620
When you use this plugin and build locallym you have to place the icons and splashscreen in the res/ folder manually.