Ionic 4 : use cordova media-capture plugin in the Ionic Lab?

Ionic Framework
1

I am currently learning Ionic 4, and for an academic project, we have to develop a mobile app for iOS and Android.

The development of our project was going prefectly fine, and we used the ionic serve -l to run our app. We find that the Ionic Lab is really practical to develop, as we can have a mobile preview of our app inside the browser, for android as well as for iOS. We also really like the “live” aspect of the ionic serve command, as we don’t have to restart the server at every change in the code.

However, as I now have to implement an audio recorder in the app, I tried the follow the documentation of Ionic available here. I added the cordova-plugin-media-capture plugin with the following command ionic cordova plugin add cordova-plugin-media-capture , and installed the media-capture package with the following command npm install @ionic-native/media-capture .

It seems like it’s working fine, but when I click on a button to try to record some audio, it doesn’t work, and I get the following warning and error the Chrome console :

Native: tried calling MediaCapture.captureImage, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

cordova_not_available

I’ve searched for solutions online, and it seems like in order to use cordova plug-ins such as the media capture, it is needed to run the application with a command like ionic cordova run browser . And it seems like it’s working, however I get the “browser” version of my app.

So my question is fairly simple : is there any way I can get the cordova media capture plug-in to work in the Ionic Lab ? If not, is there any other app-testing envrionment that are similar to the Ionic Lab (a mobile platform preview, fast launch, live testing…) that allows this plug-in to work ?

I’m sorry if this is a dumb question, as me and my team are still learning Ionic for school, and thus are quite new to this whole envrionment.

Thanks in advance for your answers.

2

Hey @souyahia,

In Ionic to check cordova plugin functionality, You have to build an apk for specific platform like android/ios.

You can not check this functionality on any browser. You have to test it on real device.

So for this,
Tip to build an apk for specific platform…

For android:
–> Add platform first buy using “ionic cordova platform add android” command.
–> After successful adding platform, Build an apk by “ionic cordova build android --prod” command.

For ios:
–> Add platform first buy using “ionic cordova platform add ios” command.
–> After successful adding platform, Build an apk by “ionic cordova build ios–prod” command.

Then test build apk in your real device.

Hope this will help you :slight_smile:

1 Like
3

Hey @Priyanka34,

Thank you for your answer. I was hoping there was a solution in browser, because APK generation is kind of slow and isn’t practical for micro-testing.

Thank you for your answer :slight_smile:

5

I am using media capture plugin in my ionic project. The plug in is working fine in local android build apk as well as emulator. But when I commit the code and build the same ionic cloud(web) build, the build is successful but the plug in doesn’t work and is giving error plugin_not_installed. I suspect the issue could be with compatibility of media-capture plugin with Cordova CLI 9. Is there any work around for this? I have already spend too much in analysing and finding solution for this. Raised a request in IONIC community forum also. But didnt get any response till now. Expecting a response from some expert here.Thanks in advance