AR research explores the application of computer-generated imagery in live-video streams as a way to expand the real-world.

The possibilities of how you could use Augmented Reality (AR) are endless. Picture yourself walking or driving down the street. With augmented-reality displays, which will eventually look much like a normal pair of glasses, and informative graphics appearing in your field of view, and audio that coincides with whatever you see.

Now, this article doesn’t go as far as how to create your own AR glasses, but rather a “first step” into what is capable when using AR.

I’ve created a quick example of an AR environment below. Using your webcam, and the provided PDF, you can experience what AR is all about. Make sure to take a look at some more advanced examples in the links above also.

First, print this PDF.

Next, activate the Flash movie below to allow access to your webcam, and hold up the piece of paper to the camera to activate the AR environment. Make sure the large square is fully visible within the camera, and you’ll see how the AR loads and animates with how you position the paper.

Like I said, this example is brief. The AR that you will see above when holding up the pattern you printed is quite simple. There will be three cubes that will be displayed within your streaming video. The AR environment reacts to wherever the pattern on the printed pdf goes. You can rotate or angle the pattern against the camera, the the AR will follow.

There are many ways that this small “first step” towards a more interactive AR environment can be upgraded, and it’s only a start.

Using this technology you can stream video, add animations, or animate entire environments. You could green-screen actors or musicians and place them in a music video that comes to life seemingly right in your own hands. There are thousands of ways to implement AR to engage your website visitors or publication readers. Artist labels could use AR in their branding or CD packaging, or anyone with a business card could use AR to allow for mini-presentations. Whether that be a video or information displayed to a potential client by simply holding your business card card up to their webcam, while visiting your own website.

The ways of incorporating Augmented Reality into online and print media are nearly endless.

If you do not have a web cam, here’s how this simple example looks.

Have you used AR in any of your projects yet?

Stratus as defined by Adobe…

Stratus is a hosted rendezvous service that aids in establishing communications between Flash Players or Adobe AIR endpoints using RTMFP. Flash Player endpoints must stay connected to the server during the entire time of communications. Unlike Flash Media Server, Stratus does not stream video or support media relay, shared objects, or scripting. Stratus is being made available as a beta service through Adobe Labs to allow our developer community to begin building applications using RTMFP.

…which basically states that Stratus can be used in combination with Flash Media Server to allow for developers to easily connect a small amount of users (at the moment) directly instead of through the Flash Media Server using peer-to-peer technology.

Flash Media Server is built to support client to server communication. Stratus breaks free of that structure and allows client to client communication. This is a great starting point for Flash and P2P application development.

Unfortunately, this system was not intended to create an infinitely scalable MMORPG, although, there are some variables within the Stratus environment that will allow you to push the user limit over the default of 5.

Adobe’s first iteration of RTMFP is really only a taste of what is to come, and is only a glimpse into the Flash world of P2P.

Here are some tutorial resources I’ve put together. Feel free to leave any that you have also found helpful in learning how to effectively use Stratus.

Stratus Home Page
Get A Stratus Developer Key
Adobe Labs Stratus FAQ
Adobe Labs Stratus Sample Application w/source
Tutorial and Downloadable Files from Influxis.com
Stratus Application Using PHP/MySQL
Stratus, Python, and File Sharing
Stratus Basics

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            private function formatTime(item:Date):String {
                return dateFormatter.format(item);
            }
            private function videoDisplay_playheadUpdate():void {
                var pT:Number = videoDisplay.playheadTime || 0.1;
                var tT:Number = videoDisplay.totalTime;
                var pTimeMS:Date = new Date(pT * 1000);
                var tTimeMS:Date = new Date(tT * 1000);
                timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
            }
            private function slider_thumbPress():void {
                videoDisplay.pause();
            }
            private function slider_thumbRelease():void {
                videoDisplay.playheadTime = slider.value;
                videoDisplay.play();
            }
            private function videoDisplay_ready():void {
                videoDisplay.visible = true;
                controlBar.visible = true;
            }
        ]]>
    </mx:Script>
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
    <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
        <mx:VideoDisplay id="videoDisplay" visible="false" width="100%" height="100%"
            playheadUpdate="videoDisplay_playheadUpdate()"
            ready="videoDisplay_ready()"
            rewind="videoDisplay.play()"
            source="http://www.derekentringer.com/flv/purple_plasma.flv" />
        <mx:ControlBar id="controlBar" visible="false">
        	<mx:Button id="play" name="play" label="Play" click="videoDisplay.play()"></mx:Button>
        	<mx:Button id="pause" name="pause" label="Pause" click="videoDisplay.pause()"></mx:Button>
            <mx:HSlider id="slider" width="100%"
                allowTrackClick="false"
                invertThumbDirection="true"
                liveDragging="false"
                maximum="{videoDisplay.totalTime}"
                minimum="0"
                thumbPress="slider_thumbPress()"
                thumbRelease="slider_thumbRelease()"
                tickInterval="1"
                value="{videoDisplay.playheadTime}" />
            <mx:Label id="timeLabel" textAlign="right" />
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>

