Building an application using camera data to choose videos ...



Building an application using camera data to choose videos to play

These notes describe an application using a camera attached to a personal computer to choose among prepared videos to play. The application is implemented in Flash ActionScript 3.0. At the start, someone, let's call her the operator, enters in the names of video clip files and aims the camera to associate the video clip with an average color value as a vector of red, green, and blue values.

[pic]

NOTE: if you do not want to repeat this setup procedure, you can hardcode the values by inserting assignments to the colorvideos array. You do need to be careful about this because lighting can change the values as detected by the camera.

When that is complete, the code uses the built-in motion detection functions and whenever motion stops, calculates an average color as viewed by the camera. This value is than compared with the values entered initially. The closest match 'wins' and the associated video is played. The image shown in the screen shot is blurry because the screen capture was done with live video.

[pic]

When the program opens, the operator is asked to give approval for using the camera. The application then proceeds as indicated above with setting up the video clip addresses with the camera values. There is a button on the screen that can be pressed to put the program in full-screen mode. The esc key takes the program out of full-screen mode.

The application uses the movie clips entered into the program. These are .flv files. If you have video in another format, use the Flash Encoder to produce the .flv files.

The application consists of an .fla file and an .as file. The .fla file has a button on the Stage, named fullscreenbtn. In addition, click on Window/Components and drag instances of FLVPlayback and TextInput in the Library. Click on the upper right hand corner of the Library panel for a menu. Click on New Video… This will put a Video object in the Library.

[pic]

Click on Window/Actions and place the following two lines into frame 1:

fullscreenbtn.addEventListener(MouseEvent.CLICK,fullscreen);

stop();

Click on the Stage outside of the button and then bring up the Windows/Properties panel. Type in Videop into the Document class field. This connects the .fla file with the Videop .as file (to be described below).

[pic]

Click on File/Publish Settings and then the HTML tab. For the template, click on Flash Only – Allow Full Screen

[pic]

Click on File/New and open up an ActionScript file.

This file is to be saved as Videop.as. It will contain a class definition of the Videop class, the document class for the .fla file. The Videop class is an extension of the MovieClip class. This is what is required for a Document class for the .fla to be .swf movie. When the .swf file is executed, the Videop method is executed. As you will see from the code, this initiates the code giving the interface to the user, and then the playing of the video. One of the methods included is the fullscreen method referenced in the addEventListener call shown above.

The format of Videop.as is a package definition containing first the import statements and then the Videop class definition. The class definition contains the class and object variables and then all the method definitions. The first method definition is termed the constructor method. It is executed first.

When material is created by code in a .as file, such as the buttons and the text input fields and the video playback screens, objects need to be created with the new operator, the object needs to be positioned AND there needs to be a call to addChild to put it on the display list of Flash.

The camera input is attached to a Video object so the camera input can be displayed and also so that the camera data can be used to create a BitMapData object to compute the average color values. After the setting of the video clips, this Video is covered up by the FLVPlayback object for playing the video. In the fullscreen mode shown in the Flash environment, you can see some of this output.

[pic]

However, when the .fla is published, true full-screen takes place. The other objects making up the interface for setting the values (the buttons and the TextInput field) are removed from the display list.

The matching for color is done in the Red/Green/Blue space, that is, a number for red, a number for green and a number for blue making up a vector of 3 numbers as opposed to a single number. This is what is required to compare colors. Otherwise, two colors that were the same as far as Green and Blue, but slightly different in terms of Red would be viewed as very different.

Array variables need to be declared of type array AND also initialized as an array before being used to push the first value. Note also that arrays start with the index 0.

Here is a calling table for the methods (look this over and then return to it after you see all the code).

|Videop |Invoked when the swf file starts |

|setupmatches |Called by Videop |

|finishsetup |Called when but2 is clicked. This is set up (also termed registered) in |

| |setupmatches by the method but2.addEventListener |

|setupmatchesitem |Called when but is clicked. This is set up in setupmatches |

|activityHandler |Called when the camera signals motion detection (motion and then no |

| |motion). This is set up by a call in finishsetup: |

| |cam.addEventListener(ActivityEvent.ACTIVITY, activityHandler); |

