Click on any phrase to play the video from that point.
[Adobe Developer Connection]
Hi, I'm Adobe Developer Evangelist Kevin Hoyt,
and we've been walking through the PhoneGap APIs.
In this session, we're going to cover how to use the camera
both to take a picture and use that in your application,
but also to choose from a photo gallery of pictures that have already been taken.
Let's jump over to Dreamweaver where all the magic happens,
and here in Dreamweaver, we have an application
as you can see in the live view, it's got a camera title at the top.
It's got a couple buttons at the bottom, one from camera
which is going to actually allow us to launch the camera to take a picture,
and then the other one is from photo gallery,
which is going to let us choose from a photo gallery that's on the device.
This big white space here in the center, what we're going to actually do
is whatever the user chooses, we're going to load that in and put that
in the--in the viewable space there,
and we're actually going to see how CSS3 transforms to rotate it a little bit
and put a bit of a shadow on there with a box shadow.
So, let's take a look at the code here.
I've got a couple style sheets in there to style the application.
I've got the PhoneGap library in there, and I'm going to use jQuery
for the purposes of this demonstration.
We're going to start off with getting our document ready.
So, when the document is--when the document has been created,
the HTML page has been loaded, WebKit's been loaded,
the PhoneGap has established communication back to the native APIs,
and it's found the native code-base foundation
where they'll be able to use that and communicate with it.
It's going to fire off the device-ready event.
So here we're going to go ahead and listen for device ready,
and I'm going to use the word bind, since device ready isn't a standard jQuery event,
and then inside of this, we're going to listen for a click on the button camera,
which is the one--which is a button there to actually launch the camera,
and then there's another one called button gallery,
which we'll use to actually launch the gallery.
Again, I'm going to use bind here instead of click.
The reason I use bind is because I want to use the touch events,
which are going to be more responsive in terms of mobile applications
then the click event will be.
So, we'll go ahead and use bind to go to event that isn't a standard event,
in this case touch start.
By the way, there's also touch move and touch end.
So, now we've started the touch which is essentially going to be--
represent for us a click, and we're going to use this navigator object,
and this navigator object is the--is where the magic PhoneGap
API is going to branch off of.
So, we're going to use navigator.camera.getpicture,
and then if it's successful,
we're going to do one thing.
If it's not successful, we're going to do another,
and then we'll have a pass at some options.
So in this case, if it is--let's come down to the bottom here,
and actually take a look at these options.
This is lines 23 through 27,
and we can see here the destination type.
In this case, camera destination data URL.
What it's going to do is it's going to take the image
that has been captured by the camera, base64 encoded as a string,
and pass that back to me in JavaScript.
Now, it turns out that I can actually use that base64 encoded string
directly in the image tag in my application,
and that's actually how I'll get the image into my application,
and if you wanted to, you can also get the URI that points
to the file on the operating system itself,
and so then you could then put that as the source attribute as well.
Whatever way works for you, or for some cases, for example,
maybe you want to capture the image, but then store it off
someplace else and not actually display it.
Whatever the case may be, you have a couple options there.
From there, you can specify the source type,
and in this case, because we actually want to use the camera to get the picture,
we're going to specify camera.picturesourcetype.camera.
From there, we want to--if we want to allow the user to edit the picture
before they'll actually--we actually suck it back into the application,
we can do that as well.
So, for example, like cropping types of activities or other types
of activities that the operating system allows.
In some cases, operating systems don't allow any editing,
and so that particular property wouldn't actually have any affect,
and then last but not least from the options that we're going to pass in,
we've got a target width and a target height.
Essentially, how do you want the application--how big do you want that
image that comes back to be scaled to
to fit the space in your application, right?
So if you wanted--in this case, we're going to show that main white space
that's going to be filled with a picture.
Maybe you wanted to use a thumbnail of it
for like a list of items you're going to be scrolling through.
Whatever the case may be, here's where you have to
supply the target width and target height to scale it down for you.
So you don't just try to do that in JavaScript.
It'll happen for us, and the other kind of nice thing about this is
that also it works to maintain the aspect ratio of the picture as well.
So those are the options we're going to specify.
The main one there essentially is data URL.
So we're going to get the base64 encoded data off the images taken,
and the fact that we're going to use the camera.
Now, when the picture has been successfully captured,
I'm going to go into this element called .cat,
with a class of capture on it, which is in this case the only thing--
the only element with a class of capture is this image tag,
which is waiting for an image, and then I'll go ahead and
set the source attribute to data:image/jpeg,
which is the mime encoding for a jpeg image.
You can also get P&G images back as well.
Base64 encoded, and then I'm just going to plop that data
that comes back in from the picture taking activity right in there,
and then I'm going to go ahead and set the CSS visibility
for that particular image divisible so we can see it.
If it's a--if an error happens, then we'll go ahead and just say,
"Console log error."
You can also use alerts or update different pieces of text in your application,
and if the user decides that they actually want to press the
gallery buttons, they don't want to actually choose to take a picture right now,
they have a picture they've already taken, and they want to use that,
then we'll watch for the touch start on that or essentially the click.
Navigator.camera.getpicture.
So it's the same method call, but if we come down to the options,
you'll notice there's a little difference here.
We still want to get the data URLs of the actual data of the image that's selected,
but rather than using the camera, we're going to use photo library
as the source, and that's the main tweak that's going to happen here.
Everything else is pretty much the same.
The last attribute here on the options
that we've added is a media type.
So, in this case, we'll see a picture, but you can also potentially pull in a video this way.
So, we're going to use just a picture here,
and we want to actually pull that from the photo library.
Once the user has successfully selected that picture from the photo library,
again, we're going to hit that capture image--
the image with the capture class on it,
set the source to the base64 encoded image data,
and put that into the display,
and then also down here on the capture class,
which is going to be, again, that image,
I have some load functionality.
So whenever the image data actually does get loaded,
it repositions itself to be centered in the screen.
So let's go ahead, drop over to X code here,
and we'll go ahead and launch that in the simulator,
[onscreen changes]
brings up our application.
Looks all pretty, and we click from camera,
and you'll notice nothing happens.
Well, nothing happens in the simulator.
If you look down in the console for an explanation, you'll actually see info error,
which is the information message the console.log message we put out,
and that's because the simulator doesn't support the camera.
So, what we're going to do then is come back into X code,
stop that run, go from our different options here,
and select my ipod touch that I have connected to the machine.
Go ahead and run it on the ipad--ipod touch,
and it's going to build it, drop it over there,
and then we can go ahead and unlock the device for me,
and we can now see our buttons there
from camera or from photo gallery.
So, we'll say, "From camera,"
brings up the camera capture, and so this is my laptop
as you've been watching.
I'll go ahead and take a picture.
Fantastic, use that picture, and wallah!
Our scaled image is placed into the display,
and there's a nice drop shadow on it; it's rotated.
Thank you very much CSS3.
Alternatively, let's say, "From photo gallery."
We can do that as well.
Click on the camera roll.
I've got a couple screen captures here; let's go ahead and--
here's one from my office, let's go ahead and take a picture of my office there.
Pulls that in, puts the image data in there, and, again,
we can see that it's got a nice little transform to it,
nice little drop shadow, again, courtesy of CSS3,
and so those--that's using the camera from PhoneGap on iOS and APIs.
Wherever the camera is available, it will look and function the exact same.
That's really the beauty of PhoneGap is being able to leverage
the same source code across multiple devices.
So, we have a lot more API coverage to go, come back next time.
I'll be waiting.
[Adobe Developer Connection]