See the example

Download the source

“The type selector ‘classNameHere’ was not processed, because the type was not used in the application.”

It’s quite easy to turn this off by going into your project properties panel and select the Flex Compiler option and add the following into Additional compiler options:

-show-unused-type-selector-warnings=false

More on this subject here

This is really exciting, as a PHP/Flex developer, and it’s going to open even more opportunities for developing and integrating with the two code bases.

Read more here.

Here’s a quick file browser in Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1044" height="800" currentState="videoState" creationComplete="init()">
	<mx:Style source="assets/css/styles.css" />
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			import mx.controls.Alert;
			import flash.html.HTMLLoader;
			import flash.net.URLRequest;
			import mx.events.MenuEvent;
            import mx.collections.*;
			[Bindable]
            public var menuBarCollection:XMLListCollection;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="File" data="top">
                        <menuitem label="Browse" data="browse_files"/>
                    </menuitem>
                </>;
            private function menuHandler(event:MenuEvent):void  {
                if (event.item.@data != "top") {
                    if(event.item.@data == "browse_files"){
                    	browseDir(event);
                    }
                }
            }
			if(HTMLLoader.pdfCapability == HTMLPDFCapability.STATUS_OK) {
				trace("PDF content can be displayed");
			}else {
				trace("PDF cannot be displayed. Error code:", HTMLLoader.pdfCapability);
			}
			private function init():void{
				fileSystemTree.directory = File.desktopDirectory;
            	menuBarCollection = new XMLListCollection(menubarXML);
			}
			private function browseDir(e:Event):void{
				var dir:File = new File();
				dir.browseForDirectory("Select directory");
				dir.addEventListener(Event.SELECT, onDirSelect);
			}
			private function onDirSelect(event:Event):void{
				fileSystemTree.directory = event.currentTarget as File;
			}
			private function onChange(e:Event):void{
				var file:File = e.currentTarget.selectedItem as File;
				if(!file.isDirectory){
					var viewer:Object;
					switch(file.extension.toLowerCase()){
						case "flv":
							currentState = "videoState";
							viewer = videoDisplay;
							viewer.source = file.url;
						break;
						case "png":
						case "jpg":
							currentState = "imageState";
							viewer = image;
							viewer.source = file.url;
						break;
						case "pdf":
							currentState = "pdfState";
							var htmlLoader:HTMLLoader = new HTMLLoader();
							var urlReq:URLRequest = new URLRequest(file.url);
							htmlLoader.width = 814;
							htmlLoader.height = 705;
							htmlLoader.load(urlReq);
							var myComponent:UIComponent  = new UIComponent();
							myComponent.addChild(htmlLoader);
							pdf_content.addChild(myComponent);
						break;
						default:
							Alert.show("Unsupported file " + file.nativePath, "Error");
						return;
					}
				}
			}
		]]>
	</mx:Script>
	<mx:HDividedBox width="100%" height="725" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10" y="41">
		<mx:VBox width="200" height="100%">
			<mx:FileSystemTree id="fileSystemTree" width="100%" height="100%" change="onChange(event)" />
		</mx:VBox>
		<mx:Canvas width="100%" height="100%" id="content" ></mx:Canvas>
	</mx:HDividedBox>
	<mx:ApplicationControlBar x="0" y="0" width="100%">
		<mx:MenuBar labelField="@label" itemClick="menuHandler(event);" dataProvider="{menuBarCollection}" />
	</mx:ApplicationControlBar>
	<mx:states>
		<mx:State name="videoState">
			<mx:AddChild relativeTo="{content}">
				<mx:VideoDisplay id="videoDisplay" width="100%" height="100%" />
			</mx:AddChild>
		</mx:State>
		<mx:State name="imageState">
			<mx:AddChild relativeTo="{content}">
				<mx:Image id="image" width="100%" height="100%" />
			</mx:AddChild>
		</mx:State>
		<mx:State name="pdfState">
			<mx:AddChild relativeTo="{content}">
				<mx:Canvas width="100%" height="100%" id="pdf_content" ></mx:Canvas>
			</mx:AddChild>
		</mx:State>
	</mx:states>
</mx:WindowedApplication>

The result:

Download the source