How to display a live streaming video using VideoDisplay in Flex

Question

I'm wondering how to use a VideoDisplay object (defined in MXML) to display video streamed from FMS via a NetStream.

The Flex3 docs suggest this is possible:

The Video Display ... supports progressive download over HTTP, streaming from the Flash Media Server, and streaming from a Camera object.

However, later in the docs all I can see is an attachCamera() method. There doesn't appear to be an attachStream() method like the old Video object has.

It looks like you can play a fixed file served over HTML by using the source property, but I don't see anything about how to attach a NetStream.

The old Video object still seems to exist, though it's not based on UIComponent and doesn't appear to be usable in MXML.

I found this blog post that shows how to do it with a regular Video object, but I'd much prefer to use VideoDisplay (or something else that can be put directly in the MXML).

Answer 1

Unfortunately you can attachNetStream() only on Video object. So you are doomed to use em if you want to get data from FMS.

By the way attachCamera() method publishes local camera video to the server so be careful ;)

Answer 2

@Artem:

Yea, I got it working with Video. It just annoys me that I can't have it defined cleanly in the MXML. Oh well.

Answer 3

it works.

mx:VideoDisplay live="true" autoPlay="true" source="rtmp://server.com/appname/streamname" />

that will give you live video through a videodisplay... problem is it won't use an existing netconnection object, it creates it's own... which is what I'm trying to find a work around for.

Answer 4

I've seen sample code where something like this works:

// Connect to the video stream in question.
var stream:NetStream = new NetStream( chatNC );
stream.addEventListener( NetStatusEvent.NET_STATUS, handleStreamStatus );
stream.addEventListener( IOErrorEvent.IO_ERROR, handleIOError );

// Build the video player on the UI.
var video:Video = new Video(246, 189);
var uiComp:UIComponent = new UIComponent();
uiComp.addChild( video );
uiComp.width = 246;
uiComp.height = 189;
stream.play( streamName );
video.attachNetStream( stream );
video.smoothing = true;
video.width = 246;
video.height = 189;
view.videoPlayerPanel.removeAllChildren();
view.videoPlayerPanel.addChild( uiComp );

But I can't actually get it to work myself. I'll post here later if I can figure it out.

Answer 5

VideoDisplay is a wrapper on VideoPlayer, which in turn is a Video subclass. Unfortunately, the wrapper prevents you from attaching an existing NetStream to the Video object.

However, a reference to that component is held with in the mx_internal namespace, so the following should do the trick:

videoDisplay.mx_internal::videoPlayer.attachNetStream(incomingStream);
videoDisplay.mx_internal::videoPlayer.visible = true;

(you need to import the mx.core.mx_internal namespace)

Answer 6

Here a link to example on how to use video: http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white"
    creationComplete="init();">

<mx:Script>
<![CDATA[
    import mx.utils.ObjectUtil;

    private var nc:NetConnection;
    private var ns:NetStream;
    private var video:Video;
    private var meta:Object;

    private function init():void {
    var nsClient:Object = {};
    nsClient.onMetaData = ns_onMetaData;
    nsClient.onCuePoint = ns_onCuePoint;

    nc = new NetConnection();
    nc.connect(null);

    ns = new NetStream(nc);
    ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");
    ns.client = nsClient;

    video = new Video();
    video.attachNetStream(ns);
    uic.addChild(video);
    }

    private function ns_onMetaData(item:Object):void {
    trace("meta");
    meta = item;
    // Resize Video object to same size as meta data.
    video.width = item.width;
    video.height = item.height;
    // Resize UIComponent to same size as Video object.
    uic.width = video.width;
    uic.height = video.height;
    panel.title = "framerate: " + item.framerate;
    panel.visible = true;
    trace(ObjectUtil.toString(item));
    }

    private function ns_onCuePoint(item:Object):void {
    trace("cue");
    }
]]>
</mx:Script>

<mx:Panel id="panel" visible="false">
    <mx:UIComponent id="uic" />
    <mx:ControlBar>
    <mx:Button label="Play/Pause" click="ns.togglePause();" />
    <mx:Button label="Rewind" click="ns.seek(0); ns.pause();" />
    </mx:ControlBar>
</mx:Panel>
</mx:Application>