33 thoughts on “Displaying a video in Flex using the NetConnection, NetStream, and Video classes

  1. This is a very good and simple example! I really do find your blog incredibly useful.

    I’m pretty new to flex and am checking out the video features. I’m seeing everywhere examples (yours being the simplest) on streaming .flv files but hardly any on doing the same for H.264 files. I tried it in this example with its location on my fms and it did not work. Is there anything else I need to add?

    Also, I was wondering if there was any specific reason you put the video in UIComponent instead of just a videoDisplay component?

    Thanks!

  2. Hey, Nice blog. Slamice is right. Even I wanted to know whether it is possible to play H.264 contents on flex.

  3. Shiv: VideoDisplay extends UIComponent, and contains an instance of Video object so you wouldn’t place a Video object inside a VideoDisplay because it would be redundant. The reason it’s added to a UIComponent is because UIComponent is the very top component of Flex. All Flex containers (i.e. Canvas, Panel, HBox, etc) require their children to be a UIComponent as well. Video does not extend from UIComponent, so by itself, it’s not a Flex component. It’s originally a flash component so you have to add it to a UIComponent before adding it to any Flex Component.

    If you are doing simple playback of video VideoDisplay a really easy way to playback simple video. If you are doing something more exotic then Video, NetConnection, NetStream, etc are going to give you more control but they are much harder to use.

  4. Hello, I do not have a lot of experience with Flex and am completely new at using video in any way. I am basing a Flex custom omponent on the above code, but am working with a video that is 23x the size of the sample here.

    I am thinking of some kind of progress bar before the buttons, screen, etc. are visible. I would appreciate any ideas on how to accomplish this.

    Best regards,

    Carlos

  5. Hi,

    Just wondering if I can play two netstreams in one netconnection simultaneously.
    When I tried that, both videos can’t play well. Please advise.

    Thanks.

  6. Is it me or this code should not work:

    in init() the following call is made:

    nsClient.onMetaData = ns_onMetaData;

    whereas as method ns_onMetaData should take an input Object:

    private function ns_onMetaData(item:Object):void {…}

    And, furthermore, ns_onMetaData() returns void, but in init() it is supposed to assign a value to nsClient.onMetaData.

    Am I not understanding basic AS syntax or what?

    Thanks a lot

  7. Hi Everyone,

    Can any one help me to convert any type of Video files into .flv format (i.e) flash video format.

    I mean, if we browse and select any type of video, it (Flex Program) should convert it to .flv format.

    Thanks in Advance……

  8. Hi,
    Very nice blog. I have a problem i want a live video streaming but i m unable to do this. While my code is working properly on local system but when i have upoaded on server it is not creating any file. I think u will solve my problem. I have mentoned my fms path:

  9. <?xml version="1.0″ encoding="utf-8″?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="initApp()" horizontalAlign="center" backgroundColor="#ABCDEF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" viewSourceURL="srcview/index.html">
        <mx:Script>
            <![CDATA[
            // ActionScript file
            import mx.controls.Alert;
            import mx.rpc.http.HTTPService;
     
            import flash.net.ObjectEncoding;
     
            private var nc:NetConnection;
     
            private var camera:Camera;
            private var microphone:Microphone;
            private var nsPublish:NetStream;
            private var nsPlay:NetStream;
            private var videoLocal:Video;
            private var fileName:String;
            //private var curVidFile:File;
            private var newFileNameStr:String;
            //private var desFile:File;
            public var application:Object;
            public var stamp:String = "virendra";
            //NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF3;
            //public var myService:String = new NetConnection();
     
            public function initApp():void
            {
            nc = new NetConnection();
            nc.objectEncoding = flash.net.ObjectEncoding.AMF0;
            nc.connect( "rtmp://viredra.srfms.com/applications/live");
            Alert.show(nc.toString());
     
            }
     
            private function startCamera():void
            {
            camera = Camera.getCamera();
            microphone = Microphone.getMicrophone();
            vcLocal.attachCamera(camera);
            nsPublish = new NetStream(nc);
            nsPublish.attachCamera(camera);
            nsPublish.attachAudio(microphone);
     
            nsPublish.publish("streamer", "record");
     
            }
     
            private function stopCamera():void
            {
            nsPublish.close();
     
            }
     
            private function publish():void
            {
            //publish to local Drupal
            var thisRequest:HTTPService = new HTTPService();
            thisRequest.contentType = "application/xml";
            thisRequest.url = "http://localhost/amfphp/xmlrpc.php";
            thisRequest.method = "POST";
            var strBlogBody:String;
     
            strBlogBody = "" +
            "document.writeln("<object id='"+id+"' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' " +
            "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0' " +
            "width='300' height='300'>");" +
            "document.writeln("<param name='flashvars' value='source=christophe'/>");" +
            "document.writeln("<param name='src' value='/drupal/themes/MediaPlayer.swf'/>");" +
            "document.writeln("<embed name='"+id+"' pluginspage='http://www.macromedia.com/go/getflashplayer' " +
            "src='"+flashFile+"' width='300' height='300'");" +
            "document.write(" flashvars='source=christophe'/>");" +
            "document.writeln("</object>");n"+blogBody.text;
            strBlogBody = escape( strBlogBody );
     
            var XMLString:XMLDocument = new XMLDocument('<methodCall><methodName>metaWeblog.newPost</methodName>'+
            '<params><param><value><string>blog</string></value></param>'+
            '<param><value><string>username</string></value></param>'+
            '<param><value><string>password</string></value></param>'+
            '<param><value><struct>'+
            '<member><name>categories</name><value><array><data><value>java</value></data></array></value></member>'+
            '<member><name>description</name><value>'+strBlogBody+'</value></member>'+
            '<member><name>title</name><value>'+blogTitle.text+'</value></member>'+
            '</struct></value></param>'+
            '<param><value><boolean>true</boolean></value></param></params></methodCall>');
     
            thisRequest.request = XMLString;
            thisRequest.send();
            }
     
            private function play():void
            {
            videoFMS.source = "rtmp://viredra.srfms.com/live/streamer";
            videoFMS.live = true;
            videoFMS.play();
            }
     
            ]]>
        </mx:Script>
        <mx:HBox>
     
            <mx:Panel title="Local WebCam">
                <mx:VideoDisplay id="vcLocal" width="180″ height="120/>
                <!–<VideoContainer id="vcLocal" width="180″ height="120/>–>
                <mx:ControlBar>
                    <mx:Button label="Start" click="startCamera()"/>
                    <mx:Button label="Stop" click="stopCamera()"/>
                    <mx:Button label="Play" click="play()"/>
                </mx:ControlBar>
            </mx:Panel>
     
            <mx:Panel title="Stream from FMS">
                <mx:VideoDisplay id="videoFMS" autoBandWidthDetection="false" width="180″ height="120/>
            </mx:Panel>
        </mx:HBox>
        <mx:Form>
            <mx:FormItem label="Title:">
                <mx:TextInput id="blogTitle"/>
            </mx:FormItem>
            <mx:FormItem label="Body:" width="212″ height="104>
                <mx:TextArea height="101″ width="159″ id="blogBody"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="Publish" click="publish()"/>
            </mx:FormItem>
            <mx:FormItem label="Label">
                <mx:Label text="Label"/>
            </mx:FormItem>
        </mx:Form>
     
    </mx:Application>
  10. Thanks for this.

    I’ve been moving a lot of my actionscript 2.0 mush into nice, clean actionscript 3.0 and this has helped alot.

    Keep on coding! :)

  11. Hi:

    The example was very helpful. I am learning Flex/AS3 and have created a simple Player to play H264 video. I am using var videoFrame:VideoDisplay; in the player. When I set the videoFrame.source property to something like http://myserver.com/test.mp4 all is well. When I try to use a URL like http://myserver.com/getvideo.php?id=12345 (which returns a valid mp4 file with correct http headers etc.) I do not see the video play. I currently use the QT plugin in a web page with URLs like the one above and it works fine.

    If I use an approach like your example with the NetConnection and NetStream objects should the flash player be able to load and play video content that comes from a server script instead of directly from a video file in the servers document root?

    Thanks for any advice.

    Mark

    PS – My SWF file and all the video content and PHP script are in the same location on the server so my assumption is that this not a security issue.

  12. Thanks Peter for a nice and simple example,

    i was just wondering if flex can handle any other streams which are not in .flv formats like the audio streaming links , or streaming audio and video content from a radio station streams
    much like the .asx, .asf files .
    may be the Flex Media Server and Encoder can help me stream such content but is there any other way to stream such content.
    i even checked with OSMF it doesnt seem to support it as well.

    i’ll appreciate your help

    Thanks,
    Lisa

  13. Error loading the demo:
    Severity and Description Path Resource Location Creation Time Id
    unable to open ‘C:….\Flex Builder 3\NetConnection_NetStream_Video_test\libs’
    NetConnection_NetStream_Video_test Unknown 1267650308296 39

    Do I need Flash CS4 for this or is there a .swc I need to download somewhere?

    Thanks in advance!

    1. @GJHDigital,

      No, I just copy/pasted the code into an existing project and it worked fine. If you imported the code via the ZIP file, you may have to double check that your project has a /libs/ folder. I think a few of these earlier ZIP files had a problem where the /libs/ folder wasn’t exporting since it was empty.

      Peter

  14. I have created a flex application. When i play a file in my application it doesnt support full screen and on top of that the you-tube player is separated from flex video player. So both work as seperate players. What do you suggest me to do???

    1. Hi,
      I have a trouble with a h264 video. The video is played only when it’s fully loaded in my browser.
      I tried with your code and also with mx:VideoDisplay. Actually the metadata are received only at the download is complete.
      I also try with the html5 video tag. With the video tag, the first frame appeared subitely when it’s available.
      Is it a known issue of the avc1 codec? I didn’t find much information on the net.

      1. It is common problem of mp4 container for flash video. It happens because MetaData is not at the begining of video file. You should move it using some util. Google for MOOV f4v;

  15. Thank Verindra
    My Stream Live From RED5 to FLEX Client Problem [Solved] from your example. heres what I did. For other who have this problem , just take out what you dont need from my Code

    <!–

    –>

  16. Hi ,

    Can anyone help on this……

    there is player for that i’m displaying a voting widget.if the player to be maximised widget not displaying.i need to display thatone.

    can anyone plzzzz

  17. Thank you a lot! With some modifications, this really helped me develop the final project of my graduate studies.

    Greetings from Londrina/Brazil!

Comments are closed.