Kevin Hoyt

I often find myself inspired by the questions that I encounter on the public AIR forums. Today I saw a question about using AIR to select a random image file from a user-selected location on disk. What piqued my interest was that the selected directory was to be populated by capturing images from a web camera.

What I want to build is a Sideshow program that randomly displays images in a folder. Then tie that in with a wi-fi camera that sends images to that folder. So, it needs to watch the folder for new files as it is running.

It occurred to me that while a wi-fi camera has the obvious benefit of being untethered, almost any web cam that could be registered with the system could also be used. The first task would be to activate and attach the web cam. For those coming to AIR by way of JavaScript, this isn’t something that just jumps out of the documentation. The key is to use the Video class and the Camera class.

// Start the web cam video
// Invisible to the user, but still capturable
webcam = new air.Video();
webcam.attachCamera( air.Camera.getCamera() );
webcam.visible = false;
window.htmlControl.stage.addChild( webcam );

An interesting aspect of this is that the web cam is attached and running, but set to be invisible. We’re interested in capturing the image from the web cam, but not interested in actually displaying the web cam itself. We can set the web cam as invisible for this, and still capture the pixel data for encoding.

To capture the pixel data itself, we use the BitmapData class, which contains a BitmapData.draw() method. You provide the BitmapData.draw() method the web cam object, and it will capture the current pixel data. To encode that pixel data, we can leverage the ActionScript 3 Core Library, which contains support for both JPEG and PNG. A dash of file IO sends the image to disk.

// Called incrementally to capture a web cam image
function doSnap()
{
	// Setup the bitmap, encoder, file name and stream
	var bmp = new air.BitmapData( 320, 240 );
	var encoder = new runtime.com.adobe.images.JPGEncoder( 90 );
	var jpg = null;
	var now = new Date();
	var stream = new air.FileStream();

	// Capture and encode whatever is currently on the web cam
	bmp.draw( webcam );
	jpg = encoder.encode( bmp );

	// Write the new JPEG image to disk
	// Use time stamp for unique naming
	stream.open( new air.File( dir.url + air.File.separator + now.getTime() +
				 '.' +
				 JPEG_EXTENSION ),
				 air.FileMode.WRITE );	stream.writeBytes( jpg, 0, 0 );
	stream.close();
}

The JavaScript function setInterval() is used to incrementally capture an image from the web cam. The JavaScript function setTimeout() on the other hand is used to get a directory listing and select a random image to display in the “slideshow”. Since there may be a large number of images in the directory, we can use File.getDirectoryListingAsync() so we don’t interrupt the other operations.

// Called when the directory listing is complete
// Selects a random file to display
function doListing( e )
{
	var index = null;

	// Make sure there is a file to display
	// TODO: Do not assume there is an image file available
	if( e.files.length == 0 )
	{
		return;
	}

	// Generate a random index
	// Make sure the selected file is a JPEG file
	do {
		index = Math.floor( Math.random() * e.files.length );
	} while( e.files[index].extension.toLowerCase() != JPEG_EXTENSION )

	// Set the selected image in the UI
	document.getElementById( 'picture' ).src = e.files[index].url;

	// Initiate the next refresh
	// Note that "timeout" only executes once
	setTimeout( doGrab, DISPLAY_TIMEOUT );
}

I like setTimeout() for this because it only gets called once after the specified interval elapses. Directory listing may take some time, so we can’t be sure that the operation will have completed in time. Using setTimeout() allows us to take care of what we need to for the slideshow, and then start another delay. The inverse might result in multiple images getting displayed in rapid succession, instead of an evenly spaced timing.

The full source for this little application is available, but as it turns out the person asking the question was planning to use Flex. I couldn’t just let that slide, so Flex source for the same functionality is also available. Might be a fun comparison for somebody. I personally found that for this project, managing Flex Timer instances was a little more tricky than JavaScript’s setTimeout() and setInterval().

This entry was posted on Wednesday, October 31st, 2007 at 6:56 pm and is filed under Flex, AIR, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.