Question

I’m having trouble to resize my custom UIComponent that wrap flash.media.Video object (The reason I choose this way is because mx.control.VideoDisplay doesn’t support streaming playback that available in flash.media.Video that is attachNetStream()). Once I create a 320×240 Video size and remove it from its parent, I can’t replace it with another one, bigger or smaller.

Here’s my code (this one only capture Camera not NetStream).

package media
{
    import flash.media.Camera;
    import flash.media.Video;

    import mx.controls.VideoDisplay;
    import mx.core.UIComponent;

    public class VideoUI extends UIComponent
    {
        private var video:Video;

        public function VideoUI(width:int, height:int)
        {
            super();
            video = new Video(width, height);
            var cam:Camera = Camera.getCamera();
            video.attachCamera(cam);
            addChild(video);
        }
    }
}

The other part,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import media.VideoUI;

            private function addVideoOutput():void
            {
                // initial video size
                var video:VideoUI = new VideoUI(160,120);
                HBoxVideo.addChild(video);              
            }

            protected function resizeVideo(event:MouseEvent):void
            {
                var videoList:Array = HBoxVideo.getChildren();
                for (var i:int = 0; i < videoList.length; i++)
                {
                    var video:VideoUI = videoList.pop();
                    HBoxVideo.removeChild(video);
                    // new size that produce the previous size :(
                    video = new VideoUI(320, 240);
                    HBoxVideo.addChild(video);
                }
            }

        ]]>
    </mx:Script>
    <mx:Button click="addVideoOutput()" x="10" y="265" label="add"/>
    <mx:HBox x="10" y="10" width="100%" id="HBoxVideo">
    </mx:HBox>
    <mx:Button x="58" y="265" label="resize" click="resizeVideo(event)" id="resizeButton"/>
</mx:Application>

Thank you very much.

Answer 1

By default, new instances of the Video class are 320 pixels wide by 240 pixels high. You will need access to your video in the VideoUI Class so that you can change the width and height.

As follows:

Change all appearances of your video variable in VideoUI.as to

_video

and apply a getter.

New Video UI Class

package media
{
    import flash.media.Camera;
    import flash.media.Video;

    import mx.core.UIComponent;

    public class VideoUI extends UIComponent
    {
        private var _video:Video;

        public function VideoUI(width:int, height:int)
        {
            super();
            _video = new Video(width, height);
            var cam:Camera = Camera.getCamera();
            _video.attachCamera(cam);
            addChild(_video);
        }

        public function get video():Video{
            return _video;
        }
    }
}

Replace in your main mxml file

video = new VideoUI(320, 240);

with

video.video.width=320;
video.video.height=240;

Note: You should rename your VideoUI instance to videoui or the sorts. It is a little confusing. You can also move this to your VideoUI Class or make a method. The choice is yours.