Cómo mostrar un video de transmisión en vivo usando VideoDisplay en Flex

Question

Me pregunto cómo usar un objeto VideoDisplay (definido en MXML) para mostrar videos transmitidos desde FMS a través de un NetStream.

El Flex3 docs sugieren que esto es posible:

la pantalla de vídeo ... admite la descarga progresiva a través de HTTP, streaming desde Flash Media Server y que fluye de un objeto Camera.

Sin embargo, más adelante en los documentos, todo lo que puedo ver es un método attachCamera(). No parece haber un método attachStream() como el antiguo objeto Video.

Parece que puede reproducir un archivo fijo servido en HTML utilizando la propiedad de origen, pero no veo nada sobre cómo adjuntar un NetStream.

El antiguo objeto Video todavía parece existir, aunque no se basa en UIComponent y no parece ser utilizable en MXML.

Encontré this blog post que muestra cómo hacerlo con un objeto de video normal, pero prefiero usar VideoDisplay (o cualquier otra cosa que se pueda poner directamente en el MXML).

Answer 1

Desafortunadamente, puede conectar NetStream() solo en el objeto Video. Por lo tanto, está condenado a usar em si desea obtener datos de FMS.

Por el método de manera attachCamera() publica cámara de vídeo local en el servidor así que ten cuidado;)

Answer 2

funciona.

mx: VideoDisplay vivo = "true" autoPlay = "true" fuente = "RTMP: //server.com/appname/streamname" />

que le dará vídeo en directo a través de un videorepresentación ... El problema es que no usará un objeto de conexión de red existente, sino que lo crea ... que es lo que estoy tratando de encontrar.

Answer 3

que he visto en el código de ejemplo algo como esto funciona:

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

Pero en realidad no puede conseguir que funcione a mí mismo. Voy a publicar aquí más tarde si puedo resolverlo.

Answer 4

VideoDisplay es un envoltorio de VideoPlayer, que a su vez es una subclase Video. Desafortunadamente, el envoltorio evita que conecte un NetStream existente al objeto Video.

Sin embargo, una referencia a ese componente se lleva a cabo con la mx_internal espacio de nombres, por lo que el siguiente debe hacer el truco:

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

(es necesario importar el espacio de nombres mx.core.mx_internal)

Answer 5

Aquí un enlace a ejemplo de cómo utilizar el 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>