Skip to content

3D with Webcams in Flash

December 1, 2009

image of stereo cam

Try it out at:  http://nitinmalik.com/flash/stereoCam/stereoCam.html

StereoCam2: http://www.nitinmalik.com/flash/stereoCam2/stereoCam2.html

Now that I was able to display 2 webcam in flash and manipulate the image data from them; I wanted to see if I could make a 3D view based on the camera feeds. I was successful in the setup. It works with the old school red and blue 3D glasses. The technical name for these 3D images is an anaglyph. For the theory behind it, check out wikipedia: http://en.wikipedia.org/wiki/Anaglyph_image ! Basically, use the colored glasses to filter out one of the two overlapping images. Therefore, each eye receives a slightly offset image which our brain can process as having depth.

In terms of the coding, the key component here is what was done with the bitmaps made from the video feeds. Using colorTransform, the red channel was taken out of right eye video, and the only the red channel was left on the left eye video. The two bitmaps were overlapped and a difference filter (from BlendMode) was used to combine them. I also made one of the two bitmaps draggable, to help with the aligning. I think from the basic theory, that the two images should converge when object are distant and close objects should have a difference in position.

The camera I made, *kind of* works. I’m attributing it’s downfalls to the quality of the cameras and the need to fiddle with the alignment of the cameras. Try it out for yourself.

As always, questions and comments are welcome!

Here’s the actionscript below:


package stereoCamCode
{
import flash.display.MovieClip;
import flash.media.Camera;
import flash.media.Video;
import flash.events.Event;

import flash.display.BlendMode;
import flash.geom.ColorTransform;

import flash.ui.Mouse;
import flash.events.MouseEvent;

import flash.display.Bitmap;
import flash.display.BitmapData;

public class StereoCam extends MovieClip
{

private var camL:Camera;//for me (cam 1) is on the left (its perspective)
private var camR:Camera;//for me cam 0) is on the right (its perspective)
private var vidL:Video;//
private var vidR:Video;//

private var bitL:Bitmap;
private var bitR:Bitmap;

private var bitDatL:BitmapData;
private var bitDatR:BitmapData;

public function StereoCam()
{

//Left eye
camL=Camera.getCamera("0");
vidL=new Video(320,240);
vidL.scaleX=-1;
vidL.x=320;
vidL.attachCamera(camL);
addChild(vidL);

camR=Camera.getCamera("1");
vidR=new Video(320,240);
vidR.scaleX=-1;
vidR.x=640;
vidR.attachCamera(camR);
addChild(vidR);

if (! camL)
{
trace("Left Camera not found");
}
if (! camR)
{
trace("Right Camera not found");
}

bitDatL=new BitmapData(vidL.width,vidL.height,false);
bitDatR=new BitmapData(vidR.width,vidR.height,false);

bitDatL.draw(vidL);
bitDatR.draw(vidR);

bitL=new Bitmap();
bitR=new Bitmap();

bitL.scaleX=-1;
bitR.scaleX=-1;

bitL.y=240;
bitR.y=240;

bitL.x=stage.stageWidth;//stage.stageWidth/2;
bitR.x=stage.stageWidth;//reg point at top right b/c of neg scaling

bitL.bitmapData=bitDatL;
bitR.bitmapData=bitDatR;

addChild(bitL);
addChild(bitR);

bitL.transform.colorTransform=new ColorTransform(1,0,0,1);//left eye, only red
bitR.transform.colorTransform=new ColorTransform(0,1,1,1);//right eye, no red
//ColorTransform(red,green,blue, alpha);

bitR.blendMode=BlendMode.DIFFERENCE;

addEventListener(Event.ENTER_FRAME,drawer);

stage.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);

}//ExpCamera

private function drawer(e:Event)
{
bitDatL.draw(vidL);
bitDatR.draw(vidR);
}//drawer

private function dragStart(e:MouseEvent)
{
addEventListener(Event.ENTER_FRAME, dragMe);
}//dragStart

private function dragMe(e:Event)
{
bitR.x=mouseX + vidR.width/2;
bitR.y=mouseY - vidR.height/2;
stage.addEventListener(MouseEvent.MOUSE_UP,dropMe);

function dropMe(f:MouseEvent)
{
removeEventListener(Event.ENTER_FRAME, dragMe);
}
}

}//class
}//package

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: