開源視頻會議bigbluebutton開發（4）——構建開發環境，客戶端開發

轉自：http://yangactive.iteye.com/blog/1625771

概述

BBB是由一個專業的團隊在一塊兒進行開發，而且組成一個普遍的社區在一塊兒普遍的探討開發的各個環節：設計，開發，測試，文檔，定位，wikis編輯，還有就是最重要的，對第三方的支持！本文檔探討了如何在BBB服務器端構建BBB開發環境，一旦構建成功，你能夠進行開發和擴展本地的服務器而且成爲改善bbb社區的一分子！

BBB有不少組件，核心的組件是:bbb-web,bbb-client,bbb-apps,bbb-voice和桌面共享，你並不須要明白全部的東西去開發或者擴展某個組件，例如：你對改善bbb客戶端很感興趣，你須要最低限度的明白bbb客戶端以及一個總體上的架構認知！

爲了幫助創建必須的開發環境，在bbb-conf裏面已經預置了不少構建腳本！用腳原本完成大部分的工做的同時，隨着你對BBB愈來愈熟悉，你須要看下bbb-conf的源碼（在/usr/local/bin/bbb-conf），它們是如何工做的！你對BBB瞭解的越多，你就越容易的改變或者改善項目！

 

基本技能預備知識

 

1，對BBB大體框架有一個理解！

2，明白git是如何工做的！

 

一個可工做的服務器

 

這是顯而易見的，在構建BBB開發環境以前，要確保BBB服務均可以跑起來！

 

須要可運行sudo命令

 

在構建BBB開發環境時，爲了確認，須要能夠輸入如下命令執行：會返回當前目錄下的文件列表！

 

sudo ls

 

構建開發環境

 

在BBB服務器，你須要輸入如下命令初始化必須的開發工具：

 

bbb-conf --setup-dev tools

 當你運行上面的腳本時，會讓你輸入密碼得到root權限，而後會執行如下操做：

 

1，下載並安裝groovy, grails, and gradle

2，下載並安裝開源的flex sdk

3，初始化openJDK

4，初始化git

5，在~/.profile添加必要的環境變量

以上步驟完成後，須要從新加載~/.profile

 

source ~/.profile

 bbb配置腳本會在你的目錄下建立一個開發目錄：

 

/home/firstuser/dev

 簽出源碼

 

推薦使用Github,它會使你在本身的BBB源碼工做，存儲，更新變得簡單以及有益項目的發展！

1，在github上創建帳戶

2，創建你的ssh keys

3，在你的github上構建一個bbb分支

4，將你的代碼庫拷貝到你的~/dev包裏，複製完後，你會有如下目錄

 

/home/firstuser/dev/bigbluebutton

 確保你在主分支工做！輸入如下命令：

 

cd ~/dev/bigbluebutton
git status

 會顯示：

 

# On branch master
nothing to commit (working directory clean)

 主分支包含了大部分的新開發的東西，以及它可能會中斷，若是想在0.8發佈版工做，須要簽出 v0.8 tag!

若是想修復有些問題，以及在v0.8上開發，須要輸入如下命令：

 

git checkout -b fixing-issue-100 v0.8

 能夠看到：

 

Switched to a new branch 'fixing-issue-100'

 輸入：

 

git status

 顯示：

 

# On branch fixing-issue-100
nothing to commit (working directory clean)

 

客戶端開發

 

隨着開發環境的簽出以及克隆，咱們就作好了開發的準備！

下面將帶領你修改bbb客戶端

構建客戶端的開發環境，輸入如下命令：

 

bbb-conf --setup-dev client

 這個命令修改BigBlueButton nginx設置，Http請求加載客戶端，由下面提供：

 

~/dev/bigbluebutton/bigbluebutton-client/bin

 代替

 

/var/www/bigbluebutton

 

 構建客戶端

 

如今讓咱們來構建客戶端，注意如今咱們不作任何改變，咱們構建客戶端來確保它能夠工做！

 

cd ~/dev/bigbluebutton/bigbluebutton-client

 

 首先，讓咱們來構建本地環境（語言翻譯包），若是你沒有修改本地環境，你只需輸入下面的命令一次：

 

cd ~/dev/bigbluebutton/bigbluebutton-client
ant locales

 

 這一步驟大約花費10分鐘的時間，取決於你電腦的速度！

而後，來構建客戶端

 

ant

 

 這個命令會在~/dev/bigbluebutton/bigbluebutton-client/bin 這個目錄下構建客戶端！

在這以後,將瀏覽器指向你的BigBlueButton服務器,並登陸演示頁面。客戶端應該正常啓動。它是如何加載您的客戶機(而不是默認的客戶機)，當你運行： bbb-conf --setup-dev client,它建立了一個條目在\etc\bigbluebutton\nginx\client_dev，內容以下：

 

