26
edits
Changes
→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.
==== 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==
====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.
'''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====
