Actionscript 3 Webcam Configure
Setting up a webcam in Flash has always been pretty simple. I feel 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. 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 2 3 4 |
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 2 3 4 5 6 7 8 9 10 | var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384. var quality:int = 50; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates var camera:Camera = Camera.getCamera(); camera.setQuality(bandwidth, quality); camera.setMode(320,240,15,true); // setMode(videoWidth, videoHeight, video fps, 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. I would suggest setting 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
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 2 3 4 5 6 7 8 | var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384. var quality:int = 100; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates var camera:Camera = Camera.getCamera(); camera.setQuality(bandwidth, quality); camera.setMode(320,240,30,false); // setMode(videoWidth, videoHeight, video fps, favor area) var video:Video = new Video(); video.attachCamera(camera); addChild(video); |
Feel free to comment with any questions. Check out my other post for more AS3 Camera quirks and tips.
26 Responses
to “Actionscript 3 Webcam Configure”
1 Trackback(s)
- Feb 17, 2010: Edd’s progress – Webcam Code… « BearCanvas
Great job…
Very very helpfull examples
Thaks
Thanks Sudhir, glad I could help!
Wow! I don’t know much about the vast actionscript libs, and was worried I wouldn’t be able to figure this out for a few weeks. THANK YOU VERY MUCH for providing such a simple example!
Do you also have any short examples that explain how to connect the video stream to a Red5 and/or Flash Media Server? My company is leaning more towards Red5, since it’s open source, but I’m guessing any example would be about the same.
Chad,
I’m happy that I could help. Connecting to a Red5 server will be the same as connecting to a FMS (Flash Media Server). I have another quick tutorial about setting up an RTMP stream with Flash media server: http://blog.728media.com/2008/08/03/connecting-to-a-flash-media-server-using-rtmp/
can I use these codes with a standard javascript in my html or do I need to use flash editor? does it have to be flash cs 3 or 4?
this doesnt seem to work?
SCRIPT LANGUAGE=JavaScript>
LoadCamera()
function LoadCamera() {
alert(“ok”);
var camera:Camera = Camera.getCamera();
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);
var bandwidth:int = 0; // Specifies the maximum amount of bandwidth that the current outgoing video feed can use, in bytes per second. To specify that Flash Player video can use as much bandwidth as needed to maintain the value of quality , pass 0 for bandwidth . The default value is 16384.
var quality:int = 50; // this value is 0-100 with 1 being the lowest quality. Pass 0 if you want the quality to vary to keep better framerates
var camera:Camera = Camera.getCamera();
camera.setQuality(bandwidth, quality);
camera.setMode(320,240,15,true); // setMode(videoWidth, videoHeight, video fps, favor area)
var video:Video = new Video();
video.attachCamera(camera);
addChild(video);
}
Bruce,
This is tutorial will only work in Flash using Actionscript.
In order to view a webcam through javascript, you would need to have the webcam publishing to your server, then updating the IMG in your HTML. For refreshing the image, you could use this: http://www.ajaxcam.com/
I have been working with the motion detection in as3 and I was wondering if you could shed some light… How do you set the video to a larger view, say 720, 540? Also how do you set the video representation to mirror the subject?
Thanks!
Hi
Is there any way to have a preview of the image quality without seeing it from streaming server?
I have a preview video attached to the camera but whatever quality or BW I set I can’t see the change, unless I connect that video to streaming server and see through live site how it looks.
thanks
Cris
Cris,
to force the preview to use the quality settings you need to add:
camera.setLoopback( true );
Regards,
Ivaylo
Great example to work from. If you’re using it to take a photo, how does Flash save/post the data to store it as a JPG? Any references would be greatly appreciated.
cent,
Once you capture the BitmapData of a display object (in this case the video that is playing back the webcamera), you have two choices to get a jpg file.
1.) POST the BitmapData as a ByteArray to a webservice that opens a new window with the JPG.
2.) You can use the Adobe JPG or PNG libraries to convert the BitmapData to the correct format and in Flash Player 10 save that BitmapData as an image to the user’s hard drive.
http://code.google.com/p/as3corelib/
I’m very interesting in the streaming for video chat part, but when I copied and pasted it I just got a white window when I tried to run it. It came up with the prompt asking for me to allow or deny the camera. I click allow and I get just the white window. Also how would someone else be able to see the live stream? I would take it they would have to go to a different page that would somehow play what your code is capturing. Any help would be appreciated. Thanks!
Fedll,
There are three possible reasons why your camera might not be showing in your Video object.
1.) You don’t have a webcamera
2.) You aren’t attaching the camera to the Video object
3.) Your camera is already being used by another application or browser window.
In order for users to watch the live stream, you would need to publish your camera to a NetStream that is connnected to a media server (like Flash Media Server) and pull that stream down on another page for live playback. So in the end you would have two applications: one to broadcast the video and another to receive and playback the stream.
Setting up a FMS is quick and easy,
http://blog.728media.com/2008/08/03/connecting-to-a-flash-media-server-using-rtmp/
thank you sooo much. great help!
very useful, much thanks!
I need help
how can webcam or camera auto detect which webcam are active possible
understand?
Mukler,
The guys over at Squidder.com have a post that should help you out.
http://www.squidder.com/2009/03/09/trick-auto-select-mac-isight-in-flash/
thank you very much!!!!!!!!!!!!!!!
but what about pc?
my machine pc has not usb video else see you my pic device
http://img36.imageshack.us/img36/2200/sssfm.jpg
how? idea???
Really great tutorial, straight forward and to the point. Good job!
thanks for that, how then would you take the snapshot?
Marc,
If you want to take a “snapshot” of the video object, you will need to get your Video object’s bitmap data.
Quasimondo has a tutorial that should help get you by:
http://www.quasimondo.com/archives/000670.php
Thanks a lot for a great tutorial. Couldn’t understand why my cam shot so bad pics… put after input from your tut… everything works smoothly.
Hi,
I’m working with webcams in Flash at the moment and was wondering if anyone could tell me how to flip the image so that the movement doesn’t appear inverted.
Hope someone can help me out and I look forward to hearing from anyone.
Thanks.
In order to flip the video you can adjust the scaleX property to -1. So your code would look like this:
myVideo.scaleX *= -1;
Hope this helps!
I’ve been messing with the scripts trying to make it bigger. I keep failing. Is there anyway to make the video bigger with the 3rd example? And also, can you help with sound importing? And do you think you can help me create a video capture? I know this is probably too much to be asking, but I would like help for the larger screen the most.
thanks
Jeff