22
Jan
08

Displaying a webcam’s video in a Flex VideoDisplay control

The following example shows you how you can display a user’s webcam feed in a VideoDisplay control using the static Camera.getCamera() method and VideoDisplay class’s attachCamera() method.

Full code after the jump.

This example won’t be very interesting unless you actually have a webcam installed.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/22/displaying-a-webcams-video-in-a-flex-videodisplay-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function videoDisplay_creationComplete():void {
                var camera:Camera = Camera.getCamera();
                if (camera) {
                    videoDisplay.attachCamera(camera);
                } else {
                    Alert.show("You don't seem to have a camera.");
                }
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="videoDisplay"
            creationComplete="videoDisplay_creationComplete();"
            width="160"
            height="120" />

    <mx:Button id="button"
            label="Reload Camera"
            click="videoDisplay_creationComplete();" />

</mx:Application>

View source is enabled in the following example.


16 Responses to “Displaying a webcam's video in a Flex VideoDisplay control”


  1. 1 barry.b Jan 23rd, 2008 at 5:16 am

    the else “Alert.show(”You don’t seem to have a camera.”);” isn’t working (Mac OS-X 10.4 iBook PPC - mic but no camera). got prompted to give permissions to access the webcam/microphone though

  2. 2 Matt Platte Jan 23rd, 2008 at 9:30 am

    Right-click the Flash movie, choose Settings.

    My Macbook will usually try to open “DV Video” instead of the iSight camera which is “USB Video Class Video”. I suppose there’s a way to make USB the default but I haven’t searched for that.

  3. 3 barry.b Jan 25th, 2008 at 5:50 am

    @Matt. thanx (that actually helped getting a Mac camera working with Connect/Breeze)

    but for my iBook (no built-in iSight camera, no camera plugged in at all) all I’m saying is that the “else” doesn’t fire

    (selecting which camera won’t work … since there isn’t one at all)

  4. 4 peterd Jan 25th, 2008 at 8:25 am

    barry.b,

    What happens if you compile and run the following code:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white"
            creationComplete="init();">
    
        <mx:Script>
            <![CDATA[
                import flash.media.Camera;
                import mx.utils.ObjectUtil;
    
                private var camera:Camera;
    
                private function init():void {
                    camera = Camera.getCamera();
                    textArea.text = ObjectUtil.toString(camera);
                }
            ]]>
        </mx:Script>
    
        <mx:Label text="{Camera.names} ({Camera.names.length})" />
        <mx:TextArea id="textArea"
                editable="false"
                width="100%"
                height="100%" />
    
    </mx:Application>
    
  5. 5 peterd Jan 25th, 2008 at 10:44 am

    barry.b,

    Actually, I quickly converted this into a new entry. Can you check out “Getting specific camera instances using the static Camera.getCamera() method” and tell me what you see?

    On my IBM laptop w/ my USB “Logitech QuickCam Express”, I only see one installed camera (my laptop doesn’t have a built-webcam). However, on my iMac w/ built-in iSight, I see three cameras: “DV Video”, “IIDC Firewire Video”, and “USB Video Class Video”.

    Peter

  6. 6 barry.b Jan 27th, 2008 at 5:24 am

    “However, on my iMac w/ built-in iSight, I see three cameras: “DV Video”, “IIDC Firewire Video”, and “USB Video Class Video”.”

    as do I, with no camera attached. I also get the same three options when using Connect (Breeze) and “select a camera”.

    is it significant that all three settings show “activityLevel = -1″

    Perhaps this is OS X being wishful in it’s thinking? the OS provides a generic three drivers whether the machine it’s installed on has the device or not?

    I haven’t been using Mac’s with/without webcams for long, but gut feeling might be an old limitation between Flash and OS X coming back to haunt.

    Bottom line however could be that there’s only a test for suitable Mac camera drivers but not the the device itself to be installed and functional. But I’m just guessing…

  7. 7 s Mar 14th, 2008 at 1:58 pm

    Hi,

    I have some xmls stored in various date folders by the name of yyyymmdd on unix. I have a flex page that that has plots which source data from these xmls using a jsp that has out.println for the xml i want to source. I call this jsp using HTTPSERVICE. I have a datechooser to chose a date depending on which I want to source the xml fromt he folder which depends on the date selected. So, my question is is there a way to reload a flex page with parameters?After choosing a date I want to add this date to the param list passed to the jsp..and I want to refresh my charts with this new jsp url..
    I tried javascript:location.reload(true) but it refreshes the page with default date value i.e it doesn;t persist the date value i selected last using the date selector. Please help

    Thanks

  8. 8 Tim Perrett Mar 15th, 2008 at 12:02 pm

    Out of interest, is there a way to capture a still image from the webcam?

    Cheers

    Tim

    PS: great useful article!!

  9. 9 sudheer Apr 16th, 2008 at 10:35 am

    Sorry it doesnt work for me….it just shows a dark screen, my web cam software clearly captures the video flex is unable to that….

  10. 10 usb dani May 2nd, 2008 at 6:45 am

    A very nice example for my Webcam - works for me. Thanks a lot!

  11. 11 Webcam May 18th, 2008 at 10:23 am

    Thanx this helped me a lot and lucky me that have a brand new webcam :)

  12. 12 kevin May 31st, 2008 at 4:56 pm

    Hi,
    I have two webcam setup on my PC. Please let me know how to detect all webcams and let the user select one of them.

    Thanks for the tutorials/examples.

  13. 13 peterd May 31st, 2008 at 11:15 pm
  14. 14 kevin Jun 1st, 2008 at 5:44 am

    Awesome! Thank you. I really love your examples. Have a great day.

  15. 15 andrelau Jun 28th, 2008 at 11:25 am

    It looks like it cannot get the ’stream’ from a DV camcorder connected. But ! it shows it in the list. I checked with www.acrobat.com and the cam does not work too.

  16. 16 darek Oct 1st, 2008 at 12:34 am

    hi is it possible to connect hdcam using flex? we are working with livestreaming tv application and we would like to add a new feature like live match transmition or live web conferences. so I’m asking is there possibiliity to connect hdcam I now that with web cam’s there is no problem but I can’t get any information how to connect to hdcam. Thx for answer

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".