Как отобразить потоковое видео в реальном времени с помощью VideoDisplay в Flex
Вопрос
Мне интересно, как использовать объект VideoDisplay (определенный в MXML) для отображения видео, передаваемого из FMS через NetStream.
Тот Самый Документы Flex3 предполагаю, что это возможно:
Видеодисплей ...поддерживает прогрессивную загрузку по протоколу HTTP, потоковую передачу с Flash Media Server и потоковую передачу с объекта Камеры.
Однако позже в документах все, что я вижу, - это метод attachCamera().Похоже, что метода attachStream(), подобного старому объекту Video, не существует.
Похоже, вы можете воспроизвести фиксированный файл, передаваемый поверх HTML, используя свойство source, но я ничего не вижу о том, как подключить NetStream.
Старый Видео объект, похоже, все еще существует, хотя он не основан на UIComponent и, похоже, не может быть использован в MXML.
Я нашел это сообщение в блоге это показывает, как это сделать с обычным объектом Video, но я бы предпочел использовать VideoDisplay (или что-то еще, что можно поместить непосредственно в MXML).
Решение
К сожалению, вы можете прикрепить NetStream() только к объекту Video.Таким образом, вы обречены использовать em, если хотите получать данные из FMS.
Кстати, метод attachCamera() публикует локальное видео с камеры передается на сервер, так что будьте осторожны ;)
Другие советы
VideoDisplay
есть ли обертка на VideoPlayer
, который , в свою очередь является a Video
подкласс.К сожалению, оболочка не позволяет вам присоединить существующий NetStream к видеообъекту.
Однако ссылка на этот компонент хранится с помощью в mx_internal
пространство имен, поэтому следующее должно сработать:
videoDisplay.mx_internal::videoPlayer.attachNetStream(incomingStream);
videoDisplay.mx_internal::videoPlayer.visible = true;
(вам необходимо импортировать mx.core.mx_internal
пространство имен)
это работает.
mx: ВидеоДисплей в прямом эфире="true" Автозапуск="true" источник="rtmp://server.com/appname/streamname" />
это даст вам видео в реальном времени через видеодисплей...проблема в том, что он не будет использовать существующий объект netconnection, он создаст свой собственный...именно для этого я и пытаюсь найти обходной путь.
Вот ссылка на пример того, как использовать видео: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>
Я видел пример кода, где работает что-то подобное:
// 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 );
Но на самом деле я не могу заставить это работать сам.Я напишу здесь позже, если смогу разобраться в этом.