手把手系列：打造基于FMS2的視頻聊天室(二)

1、第一講：頁面編寫編寫應(yīng)用性軟件，頁面的布局、相關(guān)組件的擺放等因素相當(dāng)重要，它將直接影響到用戶的使用體驗，然而，對于程序員來說，頁面的編寫也是一項極其繁雜的工作?；谶@個原因，一些可以快速構(gòu)建頁面的編程語言和工具也應(yīng)用而生。例如：SpringRichClient（一種可以快速構(gòu)建Swing程序的工具）、各種IDE的頁面部件拖拽功能等。Adobe出品的MXML語言也是這樣一種工具：它可以幫助程序員快速的構(gòu)建頁面，而使用起來就和HTML一樣簡單。在編寫前，大家可以參考Flex SDK自帶的Component Exlorer，那里面對所有的頁面部件都進行了詳細的講解并提供了相當(dāng)優(yōu)秀的示例本軟件的頁面主

2、要應(yīng)用了幾個常用的元素：HBOX、VBOX、Panel、List、Button下面是整體頁面代碼：<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="absolute" fontSize="12" width="80%" height="50%" horizontalAlign="center" verticalAlign=

3、"middle" creationComplete="init()"><mx:Script><!CDATA/這里盛放代碼，后面講解的所有代碼都將放到此位置></mx:Script><mx:HBox width="100%" height="100%"><mx:Panel height="100%" width="10%" title="在線用戶列表"><mx:VBox width=&q

4、uot;100%" height="100%"><mx:List id="users" width="100%" height="90%" cachePolicy="off"></mx:List><mx:Button label="和選中人聊天" id="chat" click="chatWith()"/></mx:VBox></mx:Panel><mx:

5、HBox width="90%" height="100%"><mx:Panel title="對方視頻" width="50%" height="100%" horizontalAlign="center" backgroundColor="cyan"><mx:VideoDisplay width="80%" height="100%" id="remoteVideo"

6、maintainAspectRatio="false"/></mx:Panel><mx:Panel title="本地視頻" width="50%" height="100%" horizontalAlign="center" backgroundColor="cyan"><mx:VideoDisplay width="80%" height="100%" id="localVideo&qu

7、ot; maintainAspectRatio="false"/></mx:Panel></mx:HBox></mx:HBox></mx:Application>各位可以先不用管那些事件方法，例如：chatWith()、init()等。本頁面編寫要素：Ø 利用HBOX、VBOX作為整體框架Ø Panel作為部件容器Ø 相對百分比控制部件尺寸下一講：連接FMS服務(wù)器成功后實現(xiàn)本地視頻的播放第二講：連接FMS服務(wù)器成功后實現(xiàn)本地視頻的播放利用ActionScript 3和VideoDisplay

8、元素可以很容易的實現(xiàn)本地視頻的播放；至于和FMS的連接，AS3里也有相關(guān)的API供使用。以本軟件為例：連接FMS服務(wù)器的代碼放到了init()方法，即：頁面初始化完成后將觸發(fā)FMS的連接動作首先定義程序變量：/與FMS之間通訊的橋梁對象(后面會詳細講解此對象的用處)private var fmsObj:Object = new Object();/與FMS相連的connection對象private var fmsConn:NetConnection = new NetConnection();/播放到FMS的視頻流（此stream負責(zé)采集本地視頻并傳送到FMS服務(wù)器）private var

