Flex で VideoDisplay を使用してライブ ストリーミング ビデオを表示する方法

Question

VideoDisplay オブジェクト (MXML で定義) を使用して、FMS から NetStream 経由でストリーミングされたビデオを表示する方法を考えています。

の Flex3 ドキュメント これが可能であることを示唆します:

ビデオディスプレイ...HTTP 経由のプログレッシブ ダウンロード、Flash Media Server からのストリーミング、および Camera オブジェクトからのストリーミングをサポートします。

ただし、ドキュメントの後半で確認できるのは、attachCamera() メソッドだけです。古い Video オブジェクトのようなattachStream() メソッドはないようです。

source プロパティを使用すると、HTML 上で提供される固定ファイルを再生できるようですが、NetStream を添付する方法については何も表示されません。

老人 ビデオ オブジェクトはまだ存在しているようですが、UIComponent に基づいておらず、MXML では使用できないようです。

見つけました このブログ投稿 これは通常の Video オブジェクトでそれを行う方法を示していますが、私は VideoDisplay (または MXML に直接配置できる他のもの) を使用することを好みます。

Answer 1

残念ながら、NetStream() を付けることができるのは Video オブジェクトに対してのみです。したがって、FMS からデータを取得したい場合は em を使用することになります。

ちなみにattachCamera()メソッド 出版する ローカルカメラのビデオがサーバーに送信されるので注意してください ;)

Answer 2

VideoDisplay のラッパーです VideoPlayer, 、今度は は ある Video サブクラス。残念ながら、ラッパーにより、既存の NetStream を Video オブジェクトにアタッチできなくなります。

ただし、そのコンポーネントへの参照は、 mx_internal 名前空間なので、次のようにすればうまくいくはずです。

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

(インポートする必要があります mx.core.mx_internal 名前空間)

Answer 3

それは動作します。

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

ビデオディスプレイを通じてライブビデオが表示されます...問題は、既存のネット接続オブジェクトを使用せず、独自のネット接続オブジェクトを作成することです。それが私が回避策を見つけようとしているものです。

Answer 4

ビデオの使用方法の例へのリンクは次のとおりです。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

次のようなサンプルコードが機能するのを見てきました。

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

しかし、実際に自分で操作することはできません。後でわかりましたらここに投稿します。