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

Question

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

这 Flex3 文档 建议这是可能的：

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

然而，在文档后面我能看到的只是一个 AttachCamera() 方法。似乎没有像旧 Video 对象那样的 AttachStream() 方法。

看起来您可以使用 source 属性播放通过 HTML 提供的固定文件，但我没有看到有关如何附加 NetStream 的任何内容。

老人 视频 对象似乎仍然存在，尽管它不是基于 UIComponent 并且似乎无法在 MXML 中使用。

我发现 这篇博文 它展示了如何使用常规 Video 对象执行此操作，但我更喜欢使用 VideoDisplay （或其他可以直接放入 MXML 中的东西）。

Answer 1

不幸的是，您只能在 Video 对象上 AttachNetStream() 。所以如果你想从FMS获取数据你就注定要使用em。

顺便说一下attachCamera()方法 出版 本地摄像头视频传输到服务器，所以要小心；）

Answer 2

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

但是，对该组件的引用保留在 mx_internal 命名空间，因此以下应该可以解决问题：

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

（您需要导入 mx.core.mx_internal 命名空间）

Answer 3

有用。

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

这将通过视频显示器为您提供实时视频......问题是它不会使用现有的网络连接对象，它创建自己的......这就是我试图找到解决方法的原因。

Answer 4

以下是有关如何使用视频的示例的链接：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>

Answer 5

我见过示例代码，其中类似的内容有效：

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

但我自己实际上无法让它发挥作用。如果我能弄清楚的话，我稍后会在这里发帖。