如何在Flex中使用VideoDisplay显示实时流式视频
我想知道如何使用VideoDisplay对象(在MXML中定义)显示通过NetStream从FMS流式传输的视频。
Flex3文档建议这样做是可能的:
The Video Display ... supports progressive download over HTTP, streaming from the Flash Media Server, and streaming from a Camera object.
但是,在文档的后面,我所看到的只是attachCamera()方法。似乎没有旧的Video对象具有的attachStream()方法。
看起来我们可以使用source属性播放通过HTML提供的固定文件,但是我看不到有关如何添加NetStream的任何信息。
旧的Video对象似乎仍然存在,尽管它不是基于UIComponent的,并且似乎无法在MXML中使用。
我找到了这篇博客文章,展示了如何使用常规Video对象执行此操作,但是我更喜欢使用VideoDisplay(或者可以直接放在MXML中的其他内容)。
解决方案
回答
不幸的是,我们只能在Video对象上添加NetStream()。因此,如果我们想从FMS中获取数据,则注定要使用em。
顺便说一下,attachCamera()方法会将本地摄像机视频发布到服务器,因此请小心;)
回答
有用。
mx:VideoDisplay live =" true" autoPlay =" true" source =" rtmp://server.com/appname/streamname" />
它将通过视频显示器为我们提供实时视频...问题是它将不使用现有的netconnection对象,而是创建自己的对象...这就是我想要解决的问题。
回答
我已经看到了类似以下示例的示例代码:
// 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 );
但实际上我无法自己使用它。如果可以的话,我会在后面发布。
回答
VideoDisplay是VideoPlayer的包装,而VideoPlayer是Video的子类。不幸的是,包装器阻止我们将现有的NetStream添加到Video对象。
但是,对该组件的引用保存在mx_internal`命名空间中,因此以下方法可以解决问题:
videoDisplay.mx_internal::videoPlayer.attachNetStream(incomingStream); videoDisplay.mx_internal::videoPlayer.visible = true;
(我们需要导入mx.core.mx_internal
名称空间)
回答
以下是有关如何使用视频的示例的链接:
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>