Ionic 5 Camera App Tutorial

hey guys welcome to another code swag tutorial in this video I'm going to be showing you how to create a camera application using ionic and capacitor please make sure that you hit the red subscribe button and click the Bell icon so that you can get notifications of future tutorials please make sure that you visit code so echo dot uk' four slash shop where you can get yourself some awesome tech and merchandise especially for developers and buying from our store enables us to create more tutorials let's cue the music okay so we're gonna start off in the command line and we want to create a new ionic project and you just want to make sure that you have the up-to-date version of ionic so to do that we type in NPM install life and G at ionic CLI right and pressing enter on that will make sure that you have the most up-to-date version of ionic I already have an up-to-date version of America so I'm gonna start by creating our project so we do that with ionic start code so a camera blank capacitor [Music] okay so this just means that we're gonna create a project called code so a camera so that's the name of our application we're going to use the blank template and we want to make sure that capacitor is the default native bridge that is going to be used so we'll press ENTER to that and that will begin creating our okay so we want to make sure we choose angular for the framework and that's when I started downloading the blank started template and get everything started we want to integrate capacity yes [Music] okay so we don't want to create a violent account and let's clear our screen our project has been created successfully okay in the event that you have an existing ionic project and you wanted to add capacitor to that project you simply type in the following commands ionic integrations enable capacitor and pressing enter to this in an existing project will install capacitor fluid that project so we've created a new project here so that's not necessary so let's head into our project folder go to camera CD internet and let's clear the screen okay so both of the instances where we've created our project from scratch or after having run ionic integrations enable capacitor in an existing project the commands that you run from here on out are the same so first we initialize capacitor and we do that with the command npx cap in it and when we do that we are asked to give an application name so we'll call that code so our camera okay and we are asked for a package ID in Java format so we're just gonna call that UK let's see oh sorry that camera okay so that means our capacitor project is ready to go next we add the necessary platforms in this video we're going to be working with the Android platform so we will install the Android platform by running npx cap add Android and that's gonna go ahead and download and install oops I made an error I said npx zap and Android that's supposed to be cap so let's fix that okay okay so it gives us an error it says capacitor could not find the web assets directory that's because I neglected to first run the command I on build so let me clear the screen okay so first before adding any platforms you're supposed to run ionic build that's going to create the web as its directory that is then used by capacitor okay there we go let's clear the screen okay now we can then run an X cap add Android okay so the Android platform has been added to our capacitor project let's clear our screen and the next thing that we want to do is to open our project in our code editor so that we can begin implementing the code for the camera functionality if you have Visual Studio code you simply type in code followed by a period and that's going to open the application in Visual Studio code so we want to go to source and app and we want to go to home and open home dot page dot HTML the template file and home that pages are TS the typescript file and we're going to close that and cancel that notification ok so the first thing here is we want to get rid of all of this existing content and I'll just save that for now ok so first we want to add the mark-up for the camera functionality so we want to have an area where our image is going to show up and we also want to have a floating action button that we can click on in order to initiate the process of taking a photo or choosing a photo from the photo gallery so I'm going to type in that code you okay so here we have our mock-up first we have this image tag so this is going to contain our photograph and the next we have this our fab and the ion fab the floating action button is going to be containing our floating action button button okay so vertically it's gonna be at the bottom so it means it's gonna appear somewhere around here and horizontally it's gonna be centered so it's gonna be at the bottom at the center and fixed in terms of like whether you scroll up and down or side to side the floating action button will remain fixed in that or bottom center position and then we have the actual fab button and when it is clicked it's gonna activate a method called take picture which we are going to implement in a second and of course the floating action button will have a little icon of a camera so we're gonna press ctrl s to save the template file and next we want to head over to the typescript file ok so within the typescript file is where we are going to then implement the actual logic of our camera functionality so let me go ahead and type out the code and I'll explain it and we can then and test it out you okay so there we have all of our code so the first thing is we are importing these classes from capacitor core basically the capacitor plugins the camera results type and the camera source that's gonna allow us to connect to the camera and from the angular platform browser we are importing the safe resource URL as well as the Dom sanitizer and here we have our photo and we give it a type of safe resource URL because it's going to be a URL that's gonna be pointing to a storage location on our device so if we go back here this photo right here where the image is is gonna be this is this photo right here we are of course in our constructor using a private instance of the Dom sanitizer class and then here we implement the take picture method so this is the method that that's going to be run when the user clicks on our floating action button button okay so when that method is activated we are creating a constant called image and using the image we're gonna be activating the camera plugin and calling this method called get photo and what particularly of note here what makes this code very special is that we are using this one get photo method to be able to take a picture and this method is cross-platform it completely encapsulate the different details of how you're gonna take the photo on the not only on the web but also on the mobile platforms Android and iOS so within the get photo method we pass in this object that sets the particular options so we want 100% quality we are not going to be having the user edit picture we just want to take the picture in its raw form and then we have the results type that's telling us this is going to be a camera result type and this is gonna be a URL to a piece of data and then the source this field is telling us that we're gonna be taking the image directly from the camera we could be taking it from the gallery the photos that are already in our gallery and then finally we set the value of the photo variable to be the image that is returned from this call and the image data URL and this is passed through the sanitizer and it's gonna bypass the security trust resource URL so this is just a security mechanism to make sure that we are accessing the data from the camera and the data URL in a secure fashion so we're gonna be saving this so I'm gonna press ctrl + S and next we want to run this application in our browser so that we can test ok so in order to run our application for testing in the browser we need to go back to the command line and type in ionic serve okay so our application has loaded let's press control-shift in I and this is going to open the chrome developer tools and I just want to toggle the device view so we have our device view and what I want to do next is to head over to the console tab let me clear that and then we want to click on the camera fab button this one down here that we set up so when we do that we get this error in our console that says error and cut-in promise type error camera model that component unready is not a function so some capacitor plugins including the camera provide the web-based functionality and user interface via the ionic PWA elements library it's a separate dependency so we have to install it using the terminal so we want to go back to the command line and within the command line we want to press we want to hold ctrl and press C and then Y and enter and that's going to cancel the test server that was running let me clear the screen okay so what we need to do in order to resolve that error is to run the command the NPM install at ionic PWA elements that's going to install those missing dependencies okay so the dependencies have been installed successfully next we need to go back to our code editor so that we make sure that our dependencies are being imported correctly okay and in the code editor we need to open the side panel and if you want to scroll down until we get to main dot TS so within main dot TS we need a new import okay so with that appropriately configured we now want to rerun our Xserve and test in the camera functionality once again so in order for this to work in our browser we need to have a webcam on our computer so if you have any webcam of any sort we expect to be able to take a photo with that webcam I do indeed have one so I will press ctrl + S to save and head back to the command line in the command line I will run I unserved and that should bring up another test window okay here's our app let's press control-shift eye and ctrl shift eye is gonna open up the test it's gonna open up this like mobile view and my console has been cleared let's try to press 2 and then you see Chrome here is asking for permission to use my camera so I'm going to allow it and unfortunately says could not start a video source let me the bug that okay so i've discovered that the source of the error was that i was recording the screen so if I stopped my screen recorder and I pressed on the camera button as you can see we are able to you know access the camera on the application and you can even see here it has the name of my web camera in the console okay so let's take a photo and we're gonna accept that and as you can see the photo is then placed inside our image tag so that's it the camera is working great in the browser so if our application if we published it as a PWA it would be working great so let's try this out on the Android native platform so to do that we want to head to the command line okay so after successfully testing in the browser now we want to test in the emulator so we need to stop the test server from running in the browser we press ctrl + C to cancel that and then Y to confirm okay so I'm going to clear the screen right so the next thing that we want to do so since we've made changes to our ionic code where we implemented the camera functionality those changes were implemented since we initially added the platform so we need to redo some of those steps so the first thing we'll do is we need to run ionic build so ionic build will take our RNA code and we'll transpile it into the code that actually runs in the webview and it will place that code in the WWE folder this is the folder that is then used by capacitor to create our native project okay so that is done I'm gonna clear the screen and next I want to run MPX cap sync so that will synchronize the web assets in the WWE folder and it's going to add them to the android project to basically update the native project so this synchronizes the ionic application and the native application as well so now we can run the npx cap open Android to open our project using Android studio and there we have Android studio opening up and it's gonna do its initial build steps and everything okay so next we want to go to app manifests and Android determine androidmanifest.xml and we want to make sure that we have these lines over here line 49 and line 50 basically these lines make sure that our application declares that it requires the permission to read from and to write to the external storage and we need that for our camera and our photos as it says there okay so it looks like everything is in order next let's start up our application in the Android emulator we can click the run app the little green play button up here or we could also come up here to the menu and click on run application so if you want to make sure that your setup is integrated the way you have ionic and Android studio connected like this I have a video where I go through the entire setup process okay so there we have application and if we click on the camera button and it's gonna ask for permission do you want to allow the application called so a camera to take pictures and record video we're gonna allow it and as soon as we do we are taken to the camera and can take photos now because this is on the emulator of course there is no actual camera so we get this like moving graphic but if you run this application on your native app you should be able to take a photograph and as you can see here we take a photograph the emulated photograph and as you can see our application is working great if you like this channel and our content please head over to our online store code swag dot code at UK forward slash shop which has a shop especially for developers where we sell cool tech like this two terabyte nvme m2 SSD from Samsung which is blazing fast it has read and write speeds of up to thirty five hundred megabits per second and all kinds of other awesome tech so please head over to the store and support this channel thank you very much for watching this tutorial please make sure that you like this video leave a comment if you need help with anything or if you want a request for a if there's a topic that you want covered in a future video also make sure that you click the red subscribe button and you hit the bar icon so that you can be notified of future tutorials I think in a future tutorial I'm gonna be showing you how to then take this image and to save it on your device or to upload it onto an external IP I thank you very much for watching this video please support this channel by sharing the video and also you can head over to code swag code UK forward slash shop where you can buy awesome tech for yourself and your friends and also all the proceeds from that help to make more tutorial videos thank you very much and have a nice day [Music] you

Channel: Code Swag

Views: 16,216

Keywords: ionic 4, ionic framework, mobile apps, pwa, hybrid apps, ionic 5, android, ios, ionic tutorial, mobile app development, capacitor, angular, angularjs, javascript, frontend, camera, camera api, capacitor camera plugin, camera plugin

Id: MRXO2WQMxNM

Length: 25min 10sec (1510 seconds)

Published: Thu Apr 30 2020