HTML5 Development Environment Setup

    BigBlueButton HTML5 Client Design

    If you have not already done so, you should read through the Overview of HTML5 Client

    Initial setup

    Before you begin, you will need to have a BigBlueButton 1.1 (or later) server installed from packages (see install BigBlueButton). Make sure your installation is functional. Try out the demos.

    Have a GitHub Account

    The BigBlueButton source is hosted on GitHub. You need a GitHub account. Also, you need to be very familiar with how git works. Specifically, you need to know how to

    • clone a repository
    • create a branch
    • push changes back to a repository

    If you have not used git before, or if the terms clone, branch, and commit are unfamiliar to you, stop now. These are fundamental concepts to git that you need to become competent with before trying to develop on BigBlueButton. To become competent, a good place to start is this free book and GitHub Help pages.

    Using GitHub makes it easy for you to work on your own copy of the BigBlueButton source, store your updates to the source to your GitHub account, and make it easy for you to contribute to BigBlueButton.

    Subscribe to bigbluebutton-dev

    We recommend you subscribe to the bigbluebutton-dev mailing list to follow updates to the development of BigBlueButton and to collaborate with other developers.

    Checking out the Source

    We want to clone the source in the following directory:

    /home/firstuser/dev
    

    Using your GitHub account, do the following

    1. Fork the BigBlueButton repository into your GitHub account.
    2. Clone your repository into your ~/dev folder.

    Note that you need just the master branch.

    $ git clone https://github.com/<YOUR_GITHUB_USERNAME>/bigbluebutton.git
    

    After cloning, you’ll have the following directory (make sure the bigbluebutton directory is within your dev directory).

    /home/firstuser/dev/bigbluebutton
    

    Confirm that you are working on the master branch.

    $ cd /home/firstuser/dev/bigbluebutton
    $ git status
    

    You should see

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

    When you first clone the BigBlueButton git repository, git will place you, by default, on the master branch, which is the latest code for BigBlueButton. This is the branch you want to stay on. We recommend you periodically pull the latest commits from ‘master’ so you stay up to date with the latest version.

    Installation of the HTML5 client component

    Note that if you followed the steps to install the HTML5 client from packages you have to make sure the client is shut down so you are not running two copies in parallel.

    $ sudo service bbb-html5 stop
    

    NginX configuration:

    If you do not have /etc/bigbluebutton/nginx/html5.nginx, please create it and make sure it contains the following:

    location /html5client {
      proxy_pass http://127.0.0.1:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
    }
    
    location /_timesync {
      proxy_pass http://127.0.0.1:3000;
    }
    

    Save the file. Reload:

    $ sudo /etc/init.d/nginx reload
    

    Test the nginx configuration

    $ sudo nginx -t
    

    If the output from the above command contains errors check again the nginx configuration you just edited.

    curl

    You will need to download some files throughout these instructions using curl. If it is not installed on your server, you can install the package using the following command

    $ sudo apt-get install curl
    

    Meteor.js

    You will need to install Meteor.js.

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

    NPM

    You will need to also install npm.

    $ sudo apt-get install npm
    

    Configurations

    You want to modify bigbluebutton.properties so that SVG images for the HTML5 client’s presentation are generated by default.

    $ sudo vi /var/lib/tomcat7/webapps/bigbluebutton/WEB-INF/classes/bigbluebutton.properties
    

    Set the field svgImagesRequired to true. Then restart tomcat7.

    $ sudo service tomcat7 restart
    

    Running

    Assuming that you cloned the repository in /home/firstuser/dev, navigate to

    $ cd /home/firstuser/dev/bigbluebutton/bigbluebutton-html5/
    

    Install the npm dependencies

    meteor npm install
    

    In order to run the server side of the HTML5 client you will need to execute the following:

    $ npm start
    

    By default, the client will run in development mode. Loading into production environment can be done by passing the value of NODE_ENV:

    $ NODE_ENV=production npm start
    

    Wait until the process starts and confirm that the configuration is valid by navigating to

    http://<your_ip>/html5client/check
    

    The result should be {"html5clientStatus":"running"}.

    Usage

    Make sure you have the demos package installed: sudo apt install bbb-demos Go to http://<your_ip>/ in the browser. Select “API examples”. Navigate to “HTML5 Client Demo” and use the form. You will enter a meeting titled “Demo Meeting”.

    On a device that does not support Flash (for examaple Android devices) you can simply attempt to join a meeting from http://<your_ip>/. Since your device’s browser lacks Flash by default, you will be offered to navigate to the HTML5 client instead.

    Serve the client over HTTPS

    First, make sure you follow the instructions for configuring https on BigBlueButton. Test your server using the Flash client. Make sure the audio works and the slides display properly. Then for configuring the HTML5 client to run over HTTPS perform the following steps:

    -Modify the file start.sh so that ENVIRONMENT_TYPE=development becomes ENVIRONMENT_TYPE=production. This is required for the proper handling and display of the slide SVG files.

    Test your change as mentioned in Usage

    Localization with Transifex

    We use Transifex for crowdsourcing for BigBlueButton Internationalization(i18n). The following steps are not a part of the typical installation and are only required for bringing the language strings in github up to date.

    1. Install Transifex Client

    To installation the Transifex client we use pip, a package management system designed to manage and install Python packages.

    $ sudo apt-get install python-pip
    

    Next we use Pip to install the Transifex client.

    $ sudo pip install transifex-client
    

    The following command is used to upgrade the client to the most current version.

    $ pip install --upgrade transifex-client
    

    2. Transifex Project Initialization

    The tx init command is used to initialize a project. Run from the root directory of the application.

    $ tx init
    Creating .tx folder. . .
    Transifex instance [https://www.transifex.com]:
    

    Press Enter (will be prompted for your Transifex username and password)

    Creating skeleton...
    Creating config file...
    ​Done.
    

    This will create a Transifex project file in the current directory containing the project’s configuration file.

    3. Transifex Client configuration

    .tx/config

    The Transifex client uses a per project configuration file. This is located in .tx/config of your project’s root directory and is generated on running the tx init command. It should be updated with the following configuration:

    [main]
    host = https://www.transifex.com
    
    [bigbluebutton-html5.enjson]
    file_filter = private/locales/<lang>.json
    source_file = private/locales/en_US.json
    source_lang = en_US
    type = KEYVALUEJSON
    

    4. Set a Project Remote

    tx set allows you to configure and edit Transifex project files on your local computer.

    The following command is used to initialize a local project for the remote project specified by the URL.

    $ tx set --auto-remote https://www.transifex.com/projects/p/bigbluebutton-html5/resources/enjson/

    Next we can pull language files located on the Transifex server.

    5. Pull: Download Transifex Translations

    To pull all translation files from the Transifex server, the following command is used.

    $ tx pull -a bigbluebutton-html5.enjson

    In the event that there are a lot of translations, instead of pulling all, we can specify which translations we want to acquire.

    $ tx pull -r bigbluebutton-html5.enjson -l pt_BR

    Alternatively, simply download a ZIP archive of all languages in the project from the Transifex project page and unarchive it in the private/locales/ directory.

    Accessibility

    Overview

    The province of Ontario is one of the first in establishing a goal and time-frame for accessibility. The BigBlueButton project aims to comply with the proposed accessibility guidelines, enabling individuals with disabilities the ability to use the web application. To be a bit more specific, we ensure that users with disabilities are able to perceive, understand, navigate, interact and contribute using the HTML5 client.

    Based on the scope of the project, we primarily focus on disabilities related to visual, auditory and motor impairments. In order to accommodate all of the users who may have one or a combination of these impairments, we refer to the Web Content Accessibility Guidelines (WCAG) 2.0. This document outlines the standards expected to be included, where applicable, with all HTML markup on the web.

    When dealing with web accessibility there are a few key factors we also have to keep in mind while developing

    1. Tab Order
    2. Color Contrast
    3. Focus
    4. Semantics
    5. Testing

    Tab Order

    The goal when implementing the tab order is ensuring the elements in the tab sequence are logical and simple.

    When a user presses the tab key focus should move to the next interactable element. If the user continues to press the tab key, focus should move in a logical order through all the interactable elements on the page. The tab focus should be visually identified, currently the HTML5 client adds a thin border to the field, when tab is pressed focus is seen to visibly move.

    Note: A number of users including the following.

    • Those with visual impairments, who rely on screen readers or screen magnifiers.
    • Those with limited dexterity, who depend on the use of the keyboard to using a mouse.
    • Those who can only utilize a single switch to control a computer.

    will all navigate through a page by using the tab button.

    The order of elements in the DOM determine their place in the tab order, for elements that should receive focus. Elements that don’t natively receive focus can be inserted into the tab order by adding a tabindex=”0” property.

    Caution: When using the tabindex property, positive values should generally be avoided because it places elements outside of the natural tab order, this can present issues for screen reader users who rely on navigating the DOM through a linear manner.

    The following extension gives a visual representation of the tab order of a current web document.

    ChromeLens

    offered by ngzhian

    Contrast Ratio Calculator https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en

    Focus

    Color Contrast

    When dealing with color contrast we are talking about finding colors for a scheme that not only implement maximum contrast, but gives the appropriate contrast between the content and its background for those who experience low visual impairments, color deficiencies or the loss of contrast typically accompanied by aging.

    The HTML5 client ensures that all visual designs meet the minimum color-contrast ratio for both normal as well as large text on a background, described by the WCAG 2.0 AA standards. “Contrast (Minimum): Understanding Success Criterion 1.4.3.”

    To make sure that we have met these guidelines, there are numerous tools available online which allow the comparison of foreground and background colors using hex values, to see if they fall within the appropriate contrast ratio.

    Contrast Ratio Calculator http://webaim.org/resources/contrastchecker/

    Currently implemented colors:

    Currently implemented element colors Currently implemented typography colors

    • Blue - primary color - action buttons
    • Red - closing audio, indicators and error alerts
    • Green - audio indicator, success alert, check marks
    • Orange - warning alerts
    • Dark Blue - Headings
    • Grey - base typography color

    Note: The ChromeLense extension also provides the ability to view your browser using different personas of users who may view web content with various different visual impairments. This is particularly useful when deciding on appropriate color schemes to best suit a wider range of users.

    Semantics

    Users with visual disabilities can miss out on visual affordances. We need to make sure the information we are trying to express, is expressed in a way that flexible enough so assistive technology can pick up on it; creating an alternative interface for our users. we refer to this as expressing the semantics of an element.

    The HTML5 client uses the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) to provide access to screen readers. The following list of commonly used aria attributes:

    • aria-role
    • aria-label
    • aria-labelledby
    • aria-describedby
    • aria-hidden
    • aria-live
    • aria-expanded
    • aria-haspopup

    #### Links

    HTML5 ARIA spec - http://www.w3.org/TR/aria-in-html/

    ARIA spec - http://www.w3.org/WAI/PF/aria/

    Roles - http://www.w3.org/TR/wai-aria/roles

    States and Properties - http://www.w3.org/TR/wai-aria/states_and_properties

    Design Patterns - http://www.w3.org/TR/wai-aria-practices/#aria_ex

    Testing

    Testing for accessibility can be a somewhat painful process, if you try to manually find and fix all the issues. While it is good practice to go through a checklist and ensure all elements in the HTML5 client meet their accessibility requirements, this process can be very slow and time consuming. For this reason it is suggested to use an automated accessibility auditor first.

    aXe

    offered by Deque Systems

    aXe https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd

    Accessibility Developer Tools

    offered by Google Accessibility

    Accessibility Developer Tools https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

    Both of these extensions provide the ability to scan the DOM and report on any accessibility issues based on levels which can be set, weather AA or AAA standards. For the purposes of the HTML5 client we follow the AA guidelines. Any reported errors also come with a listing of potential fixes.

    Note: Once these extensions are installed to the browser they must be run from inside the console.

    Training

    The following is a free online accessibility course which can provide a very good understanding of the basics of dealing with web accessibility for both developers and designers.

    http://www.udacity.com/course/web-accessibility–ud891

    In the event you do not need to take the course but would still like access to the information as reference, the course is also found in full document form below. It is a live document which is updated by the developers over at Google.

    https://developers.google.com/web/fundamentals/accessibility