SnapChat-Like Camera! (Part 2 : 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 take photos
with Swift and Xcode so I've been kind
of doing a series so I have how to do a
snapchat menu I've done how to put a
camera onto the snapchat menu and today
I'm gonna go even further and show you
how to take photos with that so let's go
ahead and get started all right so
here's my app I have the screen right
over here and I have a camera right over
here so as soon as I hit this can I'm
out of screen you can see that it takes
the photo touch the screen again it ends
the photo and I can just keep taking
photos more and more like so alright so
right now I have my project so I
actually have the live view going into
the preview layer but I want to take
this preview layer and grab a still
image from what I'm seeing so I'm going
to head right into my view to nib file
and right inside of here you can see
that I have my nib file that I created
and we just want to add on an image view
onto the scene so let's just go ahead
and click and drag an image view onto
our scene so that it fills the whole
scene so right now it's not filling the
whole scene so just click and drag that
all the way up to the corners and then
we're gonna add some constraints to this
so right click row click and drag from
this UI image view over to the view
right over here and we're going to say
Center vertically horizontally bottom
space top space chair leg space and
leading space and this will just give it
that perfect uiimageview look that we
want and also I'm just gonna make this a
bit bigger real quick now let's go ahead
and open up our assistant editor and we
want to connect our image view that we
just created over to our view to Swift
so let's go right down here and I'm
gonna right click or control click and
drag from this UI image view down to
here and I'm going to insert an outlet
I'm gonna call this my temp image view
so this is basically my temporary image
view you can do things with what you
want afterwards with this image that you
have captured when you take a photo on
snapchat this is exactly what it does it
puts a view right over there's a UI
image view right over your scene and
that allows you to preview it and then
send it off to your friends so I'm gonna
say temporary image view and connect and
I'm going to create a function that says
we did pres take photo so I'm gonna say
func did pres take photo so we did take
photo so we're gonna say func did pres
take photo and then open parentheses
close parentheses open curly bracket
enter close curly bracket then right
inside of here we can say if let the
video connection equal and this will be
a still image output so we're going to
grab this variable that we created
earlier then we're going to say dot
connect connection with media type and
we're going to connect it with the media
type of AV media type and then video so
this is going to be a video that we are
grabbing it from open curly bracket
enter close curly bracket and I'm
actually going to go ahead and close up
the assistant editor so we have we can
see things a bit better so go ahead and
go over to the view to dot Swift and now
you should get a better a view of what's
going on so we have this function that
we created did press take photo so as
soon as this is pressed we want to call
this function and then we could say if
let video connection equals still image
output connection with media type AV
media type video so essentially we are
grabbing a still image from the video
that's going on our scene right now now
let's go down here we're going to say
video connection video orientation will
be equal to an AV capture video
orientation portrait so essentially this
is the snapchat portrait view that we
are going to use then we're gonna say
still image output capture still image
asynchronous from connection so we're
grabbing a still image from our live
video feed that's going on so let's go
ahead and just type in video connection
in this first part now for the
completion handler you can see that it's
C waiting for a cm sample buffer so we
want to create a variable there and an
error so let's just go ahead and it's a
open curly bracket enter close curly
bracket and inside of this we're going
to say open parentheses close
parentheses type in sample buffer like
so and then comma air like so so now we
have our variables that we created off
of what it was expecting then Reena say
in now inside of this we captured this
image data so we're going to apply this
image data into something that's
actually visible to us so we're going to
say if our sample buffer is not equal to
nil meaning that we have a sample buffer
if you want to read more about what if
sample buffer is you can read into it
I'm not going to explain to my
about it so I'm going to say open curly
bracket enter close curly bracket so if
we have a sample buffer then we want to
do this we can save our image data will
be equal to and our gonna make this
equal to an a/v capture still image
output dot jpg still image DNS data
representation and inside of this we're
going to put in sample buffer like so so
we're grabbing from this sample buffer
that we created right here and we're
applying this into a jpg now let's go
down here and we're gonna say VAR data
provider will be equal to and we're
gonna make this equal to a cg data
provider create with CF data and the CF
data where you're going to use is the
image data that we just created so we
created some CF data we're applying that
to our data provider so now we're going
to interpret this into something that a
UI image can interpret so let's go right
down here we're gonna save our cg image
ref will be equal to and we're gonna
make this equal to our cg image create
with with JPEG data provider so the
source of our DCG data is going to be
our data provider decode we're gonna set
this equal to nil our bulb we're gonna
set this to true for the color rendering
we're gonna set this equal to KC G
rendering intent default to no of course
you can do saturation you can do all
these other things but I'm going to set
mine equal to default like so now let's
go ahead and create our image so we're
gonna save our image will be equal to
and we're gonna set this equal to a UI
image open parenthesis and inside of
this we have our cg image our scale and
our orientation like so so let's go
ahead and just double-click or tab all
that in and we're going to set our cg
image equal to our cg image ref
reference that we created now go down
here to our scale we're gonna make this
equal to 1.0 so we want the scale to be
exact and then orientation we're gonna
make this UI image orientation dot right
like so and now we have our whole image
working now this is the image that say
if I was using snapchat I would send
this image off to a friend or whatnot
but I only have this UI image view that
I have so I'm going to set the
equal to the uiimageview so let's go
down here I'm gonna say temporary image
view dot image will be equal to and
we're gonna set this equal to the image
that we just created now down here we're
also gonna say temporary image view dot
hidden we're gonna set this equal to
false meaning as soon as this photo was
taken we want this temporary image view
to not be hidden a more we want it to be
visible to the person using it and also
it's waiting for ourselves so we can say
self dot temporary image view and a self
dot temporary image view like so now
before we call this function did press
take photo we want to deal with a few
other things first so in this case I'm
using touches began but if you have a
button that say you on the first time
you press it you want the image to be
taken but on the second time that you
press it you want your image to
disappear and you want to try taking a
different photo so in this sense I'm
doing this with the touches began you
can of course apply this to a button or
whatever you want but in this case we
want to say function did press take
another so if they do say okay we want
to take another photo then we want to
our image view to be hidden and for
everything to go back to normal and
everything to switch on and off in that
sense so we can say func did press take
another open parentheses close
parentheses open curly bracket enter
close curly bracket and inside of this
we want to create a Tora false statement
so if they have taken the photo then we
want to disappear and if they haven't
then we want to take the photo so we
want to create a variable first and
we're gonna save our did take photo will
be equal to a boolean value like so open
parentheses close parentheses now inside
of did press take another we're going to
say if did take photo is equal equal to
true so if they have taken a photo then
we want to say this then after that if
statement we do just can say else open
curly bracket enter close curly bracket
so inside of the first if statement we
can say temporary image view dots hidden
and we're gonna make this equal to true
so we're going to set the image view to
hidden if they have already taken the
photo and they press the button again
now we can go down here and we can say
did take photo and we're gonna set this
equal to false now now in this else
statement that we created we're gonna
sake
sure session dot start running so we
want this capture session to start
running and we could say did take photo
will be equal to true and then we're
also going to say did press take photo
so we're calling this function right up
here so we're going to take a photo now
and now if we go down here we're gonna
say touches began and inside of this
we're just going to type in did press
take another as this is going to control
everything now let's go ahead and build
and run this on my iPod and we should
get everything to work all right so
here's my app I have the screen right
over here and I have the camera right
over here so as soon as I hit this
camera screen you can see that it takes
the photo touch the screen again it ends
the photo and I can just keep taking
photos more and more like so thank you
all so much for watching if you enjoyed
this tutorial be sure to hit that like
button down below and if you want to see
more tutorials like this for me in the
future be sure to subscribe also a video
will be coming up soon on how to do
video but it is a bit more complicated
and I'm just figuring it out right now
so subscribe to that anyway I will see
you in the next one