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库。
您必须在网站的部分中包含JS文件。确保相应地调整文件路径。
">
< link href =" ../AVRecorder/av-recorder.css " rel =" stylesheet " > < link href =" ../AVRecorder/loader.css " rel =" stylesheet " > < script src =" ../recorderJs/recorder.js " > script > < 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 用法
您必须在部分中包含所需的依赖项。有关示例,请参见示例/demo.php。
< 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插件