| |Note also that the settings are made by the command: |

| |cam.setMotionLevel(75,3000); |

| |This is done in Videop |

|playbestmatchvideo |Called in activityHandler |

|dist |Called (two places) in playbestmatchvideo |

|computeAverageColor |Called in setupmatchesitem and in activityHandler |

|fullscreen |Called when button placed on Stag, named fullscreenbtn in the .fla file, |

| |is clicked |

|playclip |Called in playbestmatchvideo |

|playagain |Called when the video being played signals the COMPLETE event. This is set|

| |up in playclip |

package {

import flash.display.*;

import flash.events.Event;

import flash.events.MouseEvent;

import .*;

import fl.video.*;

import flash.media.*;

import flash.events.*;

import flash.geom.*;

import flash.text.*;

import fl.controls.*;

public class Videop extends MovieClip {

private var playback:FLVPlayback;

private var vid:Video;

private var cam:Camera;

private var vfn:TextInput;

private var but:Button;

private var but2:Button;

private var dir:TextField = new TextField();

private var currentlyplaying:String;

public static var colorvideos:Array = [];

public function Videop() {

// set up webcam for input

cam = Camera.getCamera();

if (cam != null) {

// the 75 is out of 100.

//A lower number would need less motion

// the 3000 means to wait if motion has stopped 3 seconds,

//then trip the Activity Event

// see call to cam.addEventListener in finishsetup

cam.setMotionLevel(75,3000);

vid = new Video();

vid.attachCamera(cam);

addChild(vid);

setupmatches();

}

}

private function setupmatches() {

dir.text =

"Aim camera, enter name video file, then click add button";

addChild(dir);

dir.x = 400;

vfn=new TextInput();

vfn.x=400;

vfn.y = 50;

addChild(vfn);

but=new Button();

but.label = "add";

but.x = 400;

but.y = 100;

but2=new Button();

but2.label="All done";

but2.x = 400;

but2.y = 200;

addChild(but);

addChild(but2);

but.addEventListener(MouseEvent.CLICK,setupmatchesitem);

but2.addEventListener(MouseEvent.CLICK,finishsetup);

}

private function finishsetup(ev) {

currentlyplaying = "";

cam.addEventListener

(ActivityEvent.ACTIVITY, activityHandler);

playback = new FLVPlayback();

playback.x = 0; //change the x and y values if you want to see

// the camera input

playback.y = 0;

addChild(playback);

removeChild(but);

removeChild(but2);

removeChild(dir);

removeChild(vfn);

}

private function setupmatchesitem(ev) {

var color:Array;

var bmd:BitmapData=new BitmapData(vid.width,vid.height);

bmd.draw(vid,new Matrix());

color = computeAverageColor(bmd);

colorvideos.push([color,vfn.text]);

}

public function activityHandler(ev) {

//determine color in cam input

//trace("in activityHandler");

var bmd:BitmapData=new BitmapData(vid.width,vid.height);

bmd.draw(vid,new Matrix());

var color:Array;

color = computeAverageColor(bmd);

playbestmatchvideo(color);

}

private function playbestmatchvideo(color):void {

var ch:String;

var distances:Array;

var i:int;

var bestyetindex:int = 0;

var lowestyet:Number=dist(color,colorvideos[0][0]);

for (i=1; i> 8);

var blue:Number = (col & 0x0000FF);

totalR += red;

totalG += green;

totalB += blue;

count++;

}

}

var targetR:Number = Math.round(totalR/count);

var targetG:Number = Math.round(totalG/count);

var targetB:Number = Math.round(totalB/count);

return [targetR,targetG,targetB];

}

public function fullscreen(ev) {

//make bigger alternative to full screen

playback.height = 500;

playback.width = 600;

playback.enterFullScreenDisplayState();

}

private function playclip(videofile):void {

playback.autoRewind = true;

playback.autoPlay = true;

playback.source = videofile;

playback.addEventListener(PLETE,playagain);

}

private function playagain(ev) {

playback.play();

}

}

}

The application can be tested in the Flash environment in the usual way: Control/Test Movie. To publish, click on File/Publish. The .swf and the .html files are the ones to be uploaded along with any .flv files that you plan to enter into the program.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download