SnapChat-Like Camera! (Part 1 : Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

hey what's going on everybody today I'm
going to show you how to do a snapchat
light camera with Swift and Xcode now I
recently showed how to do a snapchat
like menu so you want to actually
download that project if you want to
follow along with this tutorial properly
but you still can't follow this and just
add the view and whatnot onto your
normal scene but either way let's get
right into it now as you can see my
screen loaded up I had my first screen
here my second screen is right here and
that has my camera like so alright so
first thing I'm going to do is open up
my snapchat camera project and my
snapchat camera dot Xcode project now
essentially this is just going to be the
snapchat like menu that I created a
while ago and it is created that way so
the view controller holds all of our
scrollview on the way we set that up and
then we have view one view two and view
three and now we can scroll through all
those views but on view too
this is where I want to add the camera
so first thing I'm going to do is open
my view to zip file and then open up
this sidebar right here then I'm just
going to click and drag a view onto my
scene like so make it fill the whole
scene then I'm going to add some
constraints so right-click or control
click and drag from this view over to
the hierarchy view and then we're going
to say then we're going to hold shift
and go center vertically horizontally
bottom space top space Tigh leading
space and trailing space so this
essentially is going to make it
perfectly in line with our view now the
reason I put a UI view on top of this
view that it's already created is
because for some reason if you try to
add this camera onto the view that's
created already with the UI view
controller it will not work properly so
you need to edit this view specifically
now let's open up our assistant editor
right here
and then I'm just going to right click
or control click and drag from this view
over to our view to Swift and I'm just
going to call this my camera view like
so and connect now for some reason it's
not popping up properly so I'm going to
close my assistant editor and head just
straight into my view to dot Swift and
now it shows up properly I don't know
why this is happening it just is and I
can't stop it so now let's actually add
a camera onto the view so first thing we
need to do is say import a V Foundation
and this will give us the ability to
access the camera and then we need to go
right inside of this class and we're
going to add a few more super classes so
this is going to be a UI in
judge picker controller delegate like so
and then comma and then we need a UI
navigation controller delegate like so
so we're just going to go down here and
save our capture session then : AV
capture session like so with a question
mark at the end so now we just created
this capture session so if you want to
read more about it you can always hover
that over that and read more about it
but either way view to dot Swift and
then we're going to create a new
variable and this will be var still
image output so this will be if we want
to take a photo which we will do later
in another tutorial but not right now so
we're going to say still image outputs
and then : AV capture still image output
with a question mark at the end and
lastly we do to save our the preview
layer so this is going to be the layer
that we add on to our view to actually
see the camera itself and this will be
our AV capture video preview layer and
then question mark at the end and now
down here we actually need to create a
new function so I'm just going to
actually delete all this that you see
right here just this green stuff at the
bottom and I'm going to create a new
function and this would be view will
appear so just tab all that in it should
automatically be created and we say
super dot to view will appear and this
will be animated and then animated bool
we're just going to type in animated
like so now down here we are going to
create our capture session so we're
going to say the capture session so this
is going to be this up here we're going
to say this will be equal to an AV
capture session like so and then open
parentheses close parentheses then go
down here and we're going to say capture
session dot session preset will be equal
to AV capture session preset like so so
this is basically saying what kind of
resolution would you like I would like a
1920 by 1080 resolution so I'm just
going to tab all that in like so then
we're going to go down here I'm going to
save our back camera will be equal to
and I'm going to make this equal to an
AV capture device dot default device
with media type and we going to make
this AV media type and then the
we'll be video so the media type that
we're going to try to capture is a video
of our back camera from our back camera
then down here we need to create a
variable to test if there's any air so
we're going to save our air and then :
NS air and then your question mark at
the end and we're going to go down here
and save our input will be equal to and
we're going to make this equal to our AV
capture device input like so then open
parenthesis and it should come up with
device and air so the device we want to
put in there is our back camera like so
and the air we're going to just make
this equal to ampersand error and now
with this air and this input that we
just created we want to make sure that
our air and our input can be put inside
of our view so we're going to go down
here we're going to say if the error is
equal equal to new meaning that there
are no errors and say the capture
session a dot can add input then inside
of this we're just going to put in the
input that we created so we're just
going to put inside of it like that
so if you can do those things then we
want to run these things afterwards so
let's go ahead and say open curly
bracket enter close curly bracket and
inside of this we're going to say
capture session add input right now it's
looking for the input that we want to
put in and load up here we created this
input so I'm just going to put an input
like so so we are putting into this
stuff that we created right here all the
back camera into this capture session
now let's go down here we're going to
say still image output will be equal to
and we're going to make this equal to AV
capture still image output like so open
parenthesis closed parenthesis then
outside of this we're going to say still
image output dot output settings will be
equal to and this will be equal to open
square bracket close bracket and this
will be AV video codec key like so and
then colon and then we're going to say
AV video codec JPEG like so so basically
we just created an array of AV video
codec E and an AV video codec JPEG into
our output settings of our still image
output now you might be wondering why am
I worrying about still image if we're
actually not going to work with that in
this tutorial that's because we need it
to test things later on so we're going
to say if the capture session dot scan
add output so if it can output things
then we want to do things so we're going
to say add the output of our still image
output like so and then open curly
bracket enter close curly bracket so
inside of this if statement I'm going to
say capture session dot dot add output
so since it can do those things we want
to add the output that we just created
so just type in still image output so
now this output we're going to add this
inside of this preview of layer that we
just created so just a preview layer
will be equal to and this is going to be
equal to an a/v capture video preview
layer like so so basically this is going
to be our camera our live camera stream
going into this layer then open for the
season and inside of this we're going to
say session session and then this is
going to be our capture session that we
created like so now let's go down here
we're going to say preview layer dot
video gravity it will be equal to and
this is going to be will be equal to and
this is going to be a V layer video
gravity and then we're going to say
resize aspect so we're going to make our
video resize according to where we are
how our device is oriented and whatnot
so now let's go down here we're going to
say preview layer dot connection dot
video orientation and we're going to
make this equal to AV capture video
orientation portrait so I'm going to
make it equal to a portrait just like
snapchat and now we need to add this
layer onto our view so let's go up here
I called the view that we created camera
view so I'm going to say camera view dot
layer dot add sub layer and we're going
to add the preview layer that we just
created and then down here we can say
okay all of this stuff is set up so I'm
going to say capture session dot start
running like so and lastly this will
actually not work right now so what you
need to go up here and just create a new
function and just say view did appear so
if the view does appear we want to say
super dot view did appear like so
animated we're going to just type in
animated like so then after this we can
say preview layer frame then we're going
to make this equal to our camera view
dot bounds now if you were to build it
since
out of any simulator it would not work
properly so you need to connect your
iPhone or whatever your ipod touch and
build and run it from there now forever
to build and run this we should get at
working all properly now as you can see
my screen loaded up I have my first
screen here my second screen is right
here and that has my camera like so so
as you can see it all works thank you
all so much for watching if you enjoyed
this tutorial you'll be sure to hit that
like button down below and also check
out my second channel with me and my
brother as we discuss certain things
anyway I will see you in the next one