You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by ti...@apache.org on 2013/09/11 23:21:08 UTC
[2/2] spec commit: [CB-4488] - refactored manual capture test
[CB-4488] - refactored manual capture test
Project: http://git-wip-us.apache.org/repos/asf/cordova-mobile-spec/repo
Commit: http://git-wip-us.apache.org/repos/asf/cordova-mobile-spec/commit/9f8ca3e9
Tree: http://git-wip-us.apache.org/repos/asf/cordova-mobile-spec/tree/9f8ca3e9
Diff: http://git-wip-us.apache.org/repos/asf/cordova-mobile-spec/diff/9f8ca3e9
Branch: refs/heads/master
Commit: 9f8ca3e9e6ba8afb2f59fcb09055b49a999f54ca
Parents: bf27227
Author: timkim <ti...@apche.org>
Authored: Wed Sep 11 14:19:31 2013 -0700
Committer: timkim <ti...@apche.org>
Committed: Wed Sep 11 14:19:31 2013 -0700
----------------------------------------------------------------------
capture/index.html | 361 +++++++-----------------------------------------
1 file changed, 52 insertions(+), 309 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cordova-mobile-spec/blob/9f8ca3e9/capture/index.html
----------------------------------------------------------------------
diff --git a/capture/index.html b/capture/index.html
index 309de1a..ef4b0e2 100644
--- a/capture/index.html
+++ b/capture/index.html
@@ -34,12 +34,7 @@
var deviceReady = false;
var platformId = cordova.require('cordova/platform').id;
- var pictureUrl = null;
- var fileObj = null;
- var fileEntry = null;
var pageStartTime = +new Date();
- var capture = navigator.device.capture;
-
//-------------------------------------------------------------------------
// Camera
@@ -51,15 +46,10 @@
}
function captureAudioWin(mediaFiles){
- /*
- var i, path, len;
- for (i = 0, len = mediaFiles.length; i < len; i += 1) {
- path = mediaFiles[i].fullPath;
- // do something interesting with the file
- }
- */
- var m = new Media(mediaFiles[i].fullPath);
- m.play();
+ var path = mediaFiles[0].fullPath;
+ log('Audio captured: ' + path);
+ var m = new Media(path);
+ m.play();
}
function captureAudioFail(e){
@@ -69,281 +59,56 @@
function getAudio(){
clearStatus();
var options = { limit: 1, duration: 10};
- capture.captureAudio(captureAudioWin, captureAudioFail, options);
-
+ navigator.device.capture.captureAudio(captureAudioWin, captureAudioFail, options);
}
- function clearStatus() {
- document.getElementById('camera_status').innerHTML = '';
- document.getElementById('camera_image').src = 'about:blank';
- var canvas = document.getElementById('canvas');
- canvas.width = canvas.height = 1;
- pictureUrl = null;
- fileObj = null;
- fileEntry = null;
+ function captureImageWin(mediaFiles){
+ var path = mediaFiles[0].fullPath;
+ log('Image captured: ' + path);
+ document.getElementById('camera_image').src = path;
}
-
- function setPicture(url, callback) {
- try {
- window.atob(url);
- // if we got here it is a base64 string (DATA_URL)
- url = "data:image/jpeg;base64," + url;
- } catch (e) {
- // not DATA_URL
- log('URL: ' + url.slice(0, 100));
- }
- pictureUrl = url;
- var img = document.getElementById('camera_image');
- var startTime = new Date();
- img.src = url;
- img.onloadend = function() {
- log('Image tag load time: ' + (new Date() - startTime));
- callback && callback();
- };
- }
-
- function onGetPictureError(e) {
- log('Error getting picture: ' + e.code);
+ function captureImageFail(e){
+ log('Error getting image: ' + e.code);
}
-
- function getPictureWin(data) {
- setPicture(data);
- // TODO: Fix resolveLocalFileSystemURI to work with native-uri.
- if (pictureUrl.indexOf('file:') == 0) {
- resolveLocalFileSystemURI(data, function(e) {
- fileEntry = e;
- logCallback('resolveLocalFileSystemURI()', true)(e);
- }, logCallback('resolveLocalFileSystemURI()', false));
- } else if (pictureUrl.indexOf('data:image/jpeg;base64' == 0)) {
- // do nothing
- } else {
- var path = pictureUrl.replace(/^file:\/\/(localhost)?/, '').replace(/%20/g, ' ');
- fileEntry = new FileEntry('image_name.png', path);
- }
- }
-
- function getPicture() {
+
+ function getImage(){
clearStatus();
- var options = extractOptions();
- log('Getting picture with options: ' + JSON.stringify(options));
- var popoverHandle = navigator.camera.getPicture(getPictureWin, onGetPictureError, options);
-
- // Reposition the popover if the orientation changes.
- window.onorientationchange = function() {
- var newPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, 0);
- popoverHandle.setPosition(newPopoverOptions);
- }
- }
-
- function uploadImage() {
- 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) {
- log('progress: ' + progressEvent.loaded + ' of ' + progressEvent.total);
- };
- var server = "http://cordova-filetransfer.jitsu.com";
-
- ft.upload(pictureUrl, server + '/upload', win, fail, options);
- function win(information_back){
- log('upload complete');
- }
- function fail(message) {
- log('upload failed: ' + JSON.stringify(message));
- }
- }
-
- function logCallback(apiName, success) {
- return function() {
- log('Call to ' + apiName + (success ? ' success: ' : ' failed: ') + JSON.stringify([].slice.call(arguments)));
- };
+ var options = { limit: 1 };
+ navigator.device.capture.captureImage(captureImageWin, captureImageFail, options);
+ }
+
+ function captureVideoWin(mediaFiles){
+ var path = mediaFiles[0].fullPath;
+ log('Video captured: ' + path);
+
+ // need to inject the video element into the html
+ // doesn't seem to work if you have a pre-existing video element and
+ // add in a source tag
+ var vid = document.createElement('video');
+ vid.id="theVideo";
+ vid.width = "320";
+ vid.height= "240";
+ var source_vid = document.createElement('source');
+ source_vid.id = "theSource";
+ source_vid.src = path;
+ vid.appendChild(source_vid);
+ document.getElementById('video_container').appendChild(vid);
}
-
- /**
- * Select image from library using a NATIVE_URI destination type
- * This calls FileEntry.getMetadata, FileEntry.setMetadata, FileEntry.getParent, FileEntry.file, and FileReader.readAsDataURL.
- */
- function readFile() {
- function onFileReadAsDataURL(evt) {
- var img = document.getElementById('camera_image');
- img.style.visibility = "visible";
- img.style.display = "block";
- img.src = evt.target.result;
- log("FileReader.readAsDataURL success");
- };
-
- function onFileReceived(file) {
- log('Got file: ' + JSON.stringify(file));
- fileObj = file;
-
- var reader = new FileReader();
- reader.onload = function() {
- log('FileReader.readAsDataURL() - length = ' + reader.result.length);
- };
- reader.onerror = logCallback('FileReader.readAsDataURL', false);
- reader.readAsDataURL(file);
- };
- // Test out onFileReceived when the file object was set via a native <input> elements.
- if (fileObj) {
- onFileReceived(fileObj);
- } else {
- fileEntry.file(onFileReceived, logCallback('FileEntry.file', false));
- }
+
+ function captureVideoFail(e){
+ log('Error getting video: ' + e.code);
}
- function getFileInfo() {
- // Test FileEntry API here.
- fileEntry.getMetadata(logCallback('FileEntry.getMetadata', true), logCallback('FileEntry.getMetadata', false));
- fileEntry.setMetadata(logCallback('FileEntry.setMetadata', true), logCallback('FileEntry.setMetadata', false), { "com.apple.MobileBackup": 1 });
- fileEntry.getParent(logCallback('FileEntry.getParent', true), logCallback('FileEntry.getParent', false));
- fileEntry.getParent(logCallback('FileEntry.getParent', true), logCallback('FileEntry.getParent', false));
- };
-
- /**
- * Copy image from library using a NATIVE_URI destination type
- * This calls FileEntry.copyTo and FileEntry.moveTo.
- */
- function copyImage() {
- var onFileSystemReceived = function(fileSystem) {
- var destDirEntry = fileSystem.root;
-
- // Test FileEntry API here.
- fileEntry.copyTo(destDirEntry, 'copied_file.png', logCallback('FileEntry.copyTo', true), logCallback('FileEntry.copyTo', false));
- fileEntry.moveTo(destDirEntry, 'moved_file.png', logCallback('FileEntry.moveTo', true), logCallback('FileEntry.moveTo', false));
- };
-
- 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 writeImage() {
- var onFileWriterReceived = function(fileWriter) {
- fileWriter.onwrite = logCallback('FileWriter.write', true);
- fileWriter.onerror = logCallback('FileWriter.write', false);
- fileWriter.write("some text!");
- };
-
- var onFileTruncateWriterReceived = function(fileWriter) {
- fileWriter.onwrite = logCallback('FileWriter.truncate', true);
- fileWriter.onerror = logCallback('FileWriter.truncate', false);
- fileWriter.truncate(10);
- };
-
- fileEntry.createWriter(onFileWriterReceived, logCallback('FileEntry.createWriter', false));
- fileEntry.createWriter(onFileTruncateWriterReceived, null);
- };
-
- function displayImageUsingCanvas() {
- var canvas = document.getElementById('canvas');
- var img = document.getElementById('camera_image');
- var w = img.width;
- var h = img.height;
- h = 100 / w * h;
- w = 100;
- canvas.width = w;
- canvas.height= h;
- var context = canvas.getContext('2d');
- context.drawImage(img, 0, 0, w, h);
- };
-
- /**
- * Remove image from library using a NATIVE_URI destination type
- * This calls FileEntry.remove.
- */
- function removeImage() {
- fileEntry.remove(logCallback('FileEntry.remove', true), logCallback('FileEntry.remove', false));
- };
-
- function testInputTag(inputEl) {
+
+ function getVideo(){
clearStatus();
- // 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;
- }
- fileObj = inputEl.files[0];
- if (!fileObj) {
- alert('Got value but no file.');
- return;
- }
- var URLApi = window.URL || window.webkitURL;
- if (URLApi) {
- var blobURL = URLApi.createObjectURL(fileObj);
- if (blobURL) {
- setPicture(blobURL, function() {
- URLApi.revokeObjectURL(blobURL);
- });
- } else {
- log('URL.createObjectURL returned null');
- }
- } else {
- log('URL.createObjectURL() not supported.');
- }
+ var options = { limit: 1, duration: 10 };
+ navigator.device.capture.captureVideo(captureVideoWin, captureVideoFail, options);
}
-
- function extractOptions() {
- var els = document.querySelectorAll('#image-options select');
- var ret = {};
- for (var i = 0, el; el = els[i]; ++i) {
- var value = el.value;
- if (value === '') continue;
- if (el.isBool) {
- ret[el.keyName] = !!+value;
- } else {
- ret[el.keyName] = +value;
- }
- }
- return ret;
- }
-
- function createOptionsEl(name, values, selectionDefault) {
- var container = document.createElement('div');
- container.style.display = 'inline-block';
- container.appendChild(document.createTextNode(name + ': '));
- var select = document.createElement('select');
- select.keyName = name;
- container.appendChild(select);
-
- // if we didn't get a default value, insert the blank <default> entry
- if (selectionDefault == undefined) {
- var opt = document.createElement('option');
- opt.value = '';
- opt.text = '<default>';
- select.appendChild(opt);
- }
-
- select.isBool = typeof values == 'boolean';
- if (select.isBool) {
- values = {'true': 1, 'false': 0};
- }
-
- for (var k in values) {
- var opt = document.createElement('option');
- opt.value = values[k];
- opt.textContent = k;
- if (selectionDefault) {
- if (selectionDefault[0] == k) {
- opt.selected = true;
- }
- }
- select.appendChild(opt);
- }
- var optionsDiv = document.getElementById('image-options');
- optionsDiv.appendChild(container);
+
+ function clearStatus() {
+ document.getElementById('camera_status').innerHTML = '';
+ document.getElementById('camera_image').src = 'about:blank';
}
/**
@@ -353,18 +118,6 @@
document.addEventListener("deviceready", function() {
deviceReady = true;
console.log("Device="+device.platform+" "+device.version);
- createOptionsEl('sourceType', Camera.PictureSourceType, camPictureSourceTypeDefault);
- createOptionsEl('destinationType', Camera.DestinationType, camDestinationTypeDefault);
- createOptionsEl('encodingType', Camera.EncodingType, camEncodingTypeDefault);
- createOptionsEl('mediaType', Camera.MediaType, camMediaTypeDefault);
- createOptionsEl('quality', {'0': 0, '50': 50, '80': 80, '100': 100}, camQualityDefault);
- createOptionsEl('targetWidth', {'50': 50, '200': 200, '800': 800, '2048': 2048});
- createOptionsEl('targetHeight', {'50': 50, '200': 200, '800': 800, '2048': 2048});
- createOptionsEl('allowEdit', true, camAllowEditDefault);
- createOptionsEl('correctOrientation', true, camCorrectOrientationDefault);
- createOptionsEl('saveToPhotoAlbum', true, camSaveToPhotoAlbumDefault);
- createOptionsEl('cameraDirection', Camera.Direction);
-
}, false);
window.setTimeout(function() {
if (!deviceReady) {
@@ -372,36 +125,26 @@
}
},1000);
};
-
+
</script>
</head>
<body onload="init();" id="stage" class="theme">
- <h1>Camera</h1>
+ <h1>Capture</h1>
<div id="info" style="white-space: pre-wrap">
<b>Status:</b> <div id="camera_status"></div>
img: <img width="100" id="camera_image">
- canvas: <canvas id="canvas" width="1" height="1"></canvas>
+ video: <div id="video_container"></div>
</div>
+
<h2>Cordova Capture API</h2>
<div id="image-options"></div>
- <div class="btn large" onclick="getPicture();">camera.getPicture()</div>
- <h2>Native File Inputs</h2>
- <div>input type=file <input type="file" onchange="testInputTag(this)"></div>
- <div>capture=camera <input type="file" accept="image/*;capture=camera" onchange="testInputTag(this)"></div>
- <div>capture=camcorder <input type="file" accept="video/*;capture=camcorder" onchange="testInputTag(this)"></div>
- <div>capture=microphone <input type="file" accept="audio/*;capture=microphone" onchange="testInputTag(this)"></div>
+
<h2>Actions</h2>
- <div class="btn large" onclick="getFileInfo();">Get File Metadata</div>
- <div class="btn large" onclick="readFile();">Read with FileReader</div>
- <div class="btn large" onclick="copyImage();">Copy Image</div>
- <div class="btn large" onclick="writeImage();">Write Image</div>
- <div class="btn large" onclick="uploadImage();">Upload Image</div>
- <div class="btn large" onclick="displayImageUsingCanvas();">Draw Using Canvas</div>
- <div class="btn large" onclick="removeImage();">Remove Image</div>
-
- <div class="btn large" onclick="getAudio();">Capture and play audio</div>
+ <div class="btn large" onclick="getAudio();">Capture 10 secs of audio and play</div>
+ <div class="btn large" onclick="getImage();">Capture 1 image</div>
+ <div class="btn large" onclick="getVideo();">Capture 10 secs of video</div>
<h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
</body>
</html>