I would like to know if there is a way to play Android device ringtone/alarm using Ionic Capacitor (not Cordova)?
If it is possible, please provide me with a simple solution (include required npm packages and code).
If not, please tell me how to do it with a simple typescript - I do not want to do it with a Cordova.
Also, I do not want to use Capacitor Local Notifications. I want ringtone sound only.
Thank you for any help :))
Did you check that link ? https://ionicframework.com/docs/native/native-ringtones
You can install it using Capacitor.
npm install cordova-plugin-native-ringtones
npm install #ionic-native/native-ringtones
ionic cap sync
Save some .caf file in your assets repository and do the following :
import { NativeRingtones } from '#ionic-native/native-ringtones/ngx';
constructor(private ringtones: NativeRingtones) { }
...
this.ringtones.getRingtone().then((ringtones) => { console.log(ringtones); });
this.ringtones.playRingtone('assets/ringtones/sound_1.caf');
this.ringtones.stopRingtone('assets/ringtones/sound_1.caf');
Related
When using the NFC library the Ionic docs recommend
(https://github.com/chariotsolutions/phonegap-nfc)
(https://ionicframework.com/docs/native/nfc) I get a ''plugin not installed'' error when trying to reach the code in my component calling the ndef or nfc providers on my Android One Plus through the 'ionic serve --devapp' CLI command. It also says the devapp does not support this plugin, but I am unclear about how I am supposed to go about using this package testing wise in that case.
After specifying version 4 as per suggestion of this post for Ionic 3 I got a different error. This is with rxjs-compat installed and none of the nfc/ndef code actually used aside the imports in the module and component, and the injection into the constructor.
This is using "import {Ndef, NFC} from '#ionic-native/nfc';" instead of /nfc/ngx like above.
Uncaught TypeError: Object(...) is not a function
at index.js:405
at Module../node_modules/#ionic-native/nfc/index.js (index.js:599)
at __webpack_require__ (bootstrap:84)
at Module../src/app/app.module.ts (app.component.ts:12)
at __webpack_require__ (bootstrap:84)
at Module../src/main.ts (main.ts:1)
at __webpack_require__ (bootstrap:84)
at Object.0 (main.ts:12)
at __webpack_require__ (bootstrap:84)
at checkDeferredModules (bootstrap:45)
When I try to build the app instead of serving it with the devapp I come across this (perhaps unrelated) error, even though I am running the app in Android Studio on Windows 10 and have both my Java, Android and Gradle paths defined in my environment variables.
ANDROID_HOME=C:\Users\Sam\AppData\Local\Android\sdk
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_181
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
I have added the imports and the provider in the app module.
import {Ndef, NFC} from '#ionic-native/nfc';
#NgModule({
...
providers: [
NFC,
Ndef,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
This is how I inject the providers into my class.
import { Component } from '#angular/core';
import {ToastController} from '#ionic/angular';
import {Ndef, NFC} from '#ionic-native/nfc';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private nfc: NFC, private ndef: Ndef, private toast: ToastController) {
}
Maybe I am completely on the wrong path about this, but following the documentation or any of the suggestion threads available on similar topics have not lead anywhere. Am I approaching this wrong?
EDIT: After running everything in a new project and making sure I go through each and every step without making any errors, I again end up with the INSTALL PLUGIN ERROR, like such.
[ng] [console.warn]: "Install the NFC plugin: 'ionic cordova plugin add phonegap-nfc'"
[ng] [console.warn]: "Native: tried calling NFC.removeNdefListener, but the NFC plugin is not installed."
[ng] [console.warn]: "Install the NFC plugin: 'ionic cordova plugin add phonegap-nfc'"
[ng] [console.log]: "Angular is running in the development mode. Call enableProdMode() to enable the production mode."
[ng] [console.log]: "calling _sync"
[ng] [console.error]: "ERROR" "plugin_not_installed"
[ng] [console.info]: "[WDS] Live Reloading enabled."
[ng] [console.log]: "calling _reload"
[ng] [console.log]: "done _reloading"
[ng] [console.log]: "Ionic Native: deviceready event fired after 836 ms"
This error appears in my console only when I open up the Android version of the app in DevApp after serving it with serve --devapp. It does not appear when I run it in the browser, it then just gives me the ''Cordova'' not available error, which I imagine is standard for plugins that don't work on certain devices. This is done following the exact step by step process, including the code in the ionic docs. https://ionicframework.com/docs/native/nfc
EDIT2: It might have to do with an XML processing error. When running through the same steps as before I came across an error I dismissed earlier when installing the plugin due to it resolving itself after installing both the iOS and Android platforms on Cordova. The error below happens after running the 'ionic cordova plugin add phonegap-nfc' command. The plugin however DOES install, and is listed under 'cordova plugin list' afterwards, but the installation might not be done completely correctly. The plug-in is not listed under the plugins in config.xml for example.
Failed to install 'phonegap-nfc': Error: Unable to graft xml at selector "/manifest/uses-sdk" from "C:\Users\cliem\Desktop\dev\nfctest\nfctest2\platforms\android\app\src\main\AndroidManifest.xml" during config install
at ConfigFile_graft_child [as graft_child] (C:\Users\cliem\Desktop\dev\nfctest\nfctest2\node_modules\cordova-common\src\ConfigChanges\ConfigFile.js:122:19)
Long story short, don't use a Java version over 8. Nfc plugin does not work with ionic serve --devapp and needs to be tested with ionic cordova run android instead. Console needs to be read out from chrome://inspect.
If you have the latest version of cordova which is 9.0.0, try
$ sudo npm uninstall -g cordova to uninstall it and install in back again with a previous version
$ sudo npm uninstall -g cordova#8.x
This worked for me
I need to save a downloaded file in my ionic 2 path and use that ineteral url path.
for downloading: using file-transfer plugin.
const fileTransfer = new Transfer();
fileTransfer.download(trackObj.remoteUrl,cordova.file.dataDirectory+"audio/"+filename).then((entry)=>{
console.log("download completed:"+entry.toURL());
});
entry.toURL() is giving path like file://...... in need to use that path to play using Media plugin. But, Media plugin is not accepting path with file://...,
this.playerStatic = new MediaPlugin(internalFilePath,onStatusPlayerUpdate);
so, on googling foundout: https://forum.ionicframework.com/t/ios-9-cant-play-audio-video-files-that-are-downloaded-to-device/37580/4
so using "cdvfile://localhost/library-nosync/" + fileSrc; as a temporary solution. Its not working for android.
so to be able to use in both platforms, i should be able to follow other solution, where the path will be resolved to InternalURL. when i try
window.resolveLocalFileSystemURL(src, function(dir){});
its saying resolveLocalFileSystemURL is not a function.
anybody can help me with it? how to use window.resolveLocalFileSystemURL in ionic 2?
I am using it in ionic 3, for iOS build. Please check the code:
this.file.resolveLocalFilesystemUrl(this.file.dataDirectory).then((entry) => {
console.log("Success! Got a DirectoryEntry",entry);
});
Here, I am using cordova-plugin-file but I think it should work for cordova-plugin-file-transfer also. Please try and let me know, if there is any issue.
I am developing an android app based on ionic 2 using typescript.
I would like o open a PDF file inside my app with another app that is registered for the fyletype (e.g. Acrobat Reader).
Therefore i tried the two standard plugins:
https://github.com/disusered/cordova-open
https://github.com/pwlin/cordova-plugin-file-opener2
Although ive added both plugins via "ionic plugin add ..." and of course played around with several combination referencing to it
the result is always that they ere not found
cordova-open
var open = cordova.plugins.disusered.open;
Property 'disusered' does not exist on type 'CordovaPlugins'.
cordova-plugin-file-opener2
cordova.plugins.fileOpener2.open(
filePath,
fileMIMEType,
{
error : function(){ },
success : function(){ }
}
);
Property 'fileOpener2' does not exist on type 'CordovaPlugins'.
I am running the app on an emulator via ionic run android
Could you please give some hint how i can achieve to use one of these plugins?
Thank you very much
Shane
Does anyone know how to display local images, packaged inside a Cordova container, using Ionic (http://ionicframework.com/docs/)?
I am currently getting this error when the app runs on a device:
GET unsafe:local:///img/thumbs/myImage.jpg Unhandled Protocol
My Cordova app is built for BlackBerry 10 & Android using ionic framework. The app displays an image that is packaged inside the Cordova app itselfusing the following template:
<img ng-src="img/thumbs/{{img.path}}" ng-click="fooBar(img)"/>
Why is this error occurring?
I've discovered this is a current limitation of the ionic framework regarding BlackBerry 10 support. I've logged a bug here: http://github.com/driftyco/ionic/issues/1066
To fix this, I've since manually edited the ionic library to include support for the local protocol.
Angular issue
Replace following lines in ionic.bundle.js
var aHrefSanitizationWhitelist = /^\s*(https?|ftp|mailto|tel|file):/,
imgSrcSanitizationWhitelist = /^\s*((https?|ftp|file|blob):|data:image\/)/;
to
var aHrefSanitizationWhitelist = /^\s*(https?|ftp|mailto|tel|file|local):/,
imgSrcSanitizationWhitelist = /^\s*((https?|ftp|file|blob|local):|data:image\/)/;
I've just pull request to Angular, because it's an Angular limitation, not of the Ionic framework. You can see the pull-request here: https://github.com/angular/angular.js/pull/8787
We are using Phonegap 3.1.0-0.15.0 and the application chocked when trying to access location information.
Works fine in iOS however the App chock on Android
We are using:
navigator.geolocation.getCurrentPosition(app.location.onSuccess, app.location.onError);
and we also tried:
var geo = cordova.require('cordova/plugin/geolocation');
geo.getCurrentPosition(app.location.onSuccess, app.location.onError);
The logcat mentioned the following:
Could not find cordova.js script tag. Plugin loading may fail. at file:///android_asset/www/phonegap.js:1511
Uncaught module cordova/plugin/geolocation not found at file:///android_asset/www/phonegap.js:56
The plugin was added using:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Are we doing something wrong ?
Thank you in advance
/Edwardo.
Just to answer my own questions. I removed all the plugins manually and then add them (including the problematic geolocation plugin) using the following command:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
That solved my issue.
Edward.