Web实现客户端录音或录像的过程大致可以分为：采集音/视频，开始录音监听回调下载或者转码采集音/视频浏览器兼容注意事项除了127.0.0.1和localhost网址，网站必须配置SSL证书，即网站需要https环境，需要音视频输入媒体设备，如：麦克风，摄像头，包括内置。开始捕获音频和视频媒体流是使用navigator.mediaDevices对象的getUserMedia方法捕获的。//旧的浏览器可能根本没有实现mediaDevices，所以我们可以先设置一个空对象我们不能直接将getUserMedia//设置为对象，因为它可能会覆盖现有属性。这里我们只会添加getUserMedia属性，如果它不存在。if(navigator.mediaDevices.getUserMedia===undefined){navigator.mediaDevices.getUserMedia=function(constraints){//首先，如果有getUserMedia，获取它vargetUserMedia=navigator.webkitGetUserMedia||navigator.mozGetUserMedia;//有些浏览器根本不实现它——然后返回一个错误给promisereject以保持统一的接口if(!getUserMedia){returnPromise.reject(newError('getUserMediaisnotimplementedinthisbrowser'));}//否则，为旧的navigator.getUserMedia方法包装一个PromisereturnnewPromise(function(resolve,reject){getUserMedia.call(navigator,constraints,resolve,reject);});}}//开始收集输入媒体导航器.mediaDevices.getUserMedia({//捕获音频audio:true,//捕获视频video:true}).then(function(stream){//TODO}).catch(function(err){console.log(err.name+":"+err.message);});录制创建录制实例使用新命令创建MediaRecorder对象。//定义录音编码格式constoptions={mimeType:"video/webm;codecs=opus"};//录音实例constmediaRecorder=newMediaRecorder(audioStream,options);监听录音回调事件//创建一个集合来存储录音数据constrecordingBlobs=[];//监听录音错误mediaRecorder.onerror=async(event)=>{//TODO}//监听录音开始mediaRecorder.onstart=async(event)=>{//TODO}//监听录制结束或中断的回调mediaRecorder.onstop=async(event)=>{//这里我们可以处理录制的数据并存储在服务器上，例如：上传OSS}//监听录音暂停mediaRecorder.onpause=async(event)=>{//TODO}//监听录音恢复mediaRecorder.onstart=async(event)=>{//TODO}//返回数据在监视器记录期间mediaRecorder.ondataavailable=(event)=>{console.log('handleDataAvailable',event);if(event.data&&event.data.size>0){recordingBlobs.push(event.data);}}检测编码类型是否支持使用isTypeSupported方法，我们可以检测是否支持我们要录制的音频编码或视频编码。vartypes=["video/webm","audio/webm","video/webm\;codecs=vp8","video/webm\;codecs=daala","video/webm\;codecs=h264","audio/webm\;codecs=opus","video/mpeg"];for(variintypes){console.log("Is"+types[i]+"supported?"+(MediaRecorder.isTypeSupported(types[i])?"Maybe!":"Nope:("));}Startrecording//一直记录mediaRecorder.start();//记录top时间，单位为好秒mediaRecorder.start(60000);//Record60SecondsPauserecordingmediaRecorder.pause();ResumerecordingmediaRecorder.resume();EndrecordingmediaRecorder.stop();定时获取录音数据上面我们监控录音数据，回调ondataavailable，只有stop时才会触发orpause，如果录音的时间很长，那么需要处理的数据量会比较大，所以录音实例也提供了一个方法requestData，方便我们获取数据，需要注意的是，当前的录音状态必须正在录音，否则报错或将被举报。captureMedia.onclick=function(){mediaRecorder.requestData();//使到目前为止的数据快照可用//ondataavailable触发，然后继续捕获//在新的Blob中}下载或转码下载//模拟下载按钮点击实现下载功能download(){constblob=newBlob(recordedBlobs,{输入：'视频/webm'});consturl=window.URL.createObjectURL(blob);consta=document.createElement('a');A。style.display='无';a.href=网址；a.download='test.webm';文档.body.appendChild(a);a.点击（）；setTimeout(()=>{document.body.removeChild(a);window.URL.revokeObjectURL(url);},100);});对于转码，我们可以将数据发送到服务器（或OSS），由服务器进行转码。有兴趣的同学也可以去试试ffmpeg。结束我们可以对采集或录制后的音视频数据做很多处理，比如视频数据的处理，有兴趣的朋友可以查看下面的文章：前端图像处理秘籍前端秘籍“伪装”技术