9、fmsStream:NetStream = null;/FMS連接串(例如rtmp://videochat)private var fmsUrl:String = null;/連接的用戶名(在線用戶名)private var userName:String = null;/用戶在線數(shù)據(jù)private static var userData:ArrayCollection = new ArrayCollection();編寫init()方法實現(xiàn)FMS的連接：private function init():void /HTML傳參，后面講解fmsUrl = Application

10、.application.parameters.fms;/HTML傳參，后面講解userName = Application.application.parameters.user;/定義客戶端與FMS端通訊的client對象（后面講解）fmsConn.client = fmsObj;fmsObj.userUpLine = upLine;fmsObj.userDownLine = downLine;/必須設(shè)置，原因：FMS端AS和客戶端AS的版本不統(tǒng)一fmsConn.objectEncoding = ObjectEncoding.AMF0; /開始連接FMS服務(wù)器fmsConn.connect

11、(fmsUrl,userName) ; /網(wǎng)絡(luò)連接事件處理器(后面會有connectFMS的實現(xiàn)) fmsConn.addEventListener(NetStatusEvent.NET_STATUS,connectFMS) ;connectFMS()的實現(xiàn)：private function connectFMS(e:NetStatusEvent):void var result:String = .code ;switch(result) case "NetConnection.Connect.Success":playStream(); break;defa

12、ult : break ;playStream()的實現(xiàn)：private var camera:Camera = null;/攝像頭對象private var mic:Microphone = null;/麥克風(fēng)對象private var showVideo:Video = null;/遠程視頻的呈現(xiàn)對象private function playStream():void fmsStream = new NetStream(fmsConn);/創(chuàng)建連接FMS的stream對象camera = Camera.getCamera();/獲取機器默認的攝像頭if(camera = null) Ale

13、rt.show("未檢測到攝像頭，請確認攝像頭已被正確安裝");mic = Microphone.getMicrophone();/獲取機器默認的麥克風(fēng)if(mic = null) Alert.show("未檢測到MIC，請確認MIC已被正確安裝");if(camera != null) camera.setMode(320,240,15);/分辨率：320*240 每秒15幀camera.setQuality(100 * 1000,90);/設(shè)置視頻質(zhì)量if(mic != null) mic.setUseEchoSuppression(true); /

14、本地視頻播放的實現(xiàn)，將cameraattach到videodisplay即可localVideo.attachCamera(camera); fmsStream.attachCamera(camera);fmsStream.attachAudio(mic);/將本地視頻發(fā)布到FMS上，發(fā)布的音視頻流名字是在線的用戶名fmsStream.publish(userName,"live");上面涉及到的類和相關(guān)API可以參照手冊：Adobe_Flex_2.0.1_Language_Reference_F.chm如需要的話，可mail： 索取下一講：在線用戶功能的實

15、現(xiàn)第三講：在線用戶功能的實現(xiàn)本功能的實現(xiàn)主要是利用FMS服務(wù)端ActionScript和客戶端client對象的交互編寫服務(wù)端ActionScript/此方法在連接到FMS時觸發(fā)application.onConnect = function(newClient, name) newC = name; /接受客戶端的連接 application.acceptConnection(newClient);var msg = "Hello! You are connected as: " + newC;trace("Sending

16、 this message: " + newClient);for(i=0;i<application.clients.length;i+) for(j=0;j<application.clients.length;j+) if(!= )application.clientsi.call("userUpLine",null,);下面解釋重要代碼的含義Ø application.onConnect

17、在客戶端連接到FMS時觸發(fā) function(newClient, name) name的值來自客戶端代碼Ø fmsConn.connect(fmsUrl,userName);中的userNameØ trace方法后的兩個for循環(huán)作用：每次有客戶端連接到FMS時，都將調(diào)用客戶端的userUpLine方法，其中userUpLine方法在客戶端代碼 fmsConn.client = fmsObj; fmsObj.userUpLine = upLine;中定義，其中真正的實現(xiàn)是客戶端的upLine 訣竅：在ActionScript中，所有Object的本質(zhì)都是一個Diction

18、ary，它可以動態(tài)的添加或刪除屬性，利用此特性，客戶端對象（fmsObject）很多方法的添加都顯得那樣簡單客戶端upLine方法實現(xiàn)：處理用戶列表在List元素上顯示注意：user:String的參數(shù)值來自于服務(wù)端的傳入，其他的邏輯請自行查閱private function upLine(user:String):void if(user = userName) return;/判斷是否已經(jīng)存在上線的用戶var isHaveThisUser:Boolean = false; var temp:Object = new Object();tem

19、p.label = user;temp.data = user;var i:int = 0;if(userData.length = 0) userData.addItem(temp);isHaveThisUser = true; else for(i = 0; i < userData.length; i+) if(userData.getItemAt(i).label = user) isHaveThisUser = true;break;if(isHaveThisUser = false) userData.addItem(temp);Alert.show(userData.len

20、gth + "");users.invalidateList();users.invalidateDisplayList();users.dataProvider = null;users.dataProvider = userData;下一講：點擊在線用戶進行視頻聊天第四講：點擊在線用戶進行視頻聊天本功能主要是根據(jù)點擊的用戶獲得到相應(yīng)的NetStream，然后利用VideoDisplay來播放當(dāng)選擇在線用戶并點擊和此人聊天按鈕時，觸發(fā)chatWith()方法private var remoteStream:NetStream = null;/選中用戶的NetStream/

21、需要呈現(xiàn)在VideoDisplay上的對方視頻對象private var video:Video = new Video();private function chatWith():void if(users.selectedItem != null) if(remoteStream = null) else remoteStream.close();remoteStream = null;remoteStream = new NetStream(fmsConn);/緩沖3秒再播放，保證視頻流暢的重要設(shè)置remoteStream.bufferTime = 3;/將NetStream附加到vid

22、eo視頻對象中video.attachNetStream(remoteStream);video.width = remoteVideo.width;video.height = remoteVideo.height;video.smoothing = true; /將視頻對象附加中VideoDisplay中remoteVideo.addChild(video);/播放名字為：users.selectedItem.data的音視頻流水/注意：前面我們發(fā)布此流是用戶名命名/而用戶列表中盛放的也是用戶名remoteStream.play(users.selectedItem.data) else

23、Alert.show("請選中人");下一講：HTML傳參第五講：HTML傳參本文檔講解如何利用HTML為Flex應(yīng)用傳遞參數(shù)每一個flash在HTML中的嵌入大多都以object方式，object有一個屬性flashvars，此屬性可攜帶參數(shù)并由flex程序獲得其中參數(shù)的傳遞是以標(biāo)準(zhǔn)URL方式組成：flashvars="user=wangjing&fms=rtmp://videochat"在Flex程序中獲得此參數(shù)值的代碼是：Application.application.parameters.fms;/獲得fms值，即：rt

24、mp://videochatApplication.application.parameters.user;/獲得user值，即：wangjing這樣我們可以利用一些動態(tài)腳本語言（如：jsp、asp、php等）為某些節(jié)點賦值，F(xiàn)lex可以根據(jù)這些值來動態(tài)的配置自身的屬性下面是一個標(biāo)準(zhǔn)的HTML嵌入完整的代碼，注意：里面有多處flashvars需要修改<!- saved from url=(0014)about:internet -><html lang="en"><!- Smart developers always View

25、 Source. This application was built using Adobe Flex, an open source frameworkfor building rich Internet applications that get delivered via theFlash Player or to desktops via Adobe AIR. Learn more about Flex at / -><head><meta http-equiv="Content-Type" content="text/html;

26、 charset=utf-8" /><!- BEGIN Browser History required section -><link rel="stylesheet" type="text/css" href="history/history.css" /><!- END Browser History required section -><title></title><script src="AC_OETags.js" lan

27、guage="javascript"></script><!- BEGIN Browser History required section -><script src="history/history.js" language="javascript"></script><!- END Browser History required section -><style>body margin: 0px; overflow:hidden </style

28、><script language="JavaScript" type="text/javascript"><!-/ -/ Globals/ Major version of Flash requiredvar requiredMajorVersion = 9;/ Minor version of Flash requiredvar requiredMinorVersion = 0;/ Minor version of Flash requiredvar requiredRevision = 28;/ -/ -></s

29、cript></head><body scroll="no"><script language="JavaScript" type="text/javascript"><!-/ Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)var hasProductInstall = DetectFlashVer(6, 0, 65);/ Version ch

30、eck based upon the values defined in globalsvar hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);if ( hasProductInstall && !hasRequestedVersion ) / DO NOT MODIFY THE FOLLOWING FOUR LINES/ Location visited after installation is complete if ins

