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

froilanq / jquery-av-recorder Goto Github PK