blob: 82e0a3c8cdbd8f070611be41468f1a0641308c38 [file] [log] [blame]
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,maximum-scale=1.0,initial-scale=1.0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!-- ISO-8859-1 -->
<title>Cordova Mobile Spec</title>
<link rel="stylesheet" href="../master.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="../cordova.js"></script>
<script type="text/javascript" charset="utf-8">
var deviceReady = false;
var platformId = cordova.require('cordova/platform').id;
var CameraPopoverOptions = cordova.require('cordova/plugin/CameraPopoverOptions');
//-------------------------------------------------------------------------
// Camera
//-------------------------------------------------------------------------
var onGetPictureError = function(e) {
console.log("Error getting picture: " + e.code);
document.getElementById('camera_status').innerHTML += "<b>Error</b> getting picture: " + e.code + "<br />";
};
function showPicture(url, callback) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = url;
img.onloadend = callback;
};
function getPictureFail(e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
}
function getPictureWin(data) {
showPicture(data);
document.getElementById('camera_status').innerHTML = "Success";
}
/**
* Capture picture
*/
function getPicture() {
clearStatus();
navigator.camera.getPicture(getPictureWin, getPictureFail,
{ quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA });
}
function uploadImage(srcUrl) {
var ft = new FileTransfer(),
uploadcomplete=0,
progress = 0,
options = new FileUploadOptions();
options.fileKey="photo";
options.fileName='test.jpg';
options.mimeType="image/jpeg";
ft.onprogress = function(progressEvent) {
console.log('progress: ' + progressEvent.loaded + ' of ' + progressEvent.total);
};
var server = "http://cordova-filetransfer.jitsu.com";
ft.upload(srcUrl, server + '/upload', uploadedProfilePicture, function(message) { console.log("error: " + JSON.stringify(message)); }, options);
function uploadedProfilePicture(information_back){
console.log('win!');
}
}
/**
* Select image from library using a FILE_URI destination type
*/
function getImageUsingFileUri(upload) {
clearStatus();
var popoverHandle = navigator.camera.getPicture(
function(data) {
getPictureWin(data);
if (upload) {
uploadImage(data);
}
}, getPictureFail,
{ destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY});
// Reposition the popover if the orientation changes.
window.onorientationchange = function() {
var newPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, 0);
popoverHandle.setPosition(newPopoverOptions);
}
};
/**
* Select image from library using a NATIVE_URI destination type
* This calls FileEntry.getMetadata, FileEntry.setMetadata, FileEntry.getParent, FileEntry.file, and FileReader.readAsDataURL.
*/
function getImageUsingNativeUri() {
var onMetadataReceived = function(metadata) {
document.getElementById('camera_status').innerHTML += "FileEntry.getMetadata <b>success</b>: modificationTime = " + metadata.modificationTime + "<br />";
};
var onGetMetadataError = function(e) {
handleUnexpectedError("FileEntry.getMetadata", e.code);
};
var onMetadataSet = function() {
handleUnexpectedSuccess("FileEntry.setMetadata");
};
var onSetMetadataError = function(e) {
checkForExpectedError("FileEntry.setMetadata", undefined, e.code);
};
var onParentReceived = function() {
if (platformId == 'ios') {
handleUnexpectedSuccess("FileEntry.getParent");
} else if (platformId == 'android') {
document.getElementById('camera_status').innerHTML += "FileEntry.getParent <b>success</b><br />"
}
};
var onGetParentError = function(e) {
if (platformId == 'ios') {
checkForExpectedError("FileEntry.getParent", FileError.NOT_READABLE_ERR, e.code);
} else if (platformId == 'android') {
handleUnexpectedError("FileEntry.getParent", e.code);
}
};
var onFileReadAsDataURL = function(evt) {
var img = document.getElementById('camera_image');
img.style.visibility = "visible";
img.style.display = "block";
img.src = evt.target.result;
document.getElementById('camera_status').innerHTML += "FileReader.readAsDataURL <b>success</b><br />"
};
var onFileReceived = function(file) {
document.getElementById('camera_status').innerHTML += "FileEntry.file <b>success</b>: fullPath = " + file.fullPath + "; name = " + file.name;
document.getElementById('camera_status').innerHTML += "; type = " + file.type + "; size = " + file.size + "; date = " + file.lastModifiedDate + "<br />";
// Test File API here.
var dataUrlReader = new FileReader();
dataUrlReader.onload = onFileReadAsDataURL;
dataUrlReader.onerror = function(evt) {
onError(evt.target.error);
};
dataUrlReader.readAsDataURL(file);
};
var onGetFileError = function(e) {
handleUnexpectedError("FileEntry.file", e.code);
};
clearStatus();
navigator.camera.getPicture(
function(data) {
var fileEntry = new FileEntry('image_name.png', data);
// Test FileEntry API here.
fileEntry.getMetadata(onMetadataReceived, onGetMetadataError);
fileEntry.setMetadata(onMetadataSet, onSetMetadataError, { "com.apple.MobileBackup": 1 });
fileEntry.getParent(onParentReceived, onGetParentError);
fileEntry.file(onFileReceived, onGetFileError);
},
onGetPictureError,
{ destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
};
/**
* Copy image from library using a NATIVE_URI destination type
* This calls FileEntry.copyTo and FileEntry.moveTo.
*/
function copyImageUsingNativeUri() {
var onFileCopied = function(fileEntry) {
document.getElementById('camera_status').innerHTML += "FileEntry.copyTo <b>success</b><br />";
};
var onFileCopyError = function(e) {
handleUnexpectedError("FileEntry.copyTo", e.code);
};
var onFileMoved = function(fileEntry) {
if (platformId == 'ios') {
handleUnexpectedSuccess("FileEntry.moveTo");
} else if (platformId == 'android') {
document.getElementById('camera_status').innerHTML += "FileEntry.moveTo <b>success</b><br />";
}
};
var onFileMoveError = function(e) {
if (platformId == 'ios') {
checkForExpectedError("FileEntry.moveTo", FileError.INVALID_MODIFICATION_ERR, e.code);
} else if (platformId == 'android') {
handleUnexpectedError("FileEntry.moveTo", e.code);
}
};
var onFileSystemReceived = function(fileSystem) {
navigator.camera.getPicture(
function(data) {
var fileEntry = new FileEntry('image_name.png', data);
var destDirEntry = fileSystem.root;
// Test FileEntry API here.
fileEntry.copyTo(destDirEntry, 'copied_file.png', onFileCopied, onFileCopyError);
fileEntry.moveTo(destDirEntry, 'moved_file.png', onFileMoved, onFileMoveError);
},
onGetPictureError,
{ destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
};
clearStatus();
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, onFileSystemReceived, null);
};
/**
* Write image to library using a NATIVE_URI destination type
* This calls FileEntry.createWriter, FileWriter.write, and FileWriter.truncate.
*/
function writeImageUsingNativeUri() {
var onFileWrite = function(evt) {
handleUnexpectedSuccess("FileWriter.write");
};
var onFileWriteError = function(evt) {
checkForExpectedError("FileWriter.write", FileError.NO_MODIFICATION_ALLOWED_ERR, evt.target.error.code);
};
var onFileTruncate = function(evt) {
handleUnexpectedSuccess("FileWriter.truncate");
};
var onFileTruncateError = function(evt) {
checkForExpectedError("FileWriter.truncate", FileError.NO_MODIFICATION_ALLOWED_ERR, evt.target.error.code);
};
var onFileWriterReceived = function(fileWriter) {
fileWriter.onwrite = onFileWrite;
fileWriter.onerror = onFileWriteError;
fileWriter.write("some text!");
};
var onFileTruncateWriterReceived = function(fileWriter) {
fileWriter.onwrite = onFileTruncate;
fileWriter.onerror = onFileTruncateError;
fileWriter.truncate(10);
};
var onCreateWriterError = function(e) {
handleUnexpectedError("FileEntry.createWriter", e.code);
};
clearStatus();
navigator.camera.getPicture(
function(data) {
var fileEntry = new FileEntry('image_name.png', data);
// Test FileEntry API here.
fileEntry.createWriter(onFileWriterReceived, onCreateWriterError);
fileEntry.createWriter(onFileTruncateWriterReceived, onCreateWriterError);
},
onGetPictureError,
{ destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
};
/**
* Upload image from library using a NATIVE_URI destination type
* This calls FileTransfer.upload.
*/
function uploadImageUsingNativeUri() {
var onFileUploaded = function(response) {
document.getElementById('camera_status').innerHTML += "FileTransfer.upload <b>success</b>: response = " + response.responseCode + ".<br />";
};
var onFileUploadError = function(error) {
document.getElementById('camera_status').innerHTML += "FileTransfer.upload <b>error</b> (code: " + error.code + ").<br />";
};
clearStatus();
navigator.camera.getPicture(
function(data) {
var options = new FileUploadOptions();
options.fileName = "image.png";
options.mimeType = "image/png";
var fileTransfer = new FileTransfer();
fileTransfer.upload(data, "http://cordova-filetransfer.jitsu.com/upload", onFileUploaded, onFileUploadError, options);
},
onGetPictureError,
{ destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
};
/**
* Display image from library using a NATIVE_URI destination type
* This uses img and canvas tags.
*/
function displayImageUsingNativeUri() {
clearStatus();
navigator.camera.getPicture(
function(data) {
// First, we display the image using the img tag.
document.getElementById('camera_status').innerHTML += "img tag: <img src=\"" + data + "\" /><br />";
// Next, the canvas tag.
document.getElementById('camera_status').innerHTML += "canvas tag: <canvas id=\"nativeUriCanvas\" width=\"300\" height=\"300\"></canvas>";
var canvas = document.getElementById('nativeUriCanvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
context.drawImage(image, 0, 0);
};
image.src = data;
},
onGetPictureError,
{ destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
};
/**
* Remove image from library using a NATIVE_URI destination type
* This calls FileEntry.remove.
*/
function removeImageUsingNativeUri() {
var onFileEntryRemoved = function() {
if (platformId == 'ios') {
handleUnexpectedSuccess("FileEntry.remove");
} else if (platformId == 'android') {
document.getElementById('camera_status').innerHTML += "FileEntry.remove <b>success</b><br />"
}
};
var onFileEntryRemoveError = function(e) {
if (platformId == 'ios') {
checkForExpectedError("FileEntry.remove", FileError.INVALID_MODIFICATION_ERR, e.code);
} else if (platformId == 'android') {
handleUnexpectedError("FileEntry.remove", e.code);
}
};
clearStatus();
navigator.camera.getPicture(
function(data) {
var fileEntry = new FileEntry('image_name.png', data);
// Test FileEntry API here.
fileEntry.remove(onFileEntryRemoved, onFileEntryRemoveError);
},
onGetPictureError,
{ destinationType: Camera.DestinationType.NATIVE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY });
};
function testNativeFile(inputEl) {
// iOS 6 likes to dead-lock in the onchange context if you
// do any alerts or try to remote-debug.
window.setTimeout(function() {
testNativeFile2(inputEl);
}, 0);
};
function testNativeFile2(inputEl) {
if (!inputEl.value) {
alert('No file selected.');
return;
}
var file = inputEl.files[0];
if (!file) {
alert('Got value but no file.');
return;
}
var URLApi = window.URL || window.webkitURL;
var statusText = '';
if (URLApi) {
var blobURL = URLApi.createObjectURL(file);
if (blobURL) {
showPicture(blobURL, function() {
URLApi.revokeObjectURL(blobURL);
});
} else {
statusText = 'URL.createObjectURL returned null';
}
} else {
statusText = 'URL.createObjectURL() not supported.';
}
document.getElementById('camera_status').innerHTML = statusText;
var reader = new FileReader();
reader.onloadend = function() {
if (!reader.result) {
statusText += ' FileReader.readAsDataURL() failed';
} else {
statusText += ' DataURL size: ' + reader.result.length;
}
document.getElementById('camera_status').innerHTML = statusText;
};
reader.readAsDataURL(file);
};
function handleUnexpectedError(methodName, errorCode) {
document.getElementById('camera_status').innerHTML += "" + methodName + " <b>error</b> (code: " + errorCode + ").<br />";
};
function handleUnexpectedSuccess(methodName) {
document.getElementById('camera_status').innerHTML += "" + methodName + " <b>failure</b> (succeeded when it should fail).<br />";
};
function checkForExpectedError(methodName, expectedErrorCode, actualErrorCode) {
if (actualErrorCode == expectedErrorCode) {
document.getElementById('camera_status').innerHTML += "" + methodName + " <b>success</b> (failed as expected, with error code " + actualErrorCode + ").<br />";
} else {
document.getElementById('camera_status').innerHTML += "" + methodName + " <b>failure</b> (failed as expected, but with error code " + actualErrorCode + " instead of " + expectedErrorCode + ").<br />";
}
};
function clearStatus() {
document.getElementById('camera_status').innerHTML = "";
document.getElementById('camera_image').style.visibility = "hidden";
};
/**
* Function called when page has finished loading.
*/
function init() {
document.addEventListener("deviceready", function() {
deviceReady = true;
console.log("Device="+device.platform+" "+device.version);
}, false);
window.setTimeout(function() {
if (!deviceReady) {
alert("Error: Apache Cordova did not initialize. Demo will not run correctly.");
}
},1000);
};
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h1>Camera</h1>
<div id="info">
<b>Status:</b> <span id="camera_status"></span><br>
<img style="width:120px;height:120px;visibility:hidden;display:none;" id="camera_image" src="" />
</div>
<h2>Action</h2>
<div class="btn large" onclick="getPicture();">Take Picture</div>
<div class="btn large" onclick="getImageUsingFileUri();">Select Image Using File URI</div>
<h2>Native URI</h2>
<div class="btn large" onclick="getImageUsingNativeUri();">Select Image</div>
<div class="btn large" onclick="copyImageUsingNativeUri();">Copy Image</div>
<div class="btn large" onclick="writeImageUsingNativeUri();">Write Image</div>
<div class="btn large" onclick="uploadImageUsingNativeUri();">Upload Image</div>
<div class="btn large" onclick="displayImageUsingNativeUri();">Display Image</div>
<div class="btn large" onclick="removeImageUsingNativeUri();">Remove Image</div>
<h3>input type=file</h3>
<input type="file" onchange="testNativeFile(this)">
<h3>capture=camera</h3>
<input type="file" accept="image/*;capture=camera" onchange="testNativeFile(this)">
<h3>capture=camcorder</h3>
<input type="file" accept="video/*;capture=camcorder" onchange="testNativeFile(this)">
<h3>capture=microphone</h3>
<input type="file" accept="audio/*;capture=microphone" onchange="testNativeFile(this)">
<h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
</body>
</html>