Code Hangout #17 – Create Camera Like Snapchat in iOS – iOS Development Tutorial

Just another WordPress site

Code Hangout #17 – Create Camera Like Snapchat in iOS – iOS Development Tutorial

hey one is the founder of developers Academy and today in this episode I would like to show you how you can create or use an open-source library to create some camera just like the snapchat camera ok now you recall that the snapchat camera it doesn’t look like the our default image picker controller ok our image picker controller it looks quite like the camera in the iOS device okay look with this one you see on the screen this is live casting from my iphone over here ok it is right here and dump ask Warren right now here we go so this is an iPhone right there so you see that this camera looks really nice and you can you can make it like this ok and you can even focus on that alright and look at why would you here oops alright alright and with this one you can even take a photo take a video game very nice or you can show the front-facing camera like that hello alright so now let’s go up to our start projects and you will learn how to do this first let’s go down the link right down below and download the start picture including the things I set up for you and also the open source library right and if you are watching this on youtube then go down the link in the description area right so I see you in a minute alright welcome back now this library it is with the link inside the photo that I gave you it is an open source library on github but the problem is this one is written in objective-c and many of you may not be familiar with Objective C so I want you through this a little bit get just a little bit because I already set up some of the things for you and I always will put some comments inside the code for you just one or two lines that you need to change right so now let’s up let’s be the UI first all right let’s go back to main our storyboard and I will drag out a view control like this this view control it will serve as our image picker sheet guy image picker the camera basically and for this one how about I want to do it I will embedded it in a navigation controller embedding a navigation controller like this and make sure that this navigation controller is the initial view controller I will do it like this is initial view controller right so for that one for this one view controller I will assign the custom class of this to be the home view controller if you look at our folder right here the camera our controllers this one is that library and it has tons of other things it has home view controller which is the basically the initial view controller inside that it has the camera inside that it has a the segmented control you can change the segment control into the video view controller okay detect the video so that one I will go here so like that custom class over this custom class we will do it home view controller and just like that okay so now let’s how about let’s run this one and again for this one you will need an iPhone to run others I believe that we are running on Xcode 7 and with Xcode 7 all you need is a developer account a free developer account you don’t need to sign up in the program of course if you want to ship apps to the App Store then you need unpaid developer account I’m with this one if you can just test it like this all right it’s that simple ok you just need to assign the class of that ok but now the problem this when we click into this how we can take the picture how we can get an instance of that picture that we are taking so let’s let me show you that again so I’ll cancel project like this so let’s drag out another view control and then we will have that inside that view controller it is shows as the preview image you can try okay I will check out a view controller like this right and and then inside this one to do an image view just like that check it out like that fill the whole screen and of course for this one we will need a auto layout for that so how about I will make this a challenge apply Auto layout on this one okay and also we’ll also need a button okay I will check out button like this just close to

