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 | 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:
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-recorderYou 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>{
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 | { |
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. |
Drupal Media Recorder Plugin developed by the Yamada Language Center