Difference between revisions of "BBB HTML5 Client"

From CDOT Wiki
Jump to: navigation, search
(→‎Developing the HTML5 Client for BigBlueButton)
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
==Developing the HTML5 Client for BigBlueButton==
+
== Developing the HTML5 Client for BigBlueButton ==
  
 
Our aim in this iteration of our collaboration with BlindSide Networks is to develop a Flash-free, iOS compatible implementation of BigBlueButton. The first step in this is to develop a "bare-bones", non-presenter client that can still communicate with the existing Flash application. This requires the in-depth process of researching alternatives to Red5, the Flash Event structure, and the existing methods of streaming audio and video.
 
Our aim in this iteration of our collaboration with BlindSide Networks is to develop a Flash-free, iOS compatible implementation of BigBlueButton. The first step in this is to develop a "bare-bones", non-presenter client that can still communicate with the existing Flash application. This requires the in-depth process of researching alternatives to Red5, the Flash Event structure, and the existing methods of streaming audio and video.
 +
 +
==== Setup HTML5 Client Development Environment ====
 +
 +
* '''Install BigBlueButton Newest Version (current version: 1.0)'''
 +
 +
The requirements are:
 +
 +
* Ubuntu 14.04 64-bit server
 +
* 4 GB of memory with swap enabled (8 GB is better)
 +
* Quad-core 2.6 GHZ CPU (or faster)
 +
* TCP ports 80, 1935, 9123 are accessible
 +
* UDP ports 16384 - 32768 are accessible
 +
* Port 80 is not in use by another application
 +
* 500G of free disk space (or more) for recordings
 +
* 100 Mbits/sec bandwidth (symmetrical)
 +
* Dedicated (bare metal) hardware (not virtualization)
 +
 +
