| <!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> |