Git Product home page Git Product logo

moodle-tinymce_recordrtc's Introduction

RecordRTC TinyMCE plugin for Moodle

Scrutinizer Code Quality Build Status

Features

Add audio and video annotations to text, anywhere a TinyMCE text editor is present. This plugin adds buttons for recording audio or video (with audio) to the editor's toolbar. Using WebRTC technologies, all recording is done instantly in the browser, using nothing but HTML5 and JavaScript (no Flash!). After recording, users can embed the annotation directly into the text they are currently editing. The recording will appear as an audio or video player in the published writing.

Installation

There are currently two ways to install the plugin:

  1. Installing via zip file:

  2. Installing manually (if the user does not have necessary permissions for installing the first way):

    • Navigate to moodle_root_path/lib/editor/tinymce/plugins, where moodle_root_path is the location where Moodle is installed (ex.: /var/www/html/moodle)
    • Execute sudo git clone https://github.com/blindsidenetworks/moodle-tinymce_recordrtc.git recordrtc
    • Log into a Moodle account with administration capabilities
    • A screen should appear asking the install the plugin, similar to above

Soon, there will also be the possibility to install easily via the Moodle Plugins Directory.

Usage

To use the plugin, just click on one of the recording buttons (either the microphone or the video camera), and a popup will appear with a big "Start Recording" button. When clicked, the browser will probably ask for permission to use the webcam/microphone.

Recording buttons

After the recording starts, a timer will begin counting down, indicating how much time is left to record; when the timer hits 0, the recording will automatically stop (this will also happen if approaching the maximum upload size determined in the server settings).

Recording started

When the recording is finished, the user can play it back to see/hear if it is what they want. To embed the file, the user must click "Attach Recording as Annotation". A dialog box will pop up asking the user what the link should appear as in the text editor. After that, the file gets embedded right where the cursor was in the text.

Name the annotation

Annotation in editor

Configuration

The plugin can be configured during the initial install, and later by navigating to Site administration > Plugins > Text editors > TinyMCE HTML editor > RecordRTC. The administrator can:

  • Allow the users to record only audio, only video, or both (changing the buttons that appear in the editor toolbar)
  • Change the target bitrate of recorded audio
  • Change the target bitrate of recorded video
  • Set the recording time limit, to control maximum recording size

Common problems

  • If nothing is displayed in the popup after clicking one of the buttons in the TinyMCE toolbar, it is likely an issue with the X-Frame-Options header. To fix this, change the server configuration to set the header to SAMEORIGIN. Also, make sure that the header is not set twice as the browser will default the value to DENY (sometimes individual web apps also set the header, or there is some conflicting server configuration)
  • The default maximum size of uploads in PHP is very small, it is recommended to set the upload_max_filesize setting to 40M and the post_max_size setting to 50M for a time limit of 2:00 to avoid getting an alert while recording
  • The filesize of recorded video for Firefox will likely be twice that of other browsers, even with the same settings; this is expected as it uses a different writing library for recording video. The audio filesize should be similar across all browsers

moodle-tinymce_recordrtc's People

Contributors

jfederico avatar alanvelasques avatar jacobprudhomme avatar mirau89 avatar

Watchers

James Cloos avatar  avatar Luiz Rossi avatar Marcos Nunes avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.