location /client/BigBlueButton.html {
              root    /home/firstuser/dev/bigbluebutton/bigbluebutton-client;
              index  index.html index.htm;
              expires 1m;
      }

      # BigBlueButton Flash client.
      location /client {
              root    /home/firstuser/dev/bigbluebutton/bigbluebutton-client;
              index  index.html index.htm;
      }

 

 在\etc\bigbluebutton\nginx\ ，下面建立了一個鏈接，從client.nginx 到 client_dev，換句話，當一個請求到達/client時，nginx如今從你的開發目錄裏提供客戶端！

注意：當你構建客戶端開發環境時，bbb客戶端的配置文件從下面加載：~/dev/bigbluebutton/bigbluebutton-client/bin/conf/config.xml，這意味着使用bbb-conf命令對默認的config.xml作到任何改變，都不會應影響到你開發環境中的config.xml.

 

更改

 

構建客戶端前，讓咱們作一個更改

 

vi ~/dev/bigbluebutton/bigbluebutton-client/src/org/bigbluebutton/main/views/MainApplicationShell.mxml

 

 上面的命令使用vi作出改變。若是你在Windows和使用BigBlueButton VM開發,你或許會發現安裝samba,這樣你就更容易能夠經過Windows資源管理器訪問你的文件,使用Windows編輯器。構建Samba,輸入下面命令。它會共享你的開發目錄，能夠從windows訪問，有一些編輯器，好比myeclipse只能訪問驅動器，而不是網絡共享，爲了把網絡共享映射到windows驅動器，好比H:,打開個人電腦，點擊映射網絡驅動器，輸入\\<ip>\firstuser,ip是vm本地地址，

 

bbb-conf --setup-samba

 

 當你編輯,MainApplicationShell.mxml,在第311行,您將看到如下文本

 

<mx:Label text="{ResourceUtil.getInstance().getString('bbb.mainshell.copyrightLabel2',[appVersion])}" id="copyrightLabel2"/>

 

 編輯這段文本， ' -- BigBlueButton Rocks!!' ，以下：

 

<mx:Label text="{ResourceUtil.getInstance().getString('bbb.mainshell.copyrightLabel2',[appVersion]) + ' -- BigBlueButton Rocks!'}" id="copyrightLabel2"/>

 

 如今，再次從新構建bbb客戶端

 

cd ~/dev/bigbluebutton/bigbluebutton-client
ant

 

 當完成時，使用客戶端加入演示會議，你會看到，在版權的地方加入了「-- BigBlueButton Rocks!」信息！

 若是你沒看到你的變化,嘗試清理你的瀏覽器的緩存和嘗試再次加載客戶機！

切換到打包好的客戶端

 

切換到內置的bbb版本，使用如下命令：

 

sudo ln -s -f /etc/bigbluebutton/nginx/client /etc/bigbluebutton/nginx/client.nginx
 sudo /etc/init.d/nginx restart

 

 切換回開發的版本，輸入如下命令：

 

sudo ln -s -f /etc/bigbluebutton/nginx/client_dev /etc/bigbluebutton/nginx/client.nginx
  sudo /etc/init.d/nginx restart

 

 使用flex builder

1，安裝flex bulider在你的電腦上！

2，在你的虛擬機構建 samba，掛載VM drive

3，在flexbuilder中，導入bbb-client,選擇vm中的bigbluebutton-client目錄，例如：W:\dev\source\bigbluebutton\bigbluebutton-client

4，從VM中的~/dev/tools目錄拷貝出sdk加載到flex builder的sdk目錄裏，能夠看到以下圖：在flexbuilder中，點擊Window -> Preferences -> Installed Flex SDKs，增長剛剛拷貝的sdk.

 5,右鍵項目，Properties -> Flex Compiler，flex版本要轉換成3.5,而且要點擊flex 3 兼容模式！

 6,右鍵項目，Properties -> Flex Build Path，點擊mx only組件集，確保添加了libs文件，源文件夾以及輸出文件夾！

 7,點擊屬性窗口，Flex Modules，增長全部你想和bbb-client編譯的模塊，這些模塊都是mxml文件在 src/ directory 裏

 8,包瀏覽器導航到默認包後，右鍵BigBlueButton.mxml，設置爲默認應用程序！

9，編譯flexbuilder中的客戶端，而後經過輸入bbb虛擬機IP，來打開客戶端，如今運行的客戶端應該是你flexBuilder環境裏面的！

 

當你不能使用flexbuilder 裏的run去登陸客戶端，你也不能用debuger,上面的方法是被限制的！能夠安裝下面的來辦，

在客戶端的代碼裏，src/conf/config.xml的頂部編輯

 

<application uri="rtmp://<HOST-IP>/bigbluebutton" host="http://<HOST-IP>/bigbluebutton/api/enter" />

 

 改變成下面：

 

<application uri="rtmp://<HOST-IP>/bigbluebutton" host="conf/join-mock.xml" />

 這樣，就能夠點擊flexbuilder裏的Run/Debug 按鈕來進行登陸！

本文有些地方可能寫的有失誤的地方，望海涵～，轉載請代表出處http://yangactive.iteye.com/blog/1625771