jquery av recorder
该项目包含一个jQuery插件,该插件可使用HTML5标准呈现音频和/或视频录音机。它使用WebRTC MediaDevices.getUsermedia()标准和recorder.js直接通过Web浏览器录制音频和视频(无需闪存)。该项目还为UI组件使用Twitter Bootstrap 3.3+。
浏览器支持
| 浏览器 | 版本 | 声音的 | 视频 |
|---|---|---|---|
| 野生动物园 | 11+ | 是的 | 不 |
| 铬合金 | 53+ | 是的 | 是的 |
| Firefox | 36+ | 是的 | 是的 |
| 边缘 | 12+ | 是的 | 不 |
有关浏览器功能的更多详细信息:
- mdn getusermedia()
- caniuse.com getusermedia()
- MDN Mediarecorder API
- caniuse.com Mediarecorder API
安装
在此处下载jquery av recorder库。
您必须在网站的<head>部分中包含JS文件。确保相应地调整文件路径。
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>\”>
<!-- 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 >
您也可以使用NPM安装jquery av recorder 。
npm install @casls/jquery-av-recorder
用法
您必须在<head>部分中包含所需的依赖项。有关示例,请参见示例/demo.php。
<!-- 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 | 必需的 | 类型 | 例子 | 描述 |
|---|---|---|---|---|
constraints |
是的 | 大批 |
{
|
一个包含设置的数组将其传递到getusermedia()作为约束。 |
file |
不 | 细绳 | '/downloads/example.mp3' | 现有文件的路径的字符串。 |
time_limit |
是的 | 细绳 | '1800' | 一个代表录音的最大时间的字符串在几秒钟内。 |
server_upload_endpoint |
是的 | 细绳 | '/媒体/记录文件' | 服务器端点的字符串将附加到请求的原点。 |
依赖性
- jQuery
- recorder.js
- Twitter引导程序
信用
Yamada语言中心开发的Drupal Media Recorder插件