that and for that one how about we call ascend okay we’re saying that over internet sent to someone okay you know how to be on how to be on Easter messaging app usually will use that pop up the image send out to someone okay alright so pause the video apply Auto layout on this one just apply Auto layout on to image view and the same one and we will come back and continue this project right all right welcome back I hope that applying Auto layout on these two elements is really simple for you if you didn’t find it easy or straightforward then check out the own things Auto layout cause right down below again please check that out if you are not familiar with Auto layout because that is a very critical tool for YouTube you universal app of course in hours nine we have stack view website classes but all of these tools are built on top are two layouts you still need to learn about Auto layout to learn about those tools so learn Auto layout first all right so now from this preview image view controller I will drag control drag and create a custom model segue so we’ll have present model II okay and this view controller let’s name that class to be this class the preview image view controller only has is an image view an image so that someone can pass that image to you again so let’s preview image view controller and for that one also we want to name the a segue to be show image preview or something okay this one she’ll image preview alright and believe it or not that’s it so let’s run the project once again and to see how looks like right here we go it runs on the iPhone okay and now when we click and shoot up photo alright it says that expect that found Neal why I’m rapping why is it now when we go back into this okay and now if you look at this this one is usually when you have an error like this it means that you have a property okay and that property is Neal then when you that probably is near language sense a method or you unwrap that Neal probably they will crash your program it you might not you may already have this problem all the time right this is very very common when you use optional right so now let’s go up into our the stack I get this okay and if you click onto this you will see that this image view dot image is the one the line that breaks out code why is it okay why is it now when we go back into this this one is thicken the error okay you see that this image view is Neal that’s why this image view is Neal when we access the dot image property of that one it will crash our program why is it Neal well this image view is an iboutlet and as we create a new view controller we assign the same custom class to that view controller we also need to connect the iboutlet into that view controller also right so when we go back into this let me hi that right-click to that and you’ll see that we have an image view right here this image view right control jacket like that and that’s it now let’s run it once again and hopefully it works this time all right here’s our app and let’s check this photo boom there go all right we have this image and then we can have that button we can click into that we can do anything we want right but now how it does all of this happen okay you just create some view control assign some classes but how you can use this one in your project in the app that you’re working on well let me show you around you find out that this is really really easy okay so the home view controller this home view control is the one that shows the camera that one you usually actually don’t have to worry about that okay it is that class the home view controller the edge and homey controller dot M get down H is the

header file dot M is the implementation file basically all the code is usually is dot dot M file okay we want to talk about this later on but the thing that shows this preview image view controller is the class that you can write ok this preview image view controller you can do in any class write any code of yourself in the end this is in squid right but all the things you need is an image view and devar image this for image UI image is a property of public property so that’s someone the home view controller can pass the photo taken to this preview image view controller ok and how it can pass into that how we can pass the image that taken from this home view controller to this preview image preview image view controller Y through this segue we name that show image preview right so let’s go into the home view controller dot H right here and then we roasted I am right I place a warning over here and for you guys see that this five warning of you the first warning is that replace the simple camera demo with your project name okay why is it well because this code is in Objective C and the project we are working on is in Swift so if you are working on a project and your project names something like snapchat something like snapchat clone then one you want to do is instead of simple camera demo so if then you want to do snapchat clone Swift alright you this one is your project name right with that import statement it will import all the swift code into this project so that this object is see find this Objective C code can use your squid files right it’s just that the second one you want to do is right down below just scroll it down you’ll see another warning this warning is that if you would like to change the name of the segue the model segue from the home view controller to the preview image view controller then make sure that you change it over here the same way we’re using is show image preview okay that’s why it over here says perform segue with identifier like this right okay and below this code also there’s another warning and this warning if you look at this guy if you’re not familiar with objective-c then just look at the name of the method you very very familiar to Swift code okay it also has the prepare for segue and also has the UI storyboard segue segue and has the center okay the syntax is maybe a little bit harder to read and all the star things okay but only those made up basically the same okay you also check the identifier of the segue to this one show image preview okay you change use a different segue identifier it change it over here okay if you use a different name guy is instead of preview image view controller you use something else then change it over here okay something like same image preview controller or same image view controller or something like that okay just change the name of this so that it’s cast the segue destination view control into the time into the class that you are writing and make sure the inside that class you also have the image property thinking passing like that okay it’s just that simple right and we don’t have to write any code to show those camera just assign the classes that’s the wonderful thing about using open source library Avon is the founder of developers Academy in this video I would love to invite you to developers Academy monthly I know that as we start out we often in term didn’t have any experience didn’t have any programming experience but so that’s why we seek out to causes or programs out there but the problem is those causes and programs they didn’t offer you the whole experience maybe they will teach you the con concepts but after that if you want to be real war apt after that you want to learn more advanced technologies and skills in hours then you are left alone I think that there’s a better way for you to doing this there’s better experience for you to learn to cut cut your learning curve so I do jump ahead now before doing that I want you to I want to introduce you to the successful mindset edible boys Academy that we teach our students I want you to commit to learning and know

