Letting your users capture media within your Ionic app is a feature most apps have or need today. The process of capturing these files is actually super easy, and also saving and displaying those local files can be achieved with a few simple hacks.

In this Quick Win we will build an Ionic app that allows us to capture either audio or media from the user. We will store those files with Ionic Storage and finally add the needed plugins to display/play those local media files again!

Setting up the App

We start with a blank Ionic app and install a few Cordova plugins to capture media and to display those files. Of course we also add the according NPM packages for Ionic Native, so go ahead and run:

Next we need to import all of the stuff to our src/app/app.module.ts just like always:

Finally, if you want to build this app for iOS you need to add specific keys to the *-info.plist of the native iOS project to get the permissions of the user (and of Apple..). The good thing is you don’t have to to this manually all the time, simply put these lines into your config.xml and the keys will be automatically added!

Now we just need to build the actual functionality and we are ready to capture media.

Capturing Audio & Video

Our view won’t win a design award, but it holds 2 buttons to trigger our functions and a list of all the media files we have previously stored. Those files will be loaded from the Storage inside our class, so for now just accept that there’ll be files 😉

Also I added a video tag because the Cordova video player plugin was not really working for me and doesn’t seem to be maintained anymore.. But anyway the HTML tag also works nicely and gives us all the controls we need.

Go ahead and change your src/pages/home/home.html to:

At last we come to core of this article which is capturing media files. And storing media files. And playing media files.

First things first, whenever our app loads we try to load an array from the storage which will later hold the information for mediaFiles. We need to parse the string to an array because of the way we save our information inside the storeMediaFiles() function as a stringified array.

Capturing audio and video itself is not really a problem, it’s one call to the plugin that will bring up a view to capture the selected type.

What we do with the result is the more interesting thing here, and for audio it’s easy: We simply store the information to our array and Ionic Storage and don’t need anything else. It just works(tm)!

Capturing a video is also not hard by itself, but I had trouble to access the file later on as it’s only temporary available and therefore we have to copy the video file into our apps folder if we want to persist the video file.

For this copy command we examine the actual returned path of the captureVideo() function and create all the values for the copyFile() function of the Cordova File Plugin.

Now all of our media or better: the paths and information for media files is written to the storage. The actual media file is not inside Ionic Storage!

Finally we need a way to play our audio and video content and that’s where the play() function comes into action.

For audio we can easily use the Cordova Media Plugin which works fine with the URLs of the audio file we got previously from the capturing plugin.

To display video I had to patch the path, because currently the media file is within our apps folder, but the path to the folder can change. Therefore, we can get the path to our app by using the Cordova File Plugin and simply the name of the actual file.

This path can then be used for our video tag which is accessed through the @ViewChild annotation at the top.

Ok enough of this, here’s the code for the src/pages/home/home.ts:

Perhaps the explanation was even longer then the code, but there are a few things going on here and I wanted to make sure everything’s clear. Especially copying files and changing paths can be confusing inside Ionic apps, so add some log statements and see what’s going on!

Known issues: The video tag sometimes takes a bit long to load, give it some time in the beginning.

You can also find a video version of this Quick Win below.