Comment afficher une vidéo en streaming en direct à l'aide de VideoDisplay dans Flex

Question

Je me demande comment utiliser un objet VideoDisplay (défini dans MXML) pour afficher la vidéo diffusée depuis FMS via un NetStream.

Le Documents Flex3 suggère que c'est possible:

L'affichage vidéo...prend en charge le téléchargement progressif via HTTP, la diffusion en continu à partir de Flash Media Server et la diffusion en continu à partir d'un objet Caméra.

Cependant, plus tard dans la documentation, tout ce que je peux voir est une méthode attachCamera().Il ne semble pas y avoir de méthode attachStream() comme l’ancien objet Video.

Il semble que vous puissiez lire un fichier fixe servi sur HTML en utilisant la propriété source, mais je ne vois rien sur la façon de joindre un NetStream.

L'ancien Vidéo L'objet semble toujours exister, bien qu'il ne soit pas basé sur UIComponent et ne semble pas être utilisable en MXML.

j'ai trouvé ce billet de blog cela montre comment le faire avec un objet Video classique, mais je préférerais de loin utiliser VideoDisplay (ou quelque chose d'autre qui peut être mis directement dans le MXML).

Answer 1

Malheureusement, vous ne pouvez attacherNetStream() qu'à un objet vidéo.Vous êtes donc condamné à les utiliser si vous souhaitez obtenir des données de FMS.

Au fait, méthode attachCamera() publie vidéo de la caméra locale vers le serveur alors soyez prudent ;)

Answer 2

VideoDisplay est un emballage sur VideoPlayer, lequel, à son tour est un Video sous-classe.Malheureusement, le wrapper vous empêche d'attacher un NetStream existant à l'objet Video.

Cependant, une référence à ce composant est conservée dans le mx_internal espace de noms, donc ce qui suit devrait faire l'affaire :

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

(vous devez importer le mx.core.mx_internal espace de noms)

Answer 3

Ça marche.

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

qui vous donnera une vidéo en direct via un écran vidéo...le problème est qu'il n'utilisera pas un objet de connexion réseau existant, il crée le sien...c'est pour cela que j'essaie de trouver une solution.

Answer 4

Voici un lien vers un exemple d'utilisation de la vidéo :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

J'ai vu un exemple de code où quelque chose comme ceci fonctionne :

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

Mais je n'arrive pas à le faire fonctionner moi-même.Je posterai ici plus tard si j'arrive à comprendre.