.
How To: Create Cordova App with Camera Plug In
.
This example demonstrates how cordova-cli can be used to create a mobile app project with the camera plugin and run it for Android or iOS platform. In particular, platform specific options like --keystore (Android) can be provided as well.If you haven't installed Cordova CLI to your pc, follow this tutorial first, http://programming-steps.blogspot.com/2017/05/how-to-install-cordova-and-create-app.html
1) Create Android/iOS Project
Console Command (Android):
# Create a cordova project
cordova create myApp com.myCompany.myApp myApp
cd myApp
# Add camera plugin to the project and remember that in config.xml
cordova plugin add cordova-plugin-camera --save
# Add camera plugin to the project and remember that in config.xml. Use npm install to fetch.
cordova plugin add cordova-plugin-camera --save --fetch
# Add android platform to the project and remember that in config.xml
cordova platform add android --save
# Add android platform to the project and remember that in config.xml. Use npm install to fetch.
cordova platform add android --save --fetch
# Check to see if your system is configured for building android platform.
cordova requirements android
# Build the android and emit verbose logs.
cordova build android --verbose
# Run the project on the android platform.
cordova run android
# Build for android platform in release mode with specified signing parameters.
cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey
|
.
Console Command (iOS):
# Create a cordova project
cordova create myApp com.myCompany.myApp myApp
cd myApp
# Add camera plugin to the project and remember that in config.xml
cordova plugin add cordova-plugin-camera --save
# Add camera plugin to the project and remember that in config.xml. Use npm install to fetch.
cordova plugin add cordova-plugin-camera --save --fetch
# Add ios platform to the project and remember that in config.xml
cordova platform add ios --save
# Add ios platform to the project and remember that in config.xml. Use npm install to fetch.
cordova platform add ios --save --fetch
# Check to see if your system is configured for building ios platform.
cordova requirements ios
# Build the ios and emit verbose logs.
cordova build ios --verbose
# Run the project on the ios platform.
cordova run ios
|
.
Both Android and iOS platform commands above will create the following config.html:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myCompany.myApp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>myApp</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="^6.2.3" />
<engine name="ios" spec="^4.4.0" />
<plugin name="cordova-plugin-camera" spec="^2.4.1" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
</widget>
|
.
2) Edit Index
Replace the index.html content with the following codes:
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64-encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<br/>
<br/>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
|
.
3. Build Android/iOS Project
Console Command (Android):
# Build the android and emit verbose logs.
cordova build android --verbose
# Run the project on the android platform.
cordova run android
# Build for android platform in release mode with specified signing parameters.
cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey
|
.
Console Command (iOS):
# Build the ios and emit verbose logs.
cordova build ios --verbose
# Run the project on the ios platform.
cordova run ios
|
OUTCOME:
.
Reference:
http://cordova.apache.org/docs/en/7.x/reference/cordova-cli/index.html#examples
http://cordova.apache.org/docs/en/7.x/reference/cordova-plugin-camera/index.html
.
No comments:
Post a Comment