使用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的主要區別：

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

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

經典應用

一、eBay

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

 

 

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