Ionic Camera App - Ionic Vue Example

welcome to another code swag video in this tutorial we're gonna learn how to create a complete cross-platform photo gallery app that runs on the web ios and android using capacitor ionic framework and vue.js the first thing that we want to do is to ensure that we have the latest version of the ionic cli and the relevant tooling we do that with the following command [Music] so we're running npm install dash g which is going to install everything globally and the latest version of the rxli native run and codover res okay that's done so we'll clear the screen and now we want to create our project so we do that with the ionic start command and we're going to be using the view framework our project name is going to be view camera app [Music] and we're going to be using the tabs interface if you want to know how to set up your ionic development environment like i have with integration with android studio xcode etc then you can click on the link in the corner of your screen or in the description below [Music] okay we're not going to create an ionic account and that's it our project has been created so let's navigate into our project folder and once we are inside our project folder we want to install another dependency so we're going to type in npm install [Music] ionic pwa elements sorry that's a hyphen there so what this allows us to do is to access some of the plugin functionality from inside the browser or a progressive web application pwa okay that's been installed let's clear our screen and now we can get to the fun part let's start coding so we'll open our project in our favorite code editor okay so we'll go to source and main.ts and let's close this drawer so the first thing that we want to do is to add an import for defined custom elements okay now that our import is done the next thing is we want to come down here and call define custom elements and inside it pass in the window object [Music] okay so let's save our file and now we want to run our application in the browser so we go back to the command line and inside the command line we want to run the command ionic server that's going to start a development server and launch our application in the browser so here we have the device frame view to get to that view just press ctrl shift i and then make sure to click here toggle device toolbar so that's it this is our blank tab application pretty basic at the moment but now we get to the fun part let's start coding so back in the code editor we want to close this open the drawer go to views and tab to dot view let's retract that and so let's start customizing our application this is the view camera app that's going to be our title and let's just put that in the condense now let's get rid of the condensed screen completely so we just have that default title and we want to get rid of the explore container this one right here so let's delete that and then we'll delete this and of course delete that as well okay so let's save and now we want to update the imports within the script tag so this is our script tag and we want to update the imports to include the camera icon as well as some of the ionic components that we will be using okay so we edited this import right here where we are importing the various ionic components from ionic view so we initially had page and header and toolbar and title and content and then we added ion fab and five button and grid and row iron column iron image okay so this is basically how we work with ionic components in view we have to import each component that we're going to be making use of next we want to add the new ionic components that we're going to be using to the default export as well as returning the ionicons in our setup method as part of the composition api so basically all this stuff that we imported up here i'm just gonna copy and i'm gonna add it down here okay and we need a setup method so i'm gonna do that right here so our setup method is going to return the camera trash and close icons okay so i've made a mistake you can see we have this squiggly line on setup i need to correct my mistake so my mistake was i put it outside the export default so i just need to paste that in there and add a comma here and that's it now it's working fine i can save this file next we want to add a floating action button to the bottom of the page so let's scroll up here to the template part of our application and inside ion content we want to add the following code okay so this is the code that we just added we are adding an ion floating action button or iron fab that is vertically going to be at the bottom and horizontally it's going to be centered and it's going to be fixed in that position at the bottom of our screen and there's the iron fab button so when that is clicked it's going to trigger this function which we are yet to define but the function is going to be called take photo and we have an icon that is coming from our ionicons coming from down here which is the camera icon so let's save this and next we want to open the next file which is going to source views and we want this one tabs dot view so within this file we want to make a few changes first within the tab bar so here we have our ion tabs and then we have our tab bar we want to change the label here so it's called tab 2. let's change this to photos and we want to of course make use of the images icon and that means we need to import this images icon from ionicons so i'm going to copy this go down to the import and let's add that there okay so let's save and next we'll work on taking photos with the camera okay so with our app launched in the browser we can see some of the changes that we made here we have this footage label here on our second tab we have our floating action button and when the button is clicked well now there's an error saying take photo is not a function that's because we haven't defined it but we can see some of the basic changes that we've made are showing up though the icon isn't showing up so that needs a little bit of investigation but otherwise we're making progress with our application let's move forward now for the fun part adding the ability to take photos with the device's camera using the capacitor camera api we'll first build it for the web as a progressive web app and then we'll make some small changes to make it work on mobile that's ios and android so to do so we'll need to create a standalone composition function paired with the views composition api to manage the photos for our gallery so we want to create a new file at if we go to source and inside source we want to create a new folder and we'll call that folder composables so inside our composables folder we then want to create a new file and we're going to call it use photo gallery dot yes so inside use photogallery.ts we will start by importing the various utilities that we will use from view core and capacitor okay so our imports are done the next thing is we want to create a function called use photo gallery okay so here we go um one small thing i need to correct you can see there's a red squiggly line here when i was importing uh this so i need to change that s that's a lowercase s file system with a lowercase s okay so let me explain the code first we are importing ref on mounted watch these classes from view core and then we are importing plugins camera results type camera source camera photo capacitor and file system directory classes from capacitor core and then in our use photo gallery function it exposes a method called take photo so in take photo we are calling on the uh camera and you can see we have camera here this is the camera plug-in that's coming from capacitor so we're importing plug-ins up here and from all those plug-ins we are extracting the camera plug-in so it's this camera plug-in that we're accessing here and we're calling the get photo method off the camera plug-in and when we are telling it to get a photo we are saying the result type that we want is a uri which is the camera result type dot uri type and the source so where are our photos coming from they are coming from the camera directly we can get our photo from the camera or from the gallery on the device or we can prompt the user to choose which source that they want and then here we are setting the quality to a hundred percent so notice the magic here there's no platform specific code um anything specific for web for ios or android the capacitor camera plugin abstracts that away for us leaving us with just one method called this get photo over here so that means that this same code will work uh to open up the device's camera and allow us to take photos regardless of which platform that we are on the last step we need to take is to use the new function from the tabs to page so let's go back to tab two dot view and import it oh but before we do that of course we need to press ctrl s to save or command s on a mac so here in type 2 so in tab 2 we need to add an import next within the default export add a setup method part of the composition api so we destructure the take photo function from use photograph so we destructure the take photo function from use photogallery.ts and then return it okay that's it let's save this file ctrl s or command s on a mac okay so you may be getting this error that says that you know it's complaining that some of these uh components haven't these components have been registered but haven't been used on row iron column etc yes we haven't used them but we're going to use them shortly but let's try to get rid of this error let's go back to the command line in the command line i'm going to press ctrl c to try to cancel yes for confirmation and let's just restart the server by running ionic serve once again okay so after restarting our development server our app functions as expected and if we click on the photos tab and click on the floating action button it's going to open the camera on our device and you can see it's ready to take a selfie so i'm just going to take one very quickly and there we go we can confirm that this is a great image if we want it or we can cancel and take another one and there we go but as you can see that after taking a photo it disappears right away but we still need to display it within our app and save it for future access so let's work on the code for doing just that so let's go back to our code editor and we're not going to be working in tab 2.view we're going to be working in use photogallery.ts now the first thing that we will need to do is to create a new type to define our photo so let's go up here so first we will create a new type to define our photo which will hold specific so let's add an interface to use photogallery.ts somewhere outside of the main function okay so that's it for our interface um our metadata is going to consist of a file path and a web view path depending on the device that we're working on so let's save that and then back at the top of the use footer gallery function right after referencing the capacitor camera plug-in right here let's define an array so we can store each photo captured with the camera and we're going to make it a reactive variable using views ref function so what we want to happen is that when the camera is done taking a picture the resulting camera photo object returned from capacitor should be added to the photos array that we just created so let's update the take photo method and add the following code after the camera.getphoto line okay i just saved the file so let me explain everything in one go so up here we are creating an interface for our photo that's defining the metadata that each photo contains and down here we are creating a reactive variable array using ref from view core and then in our take photo method we will first take the photo and after the photo has been taken we are defining this constant called the file name and the file name basically is just going to consist of the time that the image was taken and then we will append.jpg so the name of the file is going to be the time the timestamp with jpeg at the end and then the saved file image is we're going to be using the file name and we're going to be using the path to the image from a camera photo so here the uh camera photo variable that's containing this call that we just made and then in the photos array this uh photo's reactive array over here we are then going to add the uh path so where each time we take a photo we are appending to this array the path and the name for each photo that we have taken and then of course at the end we just return it in our function there back in tab 2.view we want to update the import statement to include the photo interface and then of course we also want to get access to the photos array when we destructure down here and lastly we want to add photos to the setup return okay so that's it we're gonna press ctrl s to save command s on a mac okay with the photos stored in the photos array we can now display the images on the screen after we take a photo so to do that we want to add a grid component so that each photo will display nicely as they are added to the gallery so we're gonna have a grid of photos and then we'll look through each photo in the photos array adding an image component for each and of course we'll point to the source of the photo's path okay so with the photos stored in the photos array we can now display the images on the screen so we added an ion grid so that the images can be displayed neatly so in the iron grid we are creating a row and in each row there's going to be columns of size 6 and the key is the photo and then we're going to be using v4 to loop through each photo in the photos array and then for each loop we are taking the ion image and we're putting in the source of the photo.web viewpot so we're looping through the photos array and adding each image into our template so that's it let's save this and test it out in our browser and again in our browser we are getting this error where it says we're defining all of the stuff but never making use of it so to get rid of this you just need to restart your development server to do that let's go to the command line so ctrl c to cancel the running process yes clear the screen and restart ionic serve and it's going to fail again but let's just retry one more time okay and then it works the second time so if you keep getting that problem just keep trying to restart the development server and eventually it will work okay so let's go to the photos tab let's take a photo that's photo number one and you can see it's now appearing in our screen we can take another photo and you can see all the photos are being added okay and you can see with each subsequent photo that we take it's being added to the grid that is awesome but the downside of all of this is that this is an array that exists in temporary memory so if we restart the application everything disappears so the next thing that we want to work on is saving the photos to the file system so that they are available for retrieval permanently even after you close the application fortunately saving them to the file system only takes a few steps so let's begin by opening the use photo gallery function right here and we want to extract the file system api from the capacitor plugins so these plugins that we're importing from capacitor we want to destructure the file system api so we'll just add in file system here next we want to create a couple of new functions so the file system api requires that files written to the disk are passed in as base 64 data so we need a helper function that's going to be used to assist with that so let's create that function now okay so here's our helper function for converting a blob to base 64. so basically it's uh going to return a promise and we are declaring this constant reader which is a file reader so of course on error it's going to reject the promise and unload it's going to try to resolve the result of reading the file and then of course we're going to run reader dot read as data url and passing in the blob next we want to add a function to save the photo to the file system after the photo is captured so okay so here is our function to save the photo to the file system we first of all pass in the camera photo object which represents the newly created photo from our device as well as the file name so that's what we're passing in right here so that's going to provide a path for the file to be stored to and then we are making use of the capacitor file system api to save the file to the file system so here we are that's what we're doing here by using filesystem.writefile and then we pass in the file name the base64 data and the directory to which we are posting the application but first of all we are making sure to convert the file up here to base 64. so we're fetching the photo from our response and then we are reading it as a blob on this line line 40 and then finally we are converting the blob to base 64 data and then it is the base 64 data that we are then saving to the file system okay lastly we need to update the take photo function to call save picture and once the photo has been saved we need to insert it to the front of the reactive photos array so we'll make our edit here and there we go each time we take a new photo it's gonna automatically be saved to the file system however there is one last piece of functionality missing the photos are stored in the file system but we need a way to save pointers to each file so that they can be displayed again in the photo gallery fortunately this is very easy we'll leverage the capacitor storage api to store our array of photos in a key value store so we begin by defining a constant variable that will act as the key for the store at the top of the use gallery function right here and then next we are accessing the storage api from capacitor plugins and next we add a cache photos function that serves that saves the photos array as json to file storage so you can see it's using the key here from photo storage and the value is going to be the value coming from the actual photos next we use view cores watch function to watch the photos array so whenever the array is modified in this case taking a new photo or deleting a photo it will trigger this cache photos function right here so this is what is being watched and this is what will be triggered when what is being watched changes so it will trigger the cache photos function not only do we get to reuse code but it also doesn't matter when the app user closes the app or switches to a different app the photo data is always saved now that the photo array data is saved let's create a function that is going to retrieve the data so that when tab 2 loads we get the existing photos from storage uh okay so with our load saved function basically what we're doing is we are getting a list of photos that are inside our storage using the photo storage key and then that is going to be in that variable for our photos in storage and then we loop through each photo that is in the storage and we have that file and we are appending to photos.web view that particular file data and then we are passing the photos and storage back to the photos array finally we need a way to call the load saved function when the photo gallery page is loaded to do so we use the view mounted lifecycle hook within the use photo gallery function so we want to add the on mounted function and then call load saved so we are doing that up here where we are importing unmounted from arc view sorry from view view core and then below our load saved function we can just paste in that call to unmounted and then it will call load saved so when the page is mounted load saved is going to be called automatically all right that looks great let's uh just save our progress as we go that's ctrl s on mobile which we are going to be coding a little bit later we can directly set the source of an image tag to each photo file on the file system and then displaying it automatically on the web however we must read each image from the file system into base64 format because the file system api stores them in base64 within the index db under the hood that's it we've built a complete photo gallery feature in our ionic app that works on the web next up we'll transform it into a mobile app for ios and android so our photo gallery app won't be complete until it runs on ios android and the web all using one code base all it takes is some small logic changes to support the mobile platforms and installing some native tooling and then we can run the app on the device okay so let's start with making some small code changes so that our app will just work on any device so we'll need some platform specific logic okay so first up is we will update the photo saving functionality to support mobile we'll run slightly different code depending on the platform whether it's mobile or web so first we want to import the platform api from ionic view um okay okay so in the save picture function we are checking the platform to see what the app is running on if it is hybrid which is the native capacitor runtime on ios or android then we're gonna read the photo file into base64 format using the read file method we also return the complete file path to the photo using the file system api when setting the webview path we use the special capacitor convert file source method otherwise we use the same logic as before when running the file on the web so you can see here we're using the filesystem.read file reading it into uh base 64. if it's on the web and then saving our file and even in our return here if it's in hybrid we are going to convert the file source but otherwise if it is on a web then we return as we were doing before okay so for this block of code we only want to run this if we are not on a mobile device so that means only when we are on the web is when we want to write this so we want to wrap this in an if statement where we check if we are not on the hybrid platform so only when we are not on the hybrid platform do we run this web specific code so that is it our photo gallery now consists of one code base that runs on the web on android and ios next let's work on implementing functionality to delete photos so still in the use photogallery.ts file let's go up and we want to add an import for the action sheet controller we'll display an ion action sheet when a photo is clicked with the option to delete a photo so let's do that okay so up here we are importing the action sheet controller from ionic view we're also importing the trash and the close icons from ionicons which we are going to make use of and here we have our function for deleting a photo basically it accepts a photo as a parameter which is the photo we want to delete and it's modifying the array by making the photos array equal to a photos array that does not have that particular photo's file path so it filters out that particular photo using its file path and then uh creates a new uh photos array with that and then so this is removing it from the array that we're working with in memory and then removing the photo from the file system we get the file name and get that substring and can and then get the last index of so we're getting the last photo that's been um selected and then we use the filesystem.delete file method to select that file name and then that directory and then that deletes that particular photo but in order for us to trigger this delete photo function we are triggering it from an action sheet so what we want is that when a particular photo is tapped we will show this particular action sheet with the header photos and then there are two buttons that are presented this cancels so if cancel is clicked we trigger this handler that is empty because we aren't doing anything when the handler is uh selected right when the handler is selected we aren't doing anything in particular we just close so there's nothing in that handler but then when the delete button is selected we are gonna trigger the delete photo function passing in the particular photo so that's when this is triggered we pass in the photo delete it from the array and then delete it from the file system and of course we have our trash icon for the delete and we have our close icon for closing and then at the very end we present our action sheet and finally all the way down in the return we are returning delete photo and show action sheet remember that removing the photo from the photos array will trigger the cache photos function for us automatically so that's going to update in our view so if we go way up here the cache photos function is going to be triggered when we remove the photo from the array so let's save this and then back in tab two dot view we need to make reference to the delete photo function so first of all here in our setup we need to destructure the show action sheet actually show action sheet that is destructured from the use photo gallery and so what we want is that when the user taps on an image right here we want to display that action sheet so let's add a click event okay so when the image is clicked then the action sheet function is going to be triggered the action sheet function is coming from used photo gallery and here it is so when that is triggered and then we delete the photo and then we trigger this particular function all right so that looks good let's save this and test it out in our browser so we'll run ionic serve and when we run ionic serve we are running into this error so it says in use photogallery.ts um there's line 9 where it's expecting a semicolon and save picture was used before it was defined so let's go to line nine and on line nine okay we're supposed to put in a semicolon there and on line 85 we're told that save picture was used before it was defined so okay so save picture is defined here at the bottom so that means we need to move this function above okay so the order in which the functions are declared is actually important so if we [Music] just okay let's make this the very first function so i'll paste it up here and that should take care of our error let's control s to save and again on line 29 we're having an error where convert blob to base64 was used before it was defined so let's fix that all right convert blob to all right let's so let's find that all right there we are all right let me just add this at the beginning as well and save hopefully this works now okay so our app is running in the browser and we can tap there to try to delete and we're getting this error that says show action sheet is not a function i have realized where the problem is so let's get back to the code editor okay so here in tab two dot view we are destructuring show action sheet from use photo gallery we are also supposed to return show action sheet so if i just add it to that return right there ctrl s to save and then go back to the browser okay and back in the browser let me just clear the console and there you go you can see we have our action sheet we can cancel and we can delete the picture and it disappears we can delete it again if we refresh we can see our photos change if we want to take a new photo and save that photo you can see the new photo is added old footers okay now for the part that we've all been waiting for let's now deploy our application to the android and ios mobile platforms so for that let's head to the command line in our command line we just want to cancel the server that was running ionic serve and cls that's going to clear the screen so capacitor which is the native runtime for ionic was automatically added by the ionic cli when we created our project so there are only a few steps left let's start off with building our app for android and then we'll move on to building it for ios the first command that we want to run is arc build this is going to prepare all the assets for creating a native project okay ionic build is complete the next thing we want to do is we want to add the android dependencies using capacitors so we run ionic cap add android and once again if you want to integrate your ionic development environment like i have in order to run your app on android and ios then click on the link in the description below it's a full guide on getting your ionic development environment set up and integrated with android studio and xcode okay so we have everything set up um so the android folder is going to be created at the root of your project and this is an entirely standalone native project that should be considered a part of your ionic app that means that you should check it into source control and edit it using native tooling like android studio so every time you perform a build like ionic build that updates your web directory so you'll need to copy those changes into your native project so let's clear the screen so let's suppose that we had made some changes to the code we would then run ionic cap copy and then that would change the that would copy over the changes that we made in ionic in our typescript files that will be carried over into the android studio project that has been generated by ionic cap ad android if you made changes to the native portion of the code for example adding new plugins or anything of the sort then you would need to run ionic cap sync that would synchronize all the native aspects of the project okay so that's it let's get ready to launch on android sorry cls to clear the screen okay so capacitor android apps are configured and managed through android studio before running this app on an android device there are a few steps to complete so okay first let's launch the application in android studio we do that with ionic cap open android okay so our application is open in android studio but before our app can run on a device or even on the android emulator we must first enable the correct permissions to use the camera so we configure these in the android manifest.xml file so let's open our project here we have app let's look okay manifests right there we go android manifest.xml um so android studio usually should open this file automatically but in case it doesn't we just go there um okay so we are looking for the permissions section which is down here and we want to type in the following okay so that's it we are adding these two permissions for reading and writing the external storage and that should be it so let's click on the blue play button to run our application again in order for you to get your ionic application to run with android studio like so you need to check out the video on setting up your ionic development environment okay here we are in our app let's go to photos and let's take a photo and we'll save that so i think these photos that aren't uh displaying correctly let's delete them i think those were from our browser so let's these are the photos that are showing up on our uh these are the show these are the photos that are showing up in our emulator um our emulator doesn't have a real camera it just has this sort of emulated camera but if you run your application on a device of course you'll be able to take real photos okay so we've taken these four photos if we close the application and then come back to it this is view camera and we go to photos we can see our photos are persistent they're still there and if we delete one now we have three and we close the application then we have those same three photos available so that's it this is our application running on an android device let's check out making our application run in ios so here i am in my mac os terminal and of course you do need a mac computer in order to build your application for ios so since i have just downloaded the application from the repository which you might be doing if you're going to be downloading the code from here you need to install the dependencies and we do that with the command npm install so npm install is going to install the dependencies that we need for our project it's just good practice to make sure that this is done otherwise your application will not run okay dependencies are installed let's clear our screen and next we want to build our ionic files and prepare to build for mobile so we do that with the command ionic build okay so ionic build is done and our typescript files and everything have been compiled so again we're going to clear the screen and now we want to add the capacitor ios dependencies to our project we do that with ionic cap add ios okay so ios has been added to our project we're going to clear the screen one more time and now it's time to open our application in xcode so i'm going to run ionic app open ios that is going to open our project in xcode and here we go our application is open in xcode so if i click here on app you can then see we have our application so the final step is we have to make sure that we have all the permissions enabled so for that we want to click up here on info and we want to make sure that this is retracted this custom ios target properties and you just want to right click and make sure that raw keys and values is turned on and we can see the so-called low level names and we can see the one we want is this one ns camera usage description so this is automatically put up because a capacitor can detect that we're making use of the camera plug-in so this is so we have this key right here the ns camera usage description and the value is gonna be some text that is presented to the user when the application is asking for permission to use the camera so it's just gonna tell the user that this is gonna be for taking photos and video let's double click we're gonna double click and edit this a little bit we're just gonna say to take photos because there isn't any video capability in this application so that's all we have to do regarding the permission the final thing is we want to go up here to signing and capabilities you want to make sure that you add a team this is a development team and this will require you to sign in with your apple id and this should be an apple id that has that is linked to an apple developer account because you will need an apple developer account in order to run your application on a real ios device for the purposes of this demonstration however we're just going to be running it in the simulator though you want to do it on an actual device so you add your team account there and then you add your signing certificates and all of that and then once that is all done you want to then connect your ios device to your computer and then you'll come up here where it says app and then you have this and you can select a device for the ios simulator so for now i'm just going to be have this iphone se actually let me make it maybe iphone 8 that'll be fine not too heavy on the resources and all you have to do after all of that is done is to click on this play button in the top left corner and that is going to launch the ios simulator so it will build the application compile it run the simulator install the app in the simulator and we should see our app running in a second so here is our application launching in the iphone simulator and there we go there's our application if we click on the center button here we can get to the photos page and if we click that it will try to launch the camera but unfortunately the camera is not available in the ios simulator kind of like how an android we had that full camera that was not really taking any pictures in the ios simulator there isn't any camera at all but i've just done this for demonstration purposes however when you launch on your device you can check out your camera in action unfortunately i can't do that because well you can't see what'll be on my screen but anyway congratulations you've just created a complete cross-platform photo gallery application that runs on the web on ios and on android using capacitor ionic and vue.js thank you very much for watching this tutorial if you enjoy my content and would like to help me create more of it please consider becoming a patron at patreon.com forward slash could swag for as little as one dollar a month you can help me to create more great content as well as enjoying benefits such as being able to request future tutorials getting early access to all my video tutorials and other great stuff such as one-on-one debugging help so please head over to patreon.com forward slash codeswag

Channel: Code Swag

Views: 3,903

Keywords: ionic camera, ionic camera capacitor, ionic camera app example, ionic camera example, ionic 5 camera example, ionic camera plugin example, ionic camera not working, ionic vue capacitor, ionic vue example, ionic vue tutorial, ionic camera image upload, ionic camera nto working android, ionic camera permission ios, ionic camera exemple, ionic camera crash android, ionic camera options, ionic camera preview exemple, Ionic camera nto wokring android, how to build ionic camera, vue

Id: 3Cy5W_fpQSA

Length: 66min 22sec (3982 seconds)

Published: Sun Dec 13 2020