31、tallation is requiredvar MMPlayerType = (isIE = true) ? "ActiveX" : "PlugIn"var MMredirectURL = window.location; document.title = document.title.slice(0, 47) + " - Flash Player Installation" var MMdoctitle = document.title;AC_FL_RunContent("src", "playerP

32、roductInstall","FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"","width", "80%","height", "50%","align", "middle","id"

33、, "videochat","quality", "high","bgcolor", "#869ca7","name", "videochat","allowScriptAccess","sameDomain","flashvars","user=wangjing&fms=rtmp://videochat","type", &quo

34、t;application/x-shockwave-flash","pluginspage", ""); else if (hasRequestedVersion) / if we've detected an acceptable version/ embed the Flash Content SWF when all tests are passedAC_FL_RunContent("src", "videochat","width", "80%",&

35、quot;height", "50%","align", "middle","id", "videochat","quality", "high","bgcolor", "#869ca7","name", "videochat","allowScriptAccess","sameDomain","flashvars&q

36、uot;,"user=wangjing&fms=rtmp://videochat","type", "application/x-shockwave-flash","pluginspage", ""); else / flash is too old or we can't detect the plugin var alternateContent = 'Alternate HTML content should be placed here. 

37、9; + 'This content requires the Adobe Flash Player. ' + '<a href=>Get Flash</a>' document.write(alternateContent); / insert non-flash content / -></script><noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-"id="videochat" width

