Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@casls/jquery-av-recorder

1.0.5 • Public • Published

jQuery AV Recorder

This project contains a jQuery plugin that that renders an audio and/or video recorder using HTML5 standards. It uses the WebRTC MediaDevices.getUserMedia() standard as well as Recorder.js to record audio and video directly through the web browser (without the need for Flash). This project also uses Twitter Bootstrap 3.3+ for the UI components.

Browser Support

Browser Version Audio Video
Safari 11+ Yes No
Chrome 53+ Yes Yes
Firefox 36+ Yes Yes
Edge 12+ Yes No

For additional details on browser capabilities:

Installation

Download the jQuery AV Recorder library here.
You must include the JS files in your <head> section of your website. Make sure you adjust file paths accordingly.

<!-- Don't forget to include jQuery and Twitter Bootstrap! -->
<!-- AV Recorder CSS -->
<link href="../AVRecorder/av-recorder.css" rel="stylesheet">
<!-- Progress Loader CSS -->
<link href="../AVRecorder/loader.css" rel="stylesheet">
<!-- RecorderJS library Jul 20, 2016 release -->
<script src="../recorderJs/recorder.js"></script>
<!-- jQuery AV Recorder JS -->
<script src="../AVRecorder/av-recorder-api.js"></script>
<script src="../AVRecorder/av-recorder-html5.js"></script>
<script src="../AVRecorder/av-recorder.js"></script>

You can also install the jQuery AV Recorder with npm.

npm install @casls/jquery-av-recorder

Usage

You MUST include the needed dependencies in the <head> section. See examples/demo.php for examples.

<!-- Don't forget the dependencies. -->
<div id="avRecorder" class=""></div>
 
<script type="text/javascript">
    $(document).ready(function(){
        $("#avRecorder").AvRecorder('avRecorder',{
            constraints: {
                audio: true,
                video: true,
                video_resolution: "320"
            },
            file: null,
            time_limit: "1800",
            server_upload_endpoint: "/jquery-av-recorder/examples/demoRecordFile.php" //Will be appended to the window.orign that the request is coming from.
        });
    });
</script>
 

Config Options

{
    constraints: {
        audio: true,
        video: true,
        video_resolution: "320"
    },
    file: null,
    time_limit: "1800",
    server_upload_endpoint: "/media/record-file" //Will be appended to the window.orign that the request is coming from.
}
config required type example description
constraints yes array
{
audio: true,
video: true,
video_resolution: "320"
}
An array containing the settings to pass into getUserMedia() as constraints.
file no string '/downloads/example.mp3' A string of the path to an existing file.
time_limit yes string '1800' A string representing the max amount of time for a recording in seconds.
server_upload_endpoint yes string '/media/record-file' A string of the server endpoint that will be appended to the request's origin.

Dependencies

Credit

Drupal Media Recorder Plugin developed by the Yamada Language Center

Install

npm i @casls/jquery-av-recorder

DownloadsWeekly Downloads

3

Version

1.0.5

License

Apache-2.0

Unpacked Size

74.2 kB

Total Files

13

Last publish

Collaborators

  • avatar
  • avatar