項目中要pc端錄音的功能，花了兩天時間折騰了一下，目前可以兼容大多數(shù)主流瀏覽器，總體思路是：支持navigator.getUserMedia的瀏覽器采用H5 API 實現(xiàn)，不支持的基于flash實現(xiàn)。
基礎知識
- navigator對象
- getUserMedia函數(shù)
- SWFObject如何使用
- .swf文件由來
- audio/video 標簽
- 封裝了getUserMedia的庫函數(shù)：recorder.js
代碼示例
- 使用navigator.getUserMedia實現(xiàn)
navigator.getUserMedia({
audio:true,
video:true
},function(stream){
document.getElementById('audio').src = createObjectURL(stream);
},function(err){
console.log(err);
})
- 在頁面中插入靜態(tài)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動態(tài)生成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文件的參數(shù)
@ params Object Optional 指定嵌入對象的參數(shù)
@ attributes Object Optional 指定對象的屬性
@ callbackFn Object Optional flash文件插入成功或者失敗的回調(diào)函數(shù)
*/
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)