38、="80%" height="50%"codebase=""><param name="movie" value="videochat.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#869ca7" /><param name="flashvars"

39、value="user=wangjing&fms=rtmp://videochat"/><param name="allowScriptAccess" value="sameDomain" /><embed src="videochat.swf" quality="high" bgcolor="#869ca7"width="80%" height="50%" name="vid

40、eochat" align="middle"play="true"loop="false"quality="high"allowScriptAccess="sameDomain"type="application/x-shockwave-flash"flashvars="user=wangjing&fms=rtmp://videochat"pluginspage=""></embed>

41、;</object></noscript></body></html>下一講：開發(fā)環(huán)境配置videochat.mxml<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="" layout="absolute" fontSize="12" width="80%" height="50%" horizontalAlign

42、="center" verticalAlign="middle" creationComplete="init()"><mx:Script><!CDATAimport mx.collections.ArrayCollection;import mx.controls.Alert;import mx.core.Application;/與FMS之間通訊的橋梁對象private var fmsObj:Object = new Object();/與FMS相連的connection對象private var fmsC

43、onn:NetConnection = new NetConnection();private var fmsStream:NetStream = null;/播放到FMS的視頻流（把本地視頻播放到服務(wù)器）/FMS連接串private var fmsUrl:String = null;private var userName:String = null;/* * USER上線時通知用戶列表 * */private static var userData:ArrayCollection = new ArrayCollection();/用戶在線數(shù)據(jù)private function upLine(

44、user:String):void if(user = userName) return;var isHaveThisUser:Boolean = false; /判斷是否已經(jīng)存在上線的用戶var temp:Object = new Object();temp.label = user;temp.data = user;var i:int = 0;if(userData.length = 0) userData.addItem(temp);isHaveThisUser = true; else for(i = 0; i < userData.length; i+) if(userData

45、.getItemAt(i).label = user) isHaveThisUser = true;break;if(isHaveThisUser = false) userData.addItem(temp);Alert.show(userData.length + "");users.invalidateList();users.invalidateDisplayList();users.dataProvider = null;users.dataProvider = userData;/用戶下線private function downLine(user:String

46、):void if(user = userName) return;private function init():void fmsUrl = Application.application.parameters.fms;userName = Application.application.parameters.user;fmsConn.client = fmsObj;fmsObj.userUpLine = upLine;fmsObj.userDownLine = downLine;fmsConn.objectEncoding = ObjectEncoding.AMF0;fmsConn.con

