使用Flex 和 Red5開發簡單視頻直播功能

Flex 是一個高效、免費的開源框架，可用於構建具有表現力的 Web應用程序，這些應用程序利用Adobe Flash Player和Adobe AIR, 可以實現跨瀏覽器、桌面和操作系統。雖然只能使用 Flex 框架構建 Flex應用程序，但Adobe Flash Builder™（之前稱為 Adobe Flex Builder™）軟件可以通過智能編碼、交互式遍歷調試以及可視設計用戶界面布局等功能加快開發。

使用 Flex 創建的 RIA 可運行於裝有 Adobe Flash Player 插件的瀏覽器中，或運行於跨操作系統的 Adobe AIR上，它們可以跨所有主流瀏覽器、操作系統實現一致的運行。通過利用 AdobeAIR，Flex應用程序可以訪問本地數據和系統資源。

Flex是通過java或者.net等非Flash途徑，解釋.mxml文件，並生成相應的.swf文件。Flex的component和flash的component很相似，但是有所改進增強。目前Macromedia公司已經被ADOBE公司收購。Adobe2013年01月15日將Flex捐給Apache並發布了Apache Flex4.8。

Flex和Flash的主要區別：

1、Flex側重於應用軟件、游戲的開發，flash更側重於網頁web端的展示效果。

2、Flex生成的swf文件較大，不利於網絡傳輸，flash生成的swf文件較小，適合在網站上展示。

經典應用

1、eBay

2、納斯達克股票市場公司

 

 

Red5的主要功能和Macromedia公司的FMS類似，提供基於Flash的流媒體服務的一款基於Java的開源流媒體服務器。它由Java語言編寫，使用RTMP作為流媒體傳輸協議，這與FMS完全兼容。它具有流化FLV、MP3文件，實時錄制客戶端流為FLV文件，共享對象，實時視頻播放、Remoting等功能。用Red5替換FMS后，客戶端不用更改可正常運行。

 

實例：

 

1. 服務器端ApplicationAdapter：示例如下：

package org.jason.flex01; import org.red5.server.adapter.ApplicationAdapter; public class Application extends ApplicationAdapter{ }

 

2.客戶端使用Flex實現攝像頭獲取視頻並發布代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">
    <mx:Script>
        <!--[CDATA[ import flash.net.NetConnection; import flash.net.NetStream; import flash.events.NetStatusEvent; import mx.controls.Alert; private var nc:NetConnection; private var ns:NetStream; private var cam:Camera; private function init():void{ nc = new NetConnection(); nc.addEventListener(NetStatusEvent.NET_STATUS,connectServerHander); nc.client = this; nc.connect("rtmp://58.116.56.68:1935/Flex01"); } private function connectServerHander(evt:NetStatusEvent):void{ trace(evt.info.code); cam = Camera.getCamera(); if(cam != null){ cam.setMode(313,194,30); cam.setQuality(0,70); ns = new NetStream(nc); ns.attachCamera(cam); ns.publish("red5"); var vi:Video = new Video(); vi.width = 313; vi.height = 194; vi.attachCamera(cam); videoDisplay.addChild(vi); }else{ Alert.show("no Camera"); } } public function onBWDone():void{ } ]]-->
    </mx:Script>
    
    <mx:VideoDisplay x="162" y="77" width="313" height="194" id="videoDisplay"/>
    
</mx:Application>

 

客戶端使用Flex play視頻代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()">

    <mx:Script>
        <!--[CDATA[ import flash.display.*; import flash.utils.*; import flash.events.*; import flash.net.*; import flash.media.Video; import flash.media.Camera; private var nc:NetConnection; private function init():void{ nc = new NetConnection(); nc.connect("rtmp://58.116.56.68:1935/Flex01"); nc.addEventListener(NetStatusEvent.NET_STATUS,connectHandler); } private function connectHandler(evt:NetStatusEvent):void{ var ns:NetStream = new NetStream(nc); var video:Video=new Video() ; video.width = 313; video.height = 194; video.attachNetStream(ns); ns.play("red5"); videoDisplay.addChild(video); } ]]-->
    </mx:Script>
    
    <mx:Panel x="132" y="78" width="356" height="266" layout="absolute" title="現場直播" fontSize="14">
        <mx:VideoDisplay x="10" y="10" width="320" height="193" id="videoDisplay"/>
    </mx:Panel>
    
</mx:Application>

 

參考：Flex語法 --> http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

red5流媒體服務器的搭建--->  http://blog.csdn.net/oldmtn/article/details/47110351

   http://blog.sina.com.cn/s/blog_4829b9400100rmz0.html