Technology

The following technologies and were used in the creation of CrowdSpeak:

Bootstrap — a framework for developing responsive, mobile-first projects on the web. Bootstrap was used in this project in order to make the website responsive to all mobile devices as well as different monitors that come in different sizes. For more information, visit getboostrap.com.

Cookies — small pieces of data sent from a website and stored in the user’s computer by the web browser while the user is browsing. Cookies were designed to be a reliable mechanism for websites to remember state-based information. CrowdSpeak uses cookies to auto-fill user account information.

MediaSource — a JavaScript-based video recording API. MediaSource is an interface of the Media Source Extensions API by Mozilla Developer Network that represent a source of the media data for an HTMLMediaElement object. MediaSource was used for the addition of videos and audio of the videos in the website.

Mozilla XMLHttpRequest API — an API that provides client functionality for transferring data between a client and a server, providing an easy way to retrieve data from a URL without having to do a full page refresh. CrowdSpeak uses this API to update just a portion of a particular page without disrupting what the user is currently doing. For more Information, see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest.

Web Speech API — an API that aims to enable web developers to provide, in a web browser, speech-input and text-to-speech output features typically not available when using standard recognition screen-reader software. The API itself is agnostic of the underlying speech recognition and synthesis implementation and can support both server-based and client-based/embedded recognition and synthesis, and is designed to enable both brief (one-shot) speech input and continuous speech input. CrowdSpeak uses the API to transcribe a user’s recording on-the-fly. For more information, see https://ctrlq.org/code/19680-html5-web-speech-api.

CrowdSpeak was written in the following languages:

HTML and CSS — HTML describes the structure of the web pages using markup; web browsers use HTML to determine what to display on the webpage. CSS (“Cascading Style Sheets”) describe how these HTML elements should appear on screen. All non-JavaScript portions of our website were written in HTML.

JavaScript — a high-level runtime programming language used to create interactive elements of webpages. The interactive portions of the CrowdSpeak website (video recording, user login, etc.) were written in JavaScript, usually using one of the above APIs.

A full description of all technologies used in this project can be found on our website at https://sites.google.com/u.rochester.edu/crowdspeak/tech.