AS3 Quickie – Attach a Camera to StageVideo

In the past, we’ve been able to attach a local camera to Video display objects within Flash Player with relative ease. The flash.media.Video object, of course, is part of the traditional display list and is not accelerated by the system GPU whatsoever. Using the newer flash.media.StageVideo object, we can implement a GPU-accelerated video display beneath the Flash display list… but previous to Flash Player 11.4 we haven’t been able to attach a camera to StageVideo as we could with Video. Thankfully, now we can!

If you have a camera attached to whatever you are using to read this, try out the demo below. You will need to be sure an allow camera and microphone access for Flash Player. Trust me – I’m not capturing any data through this :)

[kml_flashembed publishmethod=”static” fversion=”11.4.0″ movie=”/wp-content/uploads/2012/11/StageVideoCamera.swf” width=”550″ height=”400″ targetclass=”flashmovie” play=”true” loop=”true” menu=”false” quality=”high” wmode=”direct” allowfullscreen=”true” allowscriptaccess=”always” allownetworking=”all”]
Requires Flash Player 11.4 or above!

To get this working only takes a few steps in your ActionScript code. The main classes we need to work with are flash.media.StageVideo for the GPU-accelerated video, and flash.media.Camera to grab a local camera object to feed an image to our video. For any of this to work, you must target Flash Player 11.4 or above.

In ActionScript, we must perform the necessary imports (and there are a few!):

import flash.media.StageVideo;
import flash.media.StageVideoAvailability;
import flash.media.Camera;
import flash.events.StageVideoAvailabilityEvent;
import flash.events.StageVideoEvent;
import flash.geom.Rectangle;

The first thing we do is to set up our StageVideo instance. To do this, it is safest to wait until our class has been added to the Stage, and then add an event listener to check for flash.events.StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY.

stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, availabilityChanged);

Once the StageVideo availability changes, we can then set out StageVideo instance to stage.stageVideos[0], assigning a reference to a variable in ActionScript.

stageVideo = stage.stageVideos[0];

Now we need to grab a flash.media.Camera object and attach that Camera to our StageVideo.

camera = Camera.getCamera();
stageVideo.attachCamera(camera);

The final task is to listen for a flash.events.StageVideoEvent.RENDER_STATE to fire, at which time we can properly size our StageVideo. We absolutely need to do this since StageVideo will initially have a width and height of 0.

stageVideo.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);

The full code is below. Note that the FLA contains upon the Stage a TextField with the instance ID of statusField:

package  {
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.media.StageVideo;
	import flash.media.StageVideoAvailability;
	import flash.media.Camera;
	import flash.events.Event;
	import flash.events.StageVideoAvailabilityEvent;
	import flash.events.StageVideoEvent;
	import flash.geom.Rectangle;
	
	public class Main extends MovieClip {
		
		public var statusField:TextField;
		
		private var camera:Camera;
		private var stageVideo:StageVideo;
		
		public function Main() {
			this.addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		
		protected function init(e:Event):void {
			stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, availabilityChanged);
		}
		
		protected function availabilityChanged(e:StageVideoAvailabilityEvent):void {
			statusField.appendText("StageVideo => " + e.availability + "\n");
			if(e.availability == StageVideoAvailability.AVAILABLE){
				stageVideo = stage.stageVideos[0];
				attachCamera();
			}
		}
		
		protected function attachCamera():void {
			statusField.appendText("Camera.isSupported => " + Camera.isSupported + "\n");
			if(Camera.isSupported){
				camera = Camera.getCamera();
				stageVideo.addEventListener(StageVideoEvent.RENDER_STATE, onRenderState);
				stageVideo.attachCamera(camera);
			}
		}
		
		protected function onRenderState(e:StageVideoEvent):void {
			stageVideo.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
		}
		
	}
	
}

Want the full package? Download below:
Packaged code and Flash Professional CS6 project

6 thoughts on “AS3 Quickie – Attach a Camera to StageVideo”

    1. Most cameras (webcams) are able to mirror using native software controls – are you saying you’d want to mirror the display via AS3? I’m not quite sure if that would be possible when using StageVideo.

  1. Pingback: AS3 Quickie – Attach a Camera to StageVideo | In Flagrante Delicto! « eaflash

  2. Hi This is strange, testing through your site i am able to preview the webcam.

    But it doesn’t seems to work. it is written StageVide => unavailable

    I’m using flash cs6 with flash player 11.7
    testing with air 3.7 same result.

Leave a Reply to Joseph Labrecque Cancel Reply

Your email address will not be published. Required fields are marked *