PhoneGap Capture Tutorial

The html contains 3 items and a hidden message box for showing the URI of the Audio/Image/Video taken.
Each of the item is tagged with an unique id to identify their type. And this id is used to call the corresponding function to capture the specific media type.

A generic function goCapture is used to perform the common tasks, i.e. calling the function, and display the media file path, time, size etc and display them on screen. With one exception, a switch statement is used to capture the right media type according to the button that is pressed.

e.g. when the Audio button is pressed, the

	"navigator.device.capture.captureAudio" 

is called. Likewise for image and video.

After the above function is called, the file full path, type, last modified date and size will be shown in the div which was previously hidden. We use “css(“display”, “block”)” to unhide the div.

Also to make the error message more meaningful, a short description is associated with the corresponding error code using a errors array.

e.g.

	var errors = {};
	errors[CaptureError.CAPTURE_INTERNAL_ERR]     = 'Camera or microphone failed to capture image or sound.';
	errors[CaptureError.CAPTURE_APPLICATION_BUSY] = 'Camera application or audio capture application is currently serving other capture request.';
	errors[CaptureError.CAPTURE_INVALID_ARGUMENT] = 'Invalid use of the API (e.g. limit parameter has value less than one).';
	errors[CaptureError.CAPTURE_NO_MEDIA_FILES]   = 'User exited camera application or audio capture application before capturing anything.';
	errors[CaptureError.CAPTURE_NOT_SUPPORTED]    = 'The requested capture operation is not supported.';

Source Code:

Javascript

	//*********************************************************    
	// Capture Capabilities
	//*********************************************************
	function updateCaptureStatus(status) {
		$("#captureStatus").html(status);
	}

	function clearDisplayStatus() {
		$("#captureProperties").css("display", "none");
		$("#captureProperties").empty();
		$("#captureStatus").empty();		
	}	

	function goCapture(captureType) {
		$("#captureProperties").append("
Capture - " + captureType + "
"); function captureSuccess(mediaFiles) { var i, len; var mediaDetails = ""; for (i = 0, len=mediaFiles.length; i < len; i++) { mediaDetails += addGridRow("a", boldLabel("File full path:")); mediaDetails += addGridRow("b", textFormat(mediaFiles[i].fullPath)); mediaDetails += addGridRow("a", boldLabel("Type:")); mediaDetails += addGridRow("b", textFormat(mediaFiles[i].type)); mediaDetails += addGridRow("a", boldLabel("Last modified:")); mediaDetails += addGridRow("b", toDateStr(new Date(mediaFiles[i].lastModifiedDate))); mediaDetails += addGridRow("a", boldLabel("Size:")); mediaDetails += addGridRow("b", textFormat(mediaFiles[i].size)); } $("#captureProperties").css("display", "block"); //$("#captureProperties").append(mediaDetails).trigger("create"); $("#captureProperties").html(mediaDetails); updateCaptureStatus("SUCCESS: " + captureType.slice(0,1).toUpperCase() + captureType.slice(1) + " captured"); } function captureError(error) { var errors = {}; errors[CaptureError.CAPTURE_INTERNAL_ERR] = 'Camera or microphone failed to capture image or sound.'; errors[CaptureError.CAPTURE_APPLICATION_BUSY] = 'Camera application or audio capture application is currently serving other capture request.'; errors[CaptureError.CAPTURE_INVALID_ARGUMENT] = 'Invalid use of the API (e.g. limit parameter has value less than one).'; errors[CaptureError.CAPTURE_NO_MEDIA_FILES] = 'User exited camera application or audio capture application before capturing anything.'; errors[CaptureError.CAPTURE_NOT_SUPPORTED] = 'The requested capture operation is not supported.'; var contents = addGridRow("a", boldLabel("ERROR:")); contents += addGridRow("b", errors[error.code]); $("#captureProperties").css("display", "block"); $("#captureProperties").html(contents); updateCaptureStatus("ERROR"); } clearDisplayStatus(); switch(captureType) { case "audio": navigator.device.capture.captureAudio(captureSuccess, captureError); break; case "image": navigator.device.capture.captureImage(captureSuccess, captureError); break; case "video": navigator.device.capture.captureVideo(captureSuccess, captureError); break; } } function getCaptureReady() { clearDisplayStatus(); $("#captureAudioButton").on('vclick', function(e){ e.preventDefault(); goCapture('audio'); return false; }); $("#captureImageButton").on('vclick', function(e){ e.preventDefault(); goCapture('image'); return false; }); $("#captureVideoButton").on('vclick', function(e){ e.preventDefault(); goCapture('video'); return false; }); } //********************************************************* // initialize the environment //********************************************************* $("#captureMainPage").bind("pagebeforeshow", function() { getCaptureReady(); } );

HTML 5/JQuery Mobile

<!DOCTYPE HTML>
<html><head><title>Capture</title></head>
<body>
	<!---------------------------------- Capture ------------------------------------------>
	<div data-role="page" id="captureMainPage" data-add-back-btn="true" back-btn-text="back">
		<div data-role="header">
			<h1>Capture</h1>
		</div>
		<div data-role="content">
			<ul id="captureControl" data-role="listview" data-inset="true">
				<li><a href="#" id="captureAudioButton">Capture Audio</a></li>
				<li><a href="#" id="captureImageButton">Capture Image</a></li>
				<li><a href="#" id="captureVideoButton">Capture Video</a></li>				
			</ul>
			<div id="captureProperties" class="mesgBox ui-grid-a" style="display:none"></div>
		</div>
		<div data-role="footer">
			<div id="captureStatus"></div>
		</div>
		
		<script type="text/javascript" charset="utf-8" src="js/capture-min.js"></script>	
	</div>
</body>
</html>