Please follow the link to [http://docs.bigbluebutton.org/install/install.html install your Bigbluebutton server].
 +
If you are working on Windows Operating System, we suggest using the [https://my.vmware.com/web/vmware/free#desktop_end_user_computing/vmware_player/4_0|PLAYER-404|product_downloads VMware Player 4.0.4] and install [http://www.ubuntu.com/download/server Ubuntu 14.04] on your virtual machine.
 +
 +
* '''Take a look at the overview of [http://docs.bigbluebutton.org/html/html5-overview.html]'''
 +
* '''Setup the [http://docs.bigbluebutton.org/html/html5-dev.html] for HTML5 Client'''
 +
Note:
 +
# After Clone the SenecaCDOT-BigBlueButton repository to your local machine,you must build and deploy or run the Client, BBB-Web, and Red5 Applications components. ''git clone git@github.com:SenecaCDOT-BigBlueButton/bigbluebutton.git''
 +
# Add BigBlueButton repository as your master branch’s upstream: ''git remote add upstream https://github.com/bigbluebutton/bigbluebutton/bigbluebutton.git''
 +
# Before creating a working branch, make sure your master branch is up-to-date: ''git fetch upstream''
 +
# Create a working branch:  ''git checkout -b yourbranchname upstream/html5-bridge''
 +
# Push your local working branch to SenecaCDOT-BigBlueButton (your origin): git push -u origin yourbranchname
 +
 +
==== HTML5 Client Development References====
 +
 +
Javascript in the browser/client:
 +
 +
(!) Basics: http://learn.jquery.com/javascript-101/getting-started/
 +
 +
jQuery:
 +
 +
(!) Basics: http://learn.jquery.com/about-jquery/how-jquery-works/
 +
 +
(!) Selectors: http://learn.jquery.com/using-jquery-core/selecting-elements/
 +
 +
(!) Changing elements: http://learn.jquery.com/using-jquery-core/manipulating-elements/
 +
 +
More: http://learn.jquery.com/using-jquery-core/ and http://learn.jquery.com/events/
 +
 +
Require.js
 +
 +
(!) http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction
 +
 +
Backbone.js
 +
 +
(!) MVC: http://addyosmani.github.io/backbone-fundamentals/#what-is-mvc
 +
 +
(!) The items in the “Beginner” section are all important (at least the first aspects in their pages): http://backbonetutorials.com/
 +
 +
Example of a simple TODO list application in backbone: http://documentcloud.github.io/backbone/docs/todos.html
 +
 +
Coffeescript
 +
 +
(!) A tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/rocking-out-with-coffeescript/
 +
 +
(!) You can paste your javascript code in the “Try Coffeescript” section in http://coffeescript.org/ and see them converted to coffeescript
 +
 +
(!) Coffeescript video tutorials: http://coffeescript.codeschool.com/levels/1
 +
 +
 +
Coffeescript + Backbone.js examples: http://adamjspooner.github.io/coffeescript-meet-backbonejs/
 +
 +
Backbone.js + Require.js: http://backbonetutorials.com/organizing-backbone-using-modules/
 +
Javascript in the node.js server:
 +
 +
(!) Hello World: http://www.nodebeginner.org/#hello-world
 +
 +
(!) A basic HTTP server: http://www.nodebeginner.org/#building-the-application-stack
 +
 +
(!) Basics, a first example of a server: http://nodeguide.com/beginner.html#learning-javascript
 +
 +
Another guide for beginners with more details: http://net.tutsplus.com/tutorials/javascript-ajax/node-js-for-beginners/
 +
 +
Lots of links to other guides: http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js#answer-5511507
 +
 +
Express.js
 +
 +
A very fast guide showing how it works: http://howtonode.org/getting-started-with-express
 +
 +
Socket.io
 +
 +
(!) Good tutorial showing why and how socket.io is used: http://howtonode.org/websockets-socketio
  
 
==Research Progress==
 
==Research Progress==
 +
 
===Replacing Red5===
 
===Replacing Red5===
 +
 +
====SharedObjects====
 
So far, our research has indicated that the best replacement for the Red5 server would be [http://jwebsocket.org/ jWebSocket]. Red5 synchronizes all clients in a meeting by using the SharedObject class, which is essentially a form of socket. By instructing jWebSocket on which Red5 SharedObject to listen to and mimic, the HTML5 client should be able to join a meeting in the same manner as the Flash client.
 
So far, our research has indicated that the best replacement for the Red5 server would be [http://jwebsocket.org/ jWebSocket]. Red5 synchronizes all clients in a meeting by using the SharedObject class, which is essentially a form of socket. By instructing jWebSocket on which Red5 SharedObject to listen to and mimic, the HTML5 client should be able to join a meeting in the same manner as the Flash client.
 +
 +
'''UPDATE (June 7 '12)''': A plugin exists for jWebSocket containing a SharedObject class designed to mimic the SharedObjects in Red5. This could reduce the complexity of adapting the ActionScript code to JavaScript, depending on how similarly the JWS SharedObject behaves to the Red5 version.[http://enapso.org/jwsForum219/posts/list/15.page]
 +
 +
====Video Streaming====
 +
Media streaming is proving to be a challenge. Red5 broadcasts video encoded as FLV through RTMP, which can be received and decoded by the Java-based [http://www.xuggle.com/xuggler/ Xuggler]. The problem arises in re-encoding it to H264 (currently the only video format supported by iOS devices, and very proprietary) and re-broadcasting through a non-RTMP protocol (RTMP also being proprietary to Adobe). The "bare-bones" client will only be concerned with receiving video, not broadcasting any of it's own.
 +
 +
===Replacing the Flash Event structure===
 +
Research into this topic has been cursory, but it appears that custom event definition in JavaScript will suffice.
 +
 +
==Architecture==
 +
In a very general sense, our architecture will need to mirror the existing BigBlueButton architecture. The client (of which there can be many) will communicate back and forth with the server, which in turn is tasked with keeping the clients synchronized. The main difference will be that the new server will need to listen in on what is occurring on the Red5 server (of course, this element will become obsolete when the HTML5 application is in a state to replace the Flash application)
 +
 +
Further research is required into whether Red5 will be "aware" of the listening (ie, we can edit Red5 to take an active role in communicating with the new server) or whether it will remain oblivious as an entirely passive partner in the inter-server communication. To simplify further: Will this be a conversation, or someone eavesdropping at the door? If the latter, then how will the Flash clients synchronize themselves with the HTML5 clients? Again, further research required.

Latest revision as of 11:05, 25 September 2016

Developing the HTML5 Client for BigBlueButton

Our aim in this iteration of our collaboration with BlindSide Networks is to develop a Flash-free, iOS compatible implementation of BigBlueButton. The first step in this is to develop a "bare-bones", non-presenter client that can still communicate with the existing Flash application. This requires the in-depth process of researching alternatives to Red5, the Flash Event structure, and the existing methods of streaming audio and video.

Setup HTML5 Client Development Environment

  • Install BigBlueButton Newest Version (current version: 1.0)

The requirements are:

  • Ubuntu 14.04 64-bit server
  • 4 GB of memory with swap enabled (8 GB is better)
  • Quad-core 2.6 GHZ CPU (or faster)
  • TCP ports 80, 1935, 9123 are accessible
  • UDP ports 16384 - 32768 are accessible
  • Port 80 is not in use by another application
  • 500G of free disk space (or more) for recordings
  • 100 Mbits/sec bandwidth (symmetrical)
  • Dedicated (bare metal) hardware (not virtualization)

Please follow the link to install your Bigbluebutton server. If you are working on Windows Operating System, we suggest using the VMware Player 4.0.4 and install Ubuntu 14.04 on your virtual machine.

  • Take a look at the overview of [1]
  • Setup the [2] for HTML5 Client

Note:

  1. After Clone the SenecaCDOT-BigBlueButton repository to your local machine,you must build and deploy or run the Client, BBB-Web, and Red5 Applications components. git clone git@github.com:SenecaCDOT-BigBlueButton/bigbluebutton.git
  2. Add BigBlueButton repository as your master branch’s upstream: git remote add upstream https://github.com/bigbluebutton/bigbluebutton/bigbluebutton.git
  3. Before creating a working branch, make sure your master branch is up-to-date: git fetch upstream
  4. Create a working branch: git checkout -b yourbranchname upstream/html5-bridge
  5. Push your local working branch to SenecaCDOT-BigBlueButton (your origin): git push -u origin yourbranchname

HTML5 Client Development References

Javascript in the browser/client:

(!) Basics: http://learn.jquery.com/javascript-101/getting-started/

jQuery:

(!) Basics: http://learn.jquery.com/about-jquery/how-jquery-works/

(!) Selectors: http://learn.jquery.com/using-jquery-core/selecting-elements/

(!) Changing elements: http://learn.jquery.com/using-jquery-core/manipulating-elements/

More: http://learn.jquery.com/using-jquery-core/ and http://learn.jquery.com/events/

Require.js

(!) http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction

Backbone.js

(!) MVC: http://addyosmani.github.io/backbone-fundamentals/#what-is-mvc

(!) The items in the “Beginner” section are all important (at least the first aspects in their pages): http://backbonetutorials.com/

Example of a simple TODO list application in backbone: http://documentcloud.github.io/backbone/docs/todos.html

Coffeescript

(!) A tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/rocking-out-with-coffeescript/

(!) You can paste your javascript code in the “Try Coffeescript” section in http://coffeescript.org/ and see them converted to coffeescript

(!) Coffeescript video tutorials: http://coffeescript.codeschool.com/levels/1


Coffeescript + Backbone.js examples: http://adamjspooner.github.io/coffeescript-meet-backbonejs/

Backbone.js + Require.js: http://backbonetutorials.com/organizing-backbone-using-modules/ Javascript in the node.js server:

(!) Hello World: http://www.nodebeginner.org/#hello-world

(!) A basic HTTP server: http://www.nodebeginner.org/#building-the-application-stack

(!) Basics, a first example of a server: http://nodeguide.com/beginner.html#learning-javascript

Another guide for beginners with more details: http://net.tutsplus.com/tutorials/javascript-ajax/node-js-for-beginners/

Lots of links to other guides: http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js#answer-5511507

Express.js

A very fast guide showing how it works: http://howtonode.org/getting-started-with-express

Socket.io

(!) Good tutorial showing why and how socket.io is used: http://howtonode.org/websockets-socketio

Research Progress

Replacing Red5

SharedObjects

So far, our research has indicated that the best replacement for the Red5 server would be jWebSocket. Red5 synchronizes all clients in a meeting by using the SharedObject class, which is essentially a form of socket. By instructing jWebSocket on which Red5 SharedObject to listen to and mimic, the HTML5 client should be able to join a meeting in the same manner as the Flash client.

UPDATE (June 7 '12): A plugin exists for jWebSocket containing a SharedObject class designed to mimic the SharedObjects in Red5. This could reduce the complexity of adapting the ActionScript code to JavaScript, depending on how similarly the JWS SharedObject behaves to the Red5 version.[3]

Video Streaming

Media streaming is proving to be a challenge. Red5 broadcasts video encoded as FLV through RTMP, which can be received and decoded by the Java-based Xuggler. The problem arises in re-encoding it to H264 (currently the only video format supported by iOS devices, and very proprietary) and re-broadcasting through a non-RTMP protocol (RTMP also being proprietary to Adobe). The "bare-bones" client will only be concerned with receiving video, not broadcasting any of it's own.

Replacing the Flash Event structure

Research into this topic has been cursory, but it appears that custom event definition in JavaScript will suffice.

Architecture

In a very general sense, our architecture will need to mirror the existing BigBlueButton architecture. The client (of which there can be many) will communicate back and forth with the server, which in turn is tasked with keeping the clients synchronized. The main difference will be that the new server will need to listen in on what is occurring on the Red5 server (of course, this element will become obsolete when the HTML5 application is in a state to replace the Flash application)

Further research is required into whether Red5 will be "aware" of the listening (ie, we can edit Red5 to take an active role in communicating with the new server) or whether it will remain oblivious as an entirely passive partner in the inter-server communication. To simplify further: Will this be a conversation, or someone eavesdropping at the door? If the latter, then how will the Flash clients synchronize themselves with the HTML5 clients? Again, further research required.

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=BBB_HTML5_Client&oldid=119727"