reproduzca - Cómo mostrar un video en tiempo real usando VideoDisplay en Flex

insertar video en html5

Question

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

Los documentos de Flex3 sugieren que esto es posible:

La pantalla de video ... admite la descarga progresiva a través de HTTP, la transmisión desde el servidor multimedia Flash y la transmisión desde un objeto de la cámara.

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 está basado en UIComponent y no parece ser utilizable en MXML.

Encontré esta publicación de blog que muestra cómo hacerlo con un objeto de video normal, pero preferiría usar VideoDisplay (o cualquier otra cosa que pueda colocarse directamente en el MXML).

Answer 1

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

Por cierto, el método attachCamera () publica el video de la cámara local en el servidor, así que ten cuidado;)

Answer 2

funciona.

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

que te dará un video en vivo a través de un videojuego ... 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

He visto código de ejemplo donde 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 no puedo hacer que funcione yo solo. Voy a publicar aquí más tarde si puedo resolverlo.

Answer 4

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

Sin embargo, se mantiene una referencia a ese componente en el espacio de nombres mx_internal , por lo que lo siguiente debería ser el truco:

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

(debe importar el espacio de nombres mx.core.mx_internal )

Answer 5

Aquí un enlace al ejemplo sobre cómo usar 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>