项目中要pc端录音的功能,花了两天时间折腾了一下,目前可以兼容大多数主流浏览器,总体思路是:支持navigator.getUserMedia的浏览器采用H5 API 实现,不支持的基于flash实现。
基础知识
- navigator对象
- getUserMedia函数
- SWFObject如何使用
- .swf文件由来
- audio/video 标签
- 封装了getUserMedia的库函数:recorder.js
代码示例
- 使用navigator.getUserMedia实现
navigator.getUserMedia({
audio:true,
video:true
},function(stream){
document.getElementById('audio').src = createObjectURL(stream);
},function(err){
console.log(err);
})
- 在页面中插入静态flash代码
<object id="webcamXobjectX" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" >
<param name="movie" value="sound _record.swf"></param>
<object id="XwebcamXobjectX" type="application/x-shockwave-flash" data="sound_record.swf" width="200" height="200">
<param name="FlashVars" value="mode=callback;quality=85"
<param name="allowScriptAccess" value="always" />
</object>
</object>
- 在页面中借助SWFObject动态生成flash代码
/**
@ swfUrl String required swf文件地址
@ id String required 替换元素id
@ width String required 指定swf的宽度
@ height String required 指定swf的高度
@ version String required swf文件所需的adobe flash player的版本
@ expressInstallSwfurl String optional swf快速安装路径
@ flashvars Object Optional 传递给swf文件的参数
@ params Object Optional 指定嵌入对象的参数
@ attributes Object Optional 指定对象的属性
@ callbackFn Object Optional flash文件插入成功或者失败的回调函数
*/
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)