47、nect(fmsUrl,userName) ; /網(wǎng)絡(luò)連接時間處理器fmsConn.addEventListener(NetStatusEvent.NET_STATUS,connectFMS) ;private function connectFMS(e:NetStatusEvent):void var result:String = .code ;switch(result) case "NetConnection.Connect.Success":playStream(); break; default : break ;/采集對象private var c

48、amera:Camera = null;private var mic:Microphone = null;private var showVideo:Video = null;private function playStream():void fmsStream = new NetStream(fmsConn);camera = Camera.getCamera();if(camera = null) Alert.show("未檢測到攝像頭，請確認攝像頭已被正確安裝");mic = Microphone.getMicrophone();if(mic = null) Al

49、ert.show("未檢測到MIC，請確認MIC已被正確安裝");if(camera != null) camera.setMode(320,240,15); camera.setQuality(100 * 1000,90); if(mic != null) mic.setUseEchoSuppression(true); localVideo.attachCamera(camera); /本地視頻fmsStream.attachCamera(camera);fmsStream.attachAudio(mic);fmsStream.publish(userName,&quo

50、t;live");/* * 點擊與選中人聊天 * */private var remoteStream:NetStream = null;private var video:Video = new Video();/需要呈現(xiàn)在VideoDisplay上的對方視頻對象private function chatWith():void if(users.selectedItem != null) if(remoteStream = null) else remoteStream.close();remoteStream = null;remoteStream = new NetStream

51、(fmsConn);remoteStream.bufferTime = 3;video.attachNetStream(remoteStream);video.width = remoteVideo.width;video.height = remoteVideo.height;video.smoothing = true; remoteVideo.addChild(video);remoteStream.play(users.selectedItem.data) else Alert.show("請選中人");></mx:Script><mx:HB

52、ox width="100%" height="100%"><mx:Panel height="100%" width="10%" title="在線用戶列表"><mx:VBox width="100%" height="100%"><mx:List id="users" width="100%" height="90%" cachePolicy="o

53、ff"></mx:List><mx:Button label="和選中人聊天" id="chat" click="chatWith()"/></mx:VBox></mx:Panel><mx:HBox width="90%" height="100%"><mx:Panel title="對方視頻" width="50%" height="100%" hori

54、zontalAlign="center" backgroundColor="cyan"><mx:VideoDisplay width="80%" height="100%" id="remoteVideo" maintainAspectRatio="false"/></mx:Panel><mx:Panel title="本地視頻" width="50%" height="100%"

55、 horizontalAlign="center" backgroundColor="cyan"><mx:VideoDisplay width="80%" height="100%" id="localVideo" maintainAspectRatio="false"/></mx:Panel></mx:HBox></mx:HBox></mx:Application>videochat.html<!- s

56、aved from url=(0014)about:internet -><html lang="en"><!- Smart developers always View Source. This application was built using Adobe Flex, an open source frameworkfor building rich Internet applications that get delivered via theFlash Player or to desktops via Adobe AIR. Learn

57、more about Flex at / -><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!- BEGIN Browser History required section -><link rel="stylesheet" type="text/css" href="history/history.css" /><!- END B

58、rowser History required section -><title></title><script src="AC_OETags.js" language="javascript"></script><!- BEGIN Browser History required section -><script src="history/history.js" language="javascript"></script>

59、;<!- END Browser History required section -><style>body margin: 0px; overflow:hidden </style><script language="JavaScript" type="text/javascript"><!-/ -/ Globals/ Major version of Flash requiredvar requiredMajorVersion = 9;/ Minor version of Flash requi

60、redvar requiredMinorVersion = 0;/ Minor version of Flash requiredvar requiredRevision = 28;/ -/ -></script></head><body scroll="no"><script language="JavaScript" type="text/javascript"><!-/ Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)var hasProductInstall = DetectFlashVer(6, 0, 65);/ Version check based upon the values defined in globalsvar hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision)