views:

10318

answers:

6

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).

+2  A: 

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

Artem Tikhomirov
A: 

@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.

Herms
Actually you can do it in MXML. Simply wrap it in UIComponent-based class and use it in your markup.
Artem Tikhomirov
That's what I did. There's a UIComponent in the MXML, and I attach the video there. It's still not as clean as just defining the Video object directly in the MXML, and that's my complaint.
Herms
I've tried this and the video displays really small (10x10 maybe). Both the video and the uicomponent are created with a size of 640x480, any ideas why this is happening?
Pablote
well I fixed it, I had to set the size of both the video and the uicomponent again after playing the netstream, wierd
Pablote
+3  A: 

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.

also you can edit the source of the flymy_vid.source = "rtmp://server.com/appname/"+stream_name;like so... still doesn't fix the new NC for each display issue though.
A: 

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.

Ken Smith
+3  A: 

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)

Cosma Colanicchia
This works perfectly! Really ought to be the accepted answer. Thank you Cosma.
Nicky Hajal
A: 

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>
Alexander Farber