that as you’re here you’re so committed to learn and I all known you for you for doing that so that’s why I want you I want to give you the best strategic curriculum ever period this would be the best learning experience for you you will be real wall apps that is so beautiful and very smartly implemented and I want you to consistently learn I want you to I want to give you consistent education every month every week and as new technologies royal as new concepts and new ideas in our eyes royal I want you to teach you that and best of all I think the best thing is that you’ll be able to access to mentor to someone why Dino’s doing this or who already have some experience in ours that teach you that give you advices that when you are stuck that you will have me as your mentor to help you to get out of stock so now our program you will be able to access when you roll out when you enroll in developer gaming monthly beneath here you’ll be able to access all of our courses you will be able to be real wool apps with real-world tutorials step-by-step video tutorials with hundreds of those and as each month we’ll row our new courses for you now even if you don’t have any experience or you already have some with causes for you if you don’t have experience will teach you to how to program and Swift and then we’ll do some simple apps and we’ll move on to more advanced ones if you already have some experience with core concepts things like tableview collectionview animation you want to be social networking apps we have courses for you if you want to be stuff that fetch data from api’s passing chasing downloading data from internet with courses for you but the best of all is that you these apps are real war apps these apps are carefully designed and brilliantly implemented we want you to be beautiful apps and smartly implement apps write beautiful code and now these courses are always up to date will enroll in google roll our new courses every month for you and as its iOS is updated every year and every quarter even right now then we will update our courses for you so that you have the most up-to-date technology the most up-to-date skills and knowledge others so you can move most up-to-date apps how cool is that right you can access to all of our courses and tutorials everywhere any time whether it is on your iPhone iPad or on your MacBook why would you want whenever you want to learn those courses are there for you you right now have 16 courses and next month and every month will roll out new courses for you you can access all current causes and future courses as you are a subscriber now these causes would be wrong every month for you and this is I think the best way the fastest way for you to jam the learning comes the tag you from here to here you see that we even have more courses for you then I can even fit on this screen and every week every month I will roll out new courses for you so you can update new knowledge and new skills but anytime at any point in time that you didn’t find that you learn the most that you defined satisfy to what you learn then you can cancel anytime don’t are no fun no risk here I just want to bring you the best the most affordable and the best experience in learning RS development now with these courses we offer to teach you the whole catalog of our classes but often these courses are offered two hundred dollars or even more each cost but I think I think that a better way for you to learn there’s a better more affordable way for you to learn to continue this journey to consistently learn new skills so I don’t thing at two hundred dollars each course is the best way for you to do this I think there’s a better way I think that there’s a more affordable education for you because I want you to commit to learning I want you to continue consistently learn new things I want you to be able to access to mentors I want you to be able to learn the best knowledge and skills in a very strategic curricular so that’s why when you enroll in developer you can be online monthly today it’s just $27 a month just $27 a month $27 a month and you can access to all of our courses you can access to all of these current courses and future courses and again we will roll out new courses for you every month every week and you can access me as your mentor but before you click the button right down below can I do one more thing for you

and actually two more things and give you two some bonuses first I want to give you access to our private Facebook group here we have been building a community of students very common that learners just like you so this is the best chance for you to partner with other students with other developers so that you guys can partner together build best apps out there and this really is priceless there’s never there’s no better place for you to partner with someone with the same mindset just like you and have success together so I want to give you private space access to our private Facebook group and this is really priceless to me but again I want you to be able to access to me as your mentor to ask me anything so that’s why as you are subscriber I will want you to ask me any question forum and this one easily recharge Austen’s $5,000 a year to access to me to to learn new things and to ask any questions but because this is this has to be the best learning experience for you so I want you to be able to access to me anytime to ask me any questions so click the button right down below and I tell you over the outside this is your tab this is the time you decide to learn the best technologies learn the best skills be the best apps this is the time for you to commit to learning and know that you are so committed to learning so this is time for you to have the best learning experience to be able to be we will ask that beautifully designed and implement real early so click the button right down below enrolling in developers Academy monthly today and I see you on the other side