Using the Camera

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

249 notes

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

249 notes

Cours 3 sur 5 dans Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

À partir de la leçon

Accessing Native Capabilities of Devices: Cordova and Ionic Native

In this module you will explore Cordova and the Ionic Native wrappers that enable you to access the native capabilities of the mobile devices. You will use a few plugins in order to understand the general concepts and the patterns for using these plugins within your Ionic application

Using the Camera7:36

Exercise (Video): Using the Camera39:32

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

Most mobile devices these days come equipped with a camera and

also the ability to store photos within in a photo album and

being able to view those photos from the photo album or

capture images and video, using the camera.

So the obvious question that comes about

is can we make use of the camera within our Ionic application?

And indeed, this is where that camera plugin comes to our aid.

The camera plugin allows you to access radius features of your building

camera on your mobile device.

Let's look at some of the details next.

So how do they make use of the camera and what can we use the camera for?

As you would expect the camera can be used for many purposes.

First and foremost to be able to obtain a picture from the camera.

You can also obtain video from the camera.

Also you can go one step further and then make use of your camera for

doing bar code scanning, optical character recognition and many other features.

In this lesson, we will examine how they can make use of camera to capture

a picture from our built in camera on or mobile device.

So to enable us to use the camera, Cordova provides a camera plugin

that enables you to access the built-in camera on the mobile device.

Both the front camera as well as the back camera,

in case your device is equipped with multiple cameras.

And the Cordova camera plugin also enables you

to access the built-in photo library or

the photo gallery on your mobile device in order to pick a picture

from the photo library and make use of it within your application.

To of course,

make use of the camera plugin, you need to install that camera plugin.

We will see the use of the camera plugin in the exercise that follows this lecture.

So we install that cordova-plugin-camera and then the corresponding ionic

wrapper that enables us to access the camera from within our Ionic application.

So once you have access to the camera, the camera plugin also provides you with

many different ways of obtaining data from the camera, and also configured

various aspects about how you can obtain the picture from the camera.

In particular, the image data that can be obtained either from the camera or

from the photo library, can be obtained in the form of a this 60

foot encoded string which can be used inside your JavaScript object.

Or you can configure your camera plugin to return

the string which corresponds to the URI off that

file which contains the image you want to make use of.

So the default is to import the image from the local storage of your device,

and so will return a URI of the file of the storage of the device.

Also, that camera plug-in provides various camera options that you

can configure before you access the camera using a method

called the get picture method' on your camera plug-in.

So the various options that you can make use of include the quality,

which can be specified as a range from 0 to 100,

100 being the highest quality that you can obtain.

The destination, whether you want to store it in

the form of a basics to foreign codex string or

put it into file and then obtain the URL of the file system.

And then or add it to your photo gallery and

to obtain the corresponding reference to the image in the photo gallery.

The source type can be specified as either the camera or

the photo library on your mobile device.

The encoding type, you can either specify it to be either JPEG or PNG file.

You can also specify the target width and

height of the image that should be obtained from your camera.

So that way, you can control how large the size of the file that'll be generated

when you access the image information from either the camera, or

from the photo library.

You can also specify the media type, and

then the correct the orientation of the image.

You can also specify which camera you want to make

use of in case your device equipped with both front and back camera.

You can choose one of those cameras then

obtain the image from that particular camera.

You can also do some rudimentary editing using the simple editing

tools that are available on your mobile device like coping off

the image after it is obtained from the camera before being saved,

either in the form of a basic support string, or onto the file storage.

In the exercise that follows we will see how we can configure some of

these options within our Ionic application and

then access the camera in order to obtain that picture from the camera.

Let me illustrate that to you in an example.

In our Ionic application.

In the next exercise, we're going to configure application to have

a registration form included in the application.

And then this registration form will provide you with an ability to

obtain a picture which when use as your representative picture

when you're registering yourself on the site for our application.

So you can either click on the take picture option and

then access the camera so you can see that you can access the camera and

then obtain information from the camera.

You can capture the image, and then also do some simple editing of the image,

and then make use of the image within the registration form here.

You can also get the image from the library, so from the image gallery.

You can go to the image gallery and then pick the image from the image gallery.

This you will do as part of your assignment.

So where you will be selecting and

image from the photo gallery of your application and

then make use of it within your application.

So, here you see an example of the use of camera.

Similarly, the use of the bar code scanning plug-in or

the QR code scanning plug-in that are available enable you

to scan codes using the built in camera on your mobile device.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play