Как показать потоковое видео в реальном времени с помощью VideoDisplay в Flex

Question

Мне интересно, как использовать объект VideoDisplay (определенный в MXML) для отображения видео, передаваемого из FMS через NetStream.

The Flex3 docs предполагают, что это возможно:

The Video Display ... поддерживает прогрессивную загрузку по HTTP, потоковое воспроизведение с Flash Media Server, а также потоковое из объекта Camera.

Однако позже в документах все, что я вижу, является методом attachCamera(). Не похоже, что метод attachStream() похож на старый объект Video.

Похоже, что вы можете воспроизводить файл с фиксированным файлом, который обрабатывается через HTML, используя свойство source, но я ничего не вижу о том, как присоединить NetStream.

Старый объект Video все еще существует, хотя он не основан на UIComponent и не может использоваться в MXML.

Я нашел this blog post, который показывает, как это сделать с помощью обычного видеообъекта, но я бы предпочел использовать VideoDisplay (или что-то еще, которое можно поместить непосредственно в MXML).

Answer 1

К сожалению, вы можете прикрепитьNetStream() только к объекту Video. Таким образом, вы обречены использовать em, если хотите получать данные из FMS.

По методу путь attachCamera() публикует местные видеокамеры к серверу, поэтому будьте осторожны;)

Answer 2

это работает.

тх: VideoDisplay жить = "истинный" AutoPlay = "истинный" источник = "RTMP: //server.com/appname/streamname" />

, который даст вам видео в реальном времени через видеодисплей ... проблема в том, что он не будет использовать существующий объект netconnection, он создает его собственный ... вот что я пытаюсь найти для работы.

Answer 3

Я видел образец кода, где-то, как это работает:

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

Но я не могу на самом деле заставить его работать сам. Я отправлю сюда позже, если смогу это понять.

Answer 4

VideoDisplay обертка на VideoPlayer, который, в свою очередь, является Video подкласс. К сожалению, оболочка не позволяет подключить существующий NetStream к объекту Video.

Однако ссылка на этот компонент проводится с в mx_internal пространства имен, так что следующий должен сделать трюк:

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

(вы должны импортировать mx.core.mx_internal имен)

Answer 5

Здесь ссылка к примеру о том, как использовать видео: 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>