Flex: Video Source Switcher

I’ve just written a basic MXML component that will switch between video sources in Flex, for a streaming application. Using the Camera class it’s possible to grab a list of connected/recognised devices and use this to switch the input source. Note that switching sources like this isn’t really recommended by Adobe, but it works anyway ;-)

For this example I’m creating a basic VBox with a List component and a Video instance. The component will show a list of sources and selecting a source will trigger the switch. Initially the component will use the default source (whatever is currently selected in the player Settings dialogue) to create a new Video instance, within a UIComponent container. The List component is populated via an array that looks up the sources using Camera.names.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="400" creationComplete="setDefaultSource()">
    <mx:Script>
    <![CDATA[

        import flash.media.Camera;
        import flash.media.Video;
        import mx.events.ListEvent;
         import mx.core.UIComponent; 

        [Bindable]
        private var sourceList:Array = Camera.names;
        private var videoContainer:UIComponent = new UIComponent();
        private var video:Video;
        private var source:Camera;

        private function setDefaultSource():void
        {
            video = new Video(160, 120);
            source = Camera.getCamera();
            video.attachCamera(source);
               videoContainer.addChild(video);
            addChild(videoContainer);
        }

            private function switchSource(event:ListEvent):void
            {
                   videoContainer.addChild(video);
                source = Camera.getCamera(String(sourceListComponent.selectedIndex));
                video.attachCamera(source);    
            }
    ]]>

</mx:Script>
    <mx:List dataProvider="{sourceList}" id="sourceListComponent" itemClick="switchSource(event)" width="100%"></mx:List>

</mx:VBox>

Couple of things to point out – firstly, when switching devices it’s important to recreate the Video instance using addChild() and then reattach the source to that – trying to switch the input without doing this will result in a crash.

Next, notice this line in the switchSource() handler:

Camera.getCamera(String(sourceListComponent.selectedIndex));

According to the Adobe documentation, selecting a source is done by name:

public static function getCamera(name:String = null):Camera

But for some reason this won’t work. Neither will passing in the index as a number as in Flash CS3. I was only able to fix this thanks to Andrew Trice’s multi-camera example – the index has to be passed as a String, i.e. “1”, so I’m just recasting the selectedIndex of the List to a String which seems to work fine.

Now all you need to is add a Microphone object and attach this and the Video source to a NetStream object to create a switched stream. There’s no need to recreate the NetStream when switching, just recreate the Video instance as shown. Combine this component with a screen capture driver like VHScreenCapture and you have a really simple way to switch between one or more webcams and/or your desktop.

Steven Carpenter : 29 Nov 2007 12:55 |  Tags: Flex Rich Media Video |  Comments (0) |  Report a problem