About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

33 Responses to Displaying a video in Flex using the NetConnection, NetStream, and Video classes

  1. slamice says:

    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. shiv says:

    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. michael says:

    Can we do the same thing with a XML playlist ? if yes how do we do it ?

  5. Carlos says:

    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

  6. kevin says:

    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.

  7. oyun indir says:

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

    http://www.oyunet.net

  8. Vighnesdh says:

    Please provide a html java script version as well of this example if possible thank you.

  9. hugene says:

    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

  10. deenalex says:

    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……

  11. phreed says:

    The example was very helpful.
    I have found that the NetStream really shouldn’t be opened until you are sure you have a good NetConnection.

    _nc.addEventListener(NetStatusEvent.NET_STATUS, onConnectStatusEvent, false);

    Also, to the previous poster… vlc works very nicely.
    http://wiki.videolan.org/Documentation:Streaming_HowTo/Advanced_Streaming_Using_the_Command_Line

  12. Jobin says:

    Hi,

    Ur example was really useful.

    Thanx,

    Best regards,
    Jobin

  13. virendra says:

    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:

  14. virendra says:
    <?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>
  15. arif says:

    quick question, can i send a camera using netstream?

  16. Gallant says:

    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! :)

  17. Mark says:

    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.

  18. Guillermo says:

    When I try to replace the video source http…. for an rtmpe/rtmp it doesn’t work. Why?

  19. Lisa says:

    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

  20. Doug says:

    So, videodisplay is depricated in flex 4. How do you do this with videoplayer?

  21. Muhammad Ramzan says:

    This is a a very simply way to done it. this way is so nice

  22. GJHDigital says:

    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!

    • Peter deHaan says:

      @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

  23. shaktiman says:

    how to coonect video files into a flex

  24. van_tomiko says:

    hey,
    it’s allright when do we want to use VideoDisplay class instead,
    see this post here!

  25. Shiv says:

    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???

    • gude says:

      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.

      • 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;

  26. Jomesili says:

    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

    <!–

    –>

  27. Parthu says:

    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

  28. Jibran says:

    I want the code for streaming live audio radio from internet in my flex blackberry application

  29. Jean Delefrati says:

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

    Greetings from Londrina/Brazil!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree