Wednesday, May 20, 2009

Web Camera in Flash

Setting up a webcam in Flash has always been pretty simple. There are two cases in flash that you would use the webcam in a project: Streaming video for video chat or using it as a tool to take a photo(snapshot). These two cases have completely different purposes and thus you want your camera setup properly for each.

Setup Your Camera
First, let’s setup your camera and a video instance for playback. This code will setup a default camera and default video instance. Both will be setup for 320×240 playback.

1 var camera:Camera = Camera.getCamera();
2var video:Video = new Video();
3 video.attachCamera(camera);
4 addChild(video);


Setup Camera for Streaming Video Chat

Setting up your camera for streaming video chat involves a little more work and planning than just using it to take a photo within the player. Streaming video will require you to sacrifice video quality for speed, especially if you need to sync the video with audio. There are two methods of the Camera class that we will use to balance video quality and frame rate with bandwidth: Camera.setQuality() and Camera.setMode(). setQuality() is used to specify bandwidth and overall image quality of the Camera’s output video. Adobe’s Help Documentation has this to say:

» To indicate that bandwidth use takes precedence, pass a value for bandwidth and 0 for quality . Flash Player transmits video at the highest quality possible within the specified bandwidth. If necessary, Flash Player reduces picture quality to avoid exceeding the specified bandwidth. In general, as motion increases, quality decreases.
» To indicate that quality takes precedence, pass 0 for bandwidth and a numeric value for quality . Flash Player uses as much bandwidth as required to maintain the specified quality. If necessary, Flash Player reduces the frame rate to maintain picture quality. In general, as motion increases, bandwidth use also increases.
» To specify that both bandwidth and quality are equally important, pass numeric values for both parameters. Flash Player transmits video that achieves the specified quality and that doesn’t exceed the specified bandwidth. If necessary, Flash Player reduces the frame rate to maintain picture quality without exceeding the specified bandwidth.
Lets setup our code to have medium compressed quality and a frame rate of 15.

1 var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the
2 current outgoing video feed can use, in bytes per second. To specify that Flash
3 Player video can use as much bandwidth as needed to maintain the value of quality
4 , pass 0 for bandwidth . The default value is 16384.
5 var quality:int = 50; // this value is 0-100 with 1 being the lowest quality. Pass 6 0 if you want the quality to vary to keep better framerates
7 var camera:Camera = Camera.getCamera();
8 camera.setQuality(bandwidth, quality);
9 camera.setMode(320,240,15,true); // setMode(videoWidth, videoHeight, video fps,
10 favor area)

// Now attach the webcam stream to a video object.
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);

Depending on your project, you can change bandwidth, quality, and frame-rate settings to find the best combination. It is recommended to set the video capture size smaller, then stretching it up. This will allow for a higher frame rate since you are sending smaller video that is stretched. The video is a littler blurry, but if you plan on having lots of movement, having a higher frame-rate will be more important.


Setup Camera to take a photo (snapshot)

This type of configuration isn’t a whole lot different the the code example above. The main difference is that we aren’t passing constant amounts of data to a streaming server each second. Instead, we just need to get the camera’s data once. So, we can up the quality and frame rate to our hearts content (granted the user’s hardware allows for the settings).

Here is the above example, but with maxed out configuration for high photo quality.



1 var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the
2 current outgoing video feed can use, in bytes per second. To specify that Flash
3 Player video can use as much bandwidth as needed to maintain the value of quality 4 , pass 0 for bandwidth . The default value is 16384.
5 var quality:int = 100; // this value is 0-100 with 1 being the lowest quality.
6 Pass 0 if you want the quality to vary to keep better framerates
7 var camera:Camera = Camera.getCamera();
8 camera.setQuality(bandwidth, quality);
9 camera.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, 10 favor area)
11 var video:Video = new Video();
12 video.attachCamera(camera);
13 addChild(video)

AJAX Web Cam

AJAX Cam is a lightweight webcam script to automatically refresh an image on your webpage without having the whole page refresh. This saves on bandwidth, and makes for a better looking presentation.

http://www.ajaxcam.com/

Web Cam Driver Robot

http://driver-pro.com/related/english/device-driver-updates/?gclid=CJ6SmtXhy5oCFShRagodlA3D2w&hit=1&adurl=15809

Flash Media Server Live Video Record and Playback
Using FMS File Object For Dynamic File Play and Delete


This is an update of the Adobe supplied demo to record and playback a single flv file. This version keeps the same skin but includes user supply of the file name, using the FMS server side File class to provide a list of flv files for the current application instance, calling a server side function and returning results, dynamically maintained list of recorded files to play, deleting of the files and dynamic input of the uri connection string.
Rebuilt and updated of the Macromedia FMS tutorial_record adding in a dynamic uri for connection, disconnecting, a video selection combo that gets the list from the server side main.asc and a delete function. Reset the layers more functionally. Updated components to V2 and removed V1 components

http://www.hosfordusa.com/?p000100000119000000


Flash Media Server Text Chat Example

This is a Flash 8 AS 2 update of the Adobe supplied demo for a text chat on FMS server. Includes the V2 UI components and improvment of various coding elements. Improved the code comments.

For FMS2 you do not need a main.asc file in the application folder to try this.

Inside the FLA the following line requires your FMS server URI and then republish the movie:
var c_FmsUri:String = "rtmp://yourFMSdomain/tutorial_textchat/

http://www.hosfordusa.com/?p000100000142000000

No comments: