如何在Flex中使用VideoDisplay显示实时流式视频

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

我想知道如何使用VideoDisplay对象(在MXML中定义)来显示通过NetStream从FMS流式传输的视频。

The Flex3 docs suggest this is possible:

Flex3文档建议这是可能的:

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

视频显示器...支持通过HTTP进行渐进式下载,从Flash Media Server进行流式传输以及从Camera对象进行流式传输。

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.

但是,稍后在文档中我可以看到的是attachCamera()方法。似乎没有像旧的Video对象那样的attachStream()方法。

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.

看起来您可以使用source属性播放通过HTML提供的固定文件,但我没有看到有关如何附加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.

旧的Video对象似乎仍然存在,虽然它不是基于UIComponent,并且似乎不能在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).

我发现这篇博文显示了如何使用常规的Video对象,但我更喜欢使用VideoDisplay(或者可以直接放在MXML中的其他东西)。

5 个解决方案

#1

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

不幸的是,您只能在Video对象上附加NetStream()。因此,如果您想从FMS获取数据,那么您注定要使用em。

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

顺便说一下,attachCamera()方法将本地摄像头视频发布到服务器,所以要小心;)

#2

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.

VideoDisplay是VideoPlayer的包装器,而VideoPlayer又是一个Video子类。不幸的是,包装器阻止您将现有的NetStream附加到Video对象。

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

但是,在mx_internal命名空间中保存对该组件的引用,因此以下应该可以解决这个问题:

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

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

(您需要导入mx.core.mx_internal命名空间)

#3

it works.

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

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.

这将通过视频显示给你实时视频...问题是它不会使用现有的netconnection对象,它创建它自己...这是我正在努力找到一个解决方案。

#4

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/

这里有一个关于如何使用视频的示例的链接: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>

#5

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.

但我实际上无法让自己工作。如果我能搞清楚的话,我会稍后发布。

#1