开源视频会议bigbluebutton开发（4）——构建开发环境，客户端开发

 

概述

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

评论

8 楼 tan_zheng 2018-06-06  

大神 ，为什么我没有 bbb-conf --setup-dev tools  这个命令   只有 bbb-conf     --setup  这个命令都查不到

7 楼 dumxz 2013-11-05  

我的BBB都安装好了，是直接下的虚拟机。运行后首页也可以看到，但是单击JOIN时却显示404 Not Found错误，不知什么原因？

6 楼 kenshou 2012-12-27  

楼主太好了，正在做这方面的工作，看英语资料看的头疼，还是看我们这个中国字看的顺眼呀。

5 楼 mrzhanghuzi 2012-09-27  

你好，能加我msn:[e-mail],聊下有关BigBlueButton的问题，本人对其研究三个月了，希望能讨论一些BigBlueButton应用的问题。

4 楼 smilease 2012-08-11  

yangactive 写道

smilease 写道

非常感谢，一直对openmeetings和bbb感兴趣，但是资料太少了，感谢楼主分享

不客气，一起学习～

楼主好，请问楼主有没有比较过openmeetings和bbb，如果想学习他们的源码或者技术，比如屏幕共享，电子白板，文档共享这些，跟着哪个学比较好？

3 楼 yangactive 2012-08-10  

smilease 写道

非常感谢，一直对openmeetings和bbb感兴趣，但是资料太少了，感谢楼主分享

不客气，一起学习～

2 楼 smilease 2012-08-10  

非常感谢，一直对openmeetings和bbb感兴趣，但是资料太少了，感谢楼主分享

1 楼 corelengine 2012-08-09  

这篇好文章要顶，感谢分享！