BigBlueButton UI customization and development – Easy way

Is it possible to customize bigbluebutton ? Yes as Bigbluebutton is free open source video conferencing system, Because of open source we can make customization and show as ours, we can change the GUI, block placement, video layout changes, color changes, branding changes or any other type of changes. Below i will go through each and every step which is required for bigbluebutton development and customize it like what you wish to do.

Bigbluebutton Html5 Customization & development

Required Knowledge :

• basic programing knowledge
• web development (html,css,javascript)
• meteorjs
• NodeJs
• ReactJs
• Redis DB
• Mongo DB
• little shell (bash, sh) script Idea

Note: Make sure SSL is correctly installed. you can look into this article for SSL certificate installation and verification . BigBlueButton SSL certification.

Steps to customize BigBlueButton

install meteor.js

• curl https://install.meteor.com/ | sh

Now We need to change value of wsUrl which is used for audio and video communication and we have to get it from main html5 component of bigbluebutton and it is available in settings.yml file

• grep “wsUrl” /usr/share/meteor/bundle/programs/server/assets/app/config/settings.yml
• Now put this wsUrl value inside the setting.yml where we are developing new bbb-html5 component

• vi private/config/settings.yml

Before going further we should stop bbb-html5 main component and it will stop all other 4 services of this component, to develop it without any issue. If you would like to make a depth level of customization hire BigBlueButton Developer.

• sudo systemctl stop bbb-html5

Install all dependencies

• meteor npm install

Run this new application

• npm start

To run in production mode

• NODE_ENV=production npm start

change .nginx to use development setup

/etc/bigbluebutton/nginx/bbb-html5.nginx

and switch to 4100

The default – used for production mode:

location ~ ^/html5client/ {
  # proxy_pass http://127.0.0.1:4100; # use for development
  proxy_pass http://poolhtml5servers; # use for production
  ...

Development mode, only port 4100 is used.

location ~ ^/html5client/ {
  proxy_pass http://127.0.0.1:4100; # use for development
  # proxy_pass http://poolhtml5servers; # use for production

And reload nginx sudo systemctl reload nginx

Why Customize BigBlueButton :

Bigbluebutton customization is required sometimes because whatever requirement we have is not fullfil by orignal version of BBB. In that case we can customize the bigbluebutton and develop it according to our requirement. Also we can do the some sort of optimization by removing unwanted features as well as we can change the way it render to the frontend web browser.

BigBlueButton Customization is not a easy for non experienced developer, the developer should have storng and deep understanding of how WebRTC works as well as websocket programming, other then that reactJS and Nodejs strong knowledge is required. If you want a bigbluebutton customization or functionality enhancement you can hire us, we are a team of bigbluebutton profession developer and working on BBB from last 5+ years.