I am trying to do a map link in my app which when user click on it, it will open the native map app on iOS. When my code looks something like this href="maps://maps.apple.com/?ll=1.5149818510303,110.35436153412", it works. However, when I put ng-href="maps://maps.apple.com/?ll=1.5149818510303,110.35436153412", I will get Failed to load webpage with error: The URL can’t be shown error shown on XCode.
How can I fix it?
I use this to open the maps app on my ionic application:
JS:
$scope.openNavigator = function() {
var geoString = '';
if(ionic.Platform.isIOS()) {
geoString = 'maps://?q='+$scope.Latitude+','+$scope.Longitude+'';
}
else if(ionic.Platform.isAndroid()) {
geoString = 'geo://?q='+$scope.Latitude+','+$scope.Longitude+'';
}
window.open(geoString, '_system');
}
HTML:
<div ng-click="openNavigator()">
And it works perfect.
Related
I am updating one of our Cordova apps so everything is up-to-date for IOS and Android.
One of the things I ran into for IOS is the requirement that you have to ask for motion permission.
I was able to get the app to ask for the permission, but unlike the other permissions I am unable to customize the text.
The text is now as follows:
"localhost" Would Like to Access Motion and Orientation
But other permissions show the name of my app in stead of "localhost" and a description which I provided in the config.xml
I did provide a description in the config.xml and even added a description manually in the info.plist file in Xcode, but nothing helps.
I am using Ionic 6.9.2, Cordova 9.0.0 and added the ios#5.1.1 platform to Cordova.
Does anyone now how I can provide a description and fix the "localhost" in the Motion permission request?
maybe this is an old issue, but I hope this answer would be helpful.
you need to comment/remove on some block of code on leaflet.locatecontrol inside node_modules folder.
first go to node_modules -> leaflet.locatecontrol -> src and open file L.Control.Locate.js, then comment/remove following code:
if (this.options.showCompass) {
var oriAbs = 'ondeviceorientationabsolute' in window;
if (oriAbs || ('ondeviceorientation' in window)) {
var _this = this;
var deviceorientation = function () {
L.DomEvent.on(window, oriAbs ? 'deviceorientationabsolute' : 'deviceorientation', _this._onDeviceOrientation, _this);
};
if (DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === 'function') {
DeviceOrientationEvent.requestPermission().then(function (permissionState) {
if (permissionState === 'granted') {
deviceorientation();
}
});
} else {
deviceorientation();
}
}
}
I have tried every possible way to access camera on webview on cordova.
It work on android, but doesn't work on iOS.
Can someone explain how to implement access camera feature via cordova webview on iOS thanks.
Inappbrowser side (Angular)
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: 'environment' } })
.then(stream => {
// this.videoDom.srcObject = stream;
this.videoDom.srcObject = stream;
this.videoDom.setAttribute('playsinline', 'true');
this.videoDom.play();
this.stream = stream.getTracks();
requestAnimationFrame(tick);
})
}
Cordova side
I have install cordova-plugin-camera and add permission in config.xml on ios platform.
On iOS11/12 navigator.getMediaDevices is not available for WKWebView and UIWebView. It is only available for Safari. (https://forums.developer.apple.com/thread/88052)
WebRTC is only supported in Safari. No WKWebView, not even
SFSafariViewController.
You can try to use this plugin normally should solve your problem: https://github.com/phonegap/phonegap-plugin-media-stream
navigator.mediaDevices.getUserMedia({
'audio': true,
'video': {
facingMode: 'environment'
}
}).then(function(mediaStream) {
// Do what you want with
}
There is a simpler way, just use input type file
This shows the camera for taking a picture
<input type="file" accept="image/*" capture>
This for recording video
<input type="file" accept="video/*" capture>
This will prompt to take a picture or video, choose from the photo library or explore files
<input type="file">
There are a few other combinations. But it probably doesn't work on Android
This is a duplicate of: NotReadableError: Could not start source (Please read this link as its related to Cordova and getUserMedia) and potentially Progressive Web App: Error Accessing navigator.mediaDevices.getUserMedia?
There are changes to Safari on iOS 13 & Safari 13: https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
SFSafariViewController has gained getUserMedia functionality (!!!)
https://bugs.webkit.org/show_bug.cgi?id=183201
However WKWebView does not seem to gain getUserMedia functionality (this might be a bug, watch the webkit link closely):
https://bugs.chromium.org/p/chromium/issues/detail?id=752458
https://bugs.webkit.org/show_bug.cgi?id=185448
iOS 13 and Safari 13 release notes:
https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes
https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes
I've thought of a hacky way you can make this work on iOS by using the new postMessage API feature of cordova-plugin-inappbrowser which enables you to send messages from pages loaded into the Inappbrowser Webview back to the main Cordova app Webview.
This is not present in the latest release on npm (3.0.0), so you'd need to install the master version (3.1.0-dev) directly from Github:
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
In the page loaded into the inappbrowser, you can then post messages back to the Cordova app webview:
function openCamera(){
postMessage({
action: "camera"
});
}
function postMessage(message){
if(!webkit.messageHandlers.cordova_iab) throw "Cordova IAB postMessage API not found!";
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify(message));
}
<button onclick="openCamera()">Open camera<button>
On the Cordova app side, you can then listen for that message and respond to it:
var iab = cordova.InAppBrowser.open(myUrl, '_blank', iabOpts);
iab.addEventListener('message', function (e) {
if(e.data.action === 'camera'){
openCamera();
}
});
function openCamera() {
var animationDelay = 500; // delay to wait for camera window animation
navigator.camera.getPicture(function(){
log("successfully opened camera");
if (device.platform === "iOS"){
// unhide IAB
iab.show();
}
}, function(cameraError){
error("error opening camera: "+cameraError);
if (device.platform === "iOS"){
iab.show();
}
});
if (device.platform === "iOS"){
// hide IAB so camera window is in view
setTimeout(iab.hide, animationDelay);
}
}
This allows you to directly call cordova-plugin-camera from within the inappbrowser.
However it is hacky because on iOS, by default the camera window will appear below the inappbrowser window in the view hierarchy and hence not be visible.
My hack is to hide the inappbrowser window upon opening the camera, which causes the camera window to be at the top of the visible view hierarcy and be displayed.
However, upon dismissing the camera window, the Cordova app window will briefly be displayed while the inappbrowser window is being animated to show again.
I created a test case example in my inappbrowser test app repo: https://github.com/dpa99c/cordova-plugin-inappbrowser-test/tree/camera
You can try it like this:
git clone -b camera https://github.com/dpa99c/cordova-plugin-inappbrowser-test
cd cordova-plugin-inappbrowser-test
cordova platform add ios
cordova run ios
I'm developing a App with Ionic 2 and I'm have problems with #ionic-native/Camera. I've this code on Upload.ts
let loader = this.loading.create({
content: 'Carregando video....'
});
loader.present().then(() => {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
mediaType: this.camera.MediaType.VIDEO,
}
this.camera.getPicture(options).then((videoData) => {
this.uploadForm.controls['file'].setValue(videoData)
loader.dismiss();
}, (err) => {
console.log(err);
});
});
This code works fine in Android, but when I run ionic cordova run ios -lc, the promise this.camera.getPicture(options) is never resolved, so the loader keep running forever.
Thanks in advance!
So, I found the problem. First thing is that native components bugs with -l (--livereload). I don't know how to explain why but I got this information from the Ionic Worldwide slack. A member from Ionic Team said:
"live-reload on a device can cause issues with plugins and file system".
So I used this video to understand how to debbug the APP using the iOS emulator and Safari.
https://www.youtube.com/watch?v=Aob749bkoLY
A little brief of the video: when using iOS emulator, you can access the menu Developer > Emulator > <App Name>. A new window with inspector tools will open and logs from the emulator will appear on this window.
I found out that's the video url was incorrect. Before, to be compatible with Android, I've this code responsible to find the video pointer in system and send to the server:
filePath = 'file:///' + this.uploadForm.controls['file'].value;
But, iOS File Picker already has a "file:///" prefix. So prefixing it again made it wrong. So I updated the code to be like this:
if (this.platform.is('android')) {
filePath = 'file:///' + this.uploadForm.controls['file'].value;
} else {
filePath = this.uploadForm.controls['file'].value;
}
This resolved the problem.
I'm making an ios app and have used the forge api to render the model in the webview. I'm using React Native but i'm open to suggestions for objective-c too.
The problem i'm having is to render the model in offline mode. The app could download svf file and save on the phone's disk, but how can i load the file and render that in the webview? I find the A360 app can render the model in offline mode but not sure if it's rendered in webview. I also find the Autodesk.Viewing.FileLoader api, but couldn't figure out with it and i don't find an example. This is what I have tried:
var viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv'));
var filepath = '/Users/zheminzhang/Library/Developer/CoreSimulator/Devices/901B40DC-1DB6-4596-A24A-6D3FAA1EA5C5/data/Containers/Data/Application/925466F3-A623-416B-81A4-1EB62123AA66/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_d0411119-5006-4529-8734-7e70764a309b.svf';
var options = {
doc: filepath,
env: 'Local'
};
Autodesk.Viewing.Initializer (options, function () {
viewer.start(options.doc, options);
// viewer.initialize();
// var fileloader = new Autodesk.Viewing.FileLoader(viewer);
// fileloader.loadFile(filepath);
});
Can anyone help please?
I happened to notice this post. I am not sure how useful it would be, just sharing what I have practiced with iOS + Forge Viewer.
https://forge.autodesk.com/blog/standalone-app-of-forge-viewer-on-ios-by-cordova
Im using cordova 3.3.0 and i would like to open a local pdf file and then close it on user demand.
ref = window.open(encodeURI(path), '_blank', 'location=yes');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
This opens a file in inapp browser but i cannot get back to the actual app when I open some pdf file. How to add some close button or something ?
Im trying to get this working on ios.
Long time since you asked this but just had exactly the same issue. I had to install the inAppBrowser plugin on my project and the Done button appeared. Without the plugin installed, the pdf opened but the Done button was not shown.
What you have should work. On iOS a "Done" button should appear in the lower left of the screen.
function openPDF(){
ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=yes');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
}
I tested on iOS 6.1 and iOS 7. Of course you can set location=no to remove the URL at the bottom.