监听器启动事件EventTarget.addEventListener()方法将指定的监听器注册到EventTarget，当对象触发指定的事件时，将执行指定的回调函数。事件目标可以是文档Element、Document和Window上的元素或支持事件的任何其他对象（例如XMLHttpRequest）。addEventListener()通过将实现EventListener的函数或对象添加到调用它的EventTarget上指定事件类型的事件侦听器列表中来工作。document.querySelector('button#start').addEventListener('click',async()=>{document.querySelector('button#start').disabled=true;constconstraints={音频：{}，视频：{宽度：1280，高度：720}};awaitinit(constraints);});获取音视频轨道MediaDevices.getUserMedia()会提示用户授予使用媒体输入的权限，媒体输入会生成一个MediaStream，其中包含请求的媒体类型轨道。此流可以包含视频轨道（来自硬件或虚拟视频源，例如相机、视频捕获设备、屏幕共享服务等）、音频轨道（也来自硬件或虚拟音频源，例如麦克风、A/D转换器等），以及可能的其他轨道类型。它返回一个Promise对象，当成功时，它会解析并回调一个MediaStream对象。如果用户拒绝许可，或者所需的媒体源不可用，则承诺将拒绝并返回PermissionDeniedError或NotFoundError。asyncfunctioninit(constraints){try{conststream=awaitnavigator.mediaDevices.getUserMedia(constraints);处理成功（流）；}catch(e){console.error('navigator.getUserMediaerror:',e);}}HTMLMediaElement接口的srcObject属性设置或返回一个对象，该对象提供与HTMLMediaElement关联的媒体源。该对象通常是MediaStream，但根据规范，它可以是MediaSource、Blob或File。函数handleSuccess（流）{recordButton.disabled=false;window.stream=流；constgumVideo=document.querySelector('video#gum');gumVideo.srcObject=stream;}记录媒体流MediaRecorder()构造函数创建一个记录指定MediaStream的MediaRecorder对象。MediaRecorder.ondataavailable事件处理程序API处理dataavailable事件，并提供Blob数据以用于响应正在运行的代码。当MediaRecorder将媒体数据传送到您的应用程序以供使用时，将触发dataavailable事件。数据在包含数据的Blob对象中提供。这发生在四种情况下：当媒体流结束时，所有尚未传递给ondataavailable处理程序的媒体数据都在单个blob中传递。当调用MediaRecorder.stop()(en-US)时，自记录开始或上次发生dataavailable事件以来捕获的所有媒体数据都将传递到blob中；此后，捕获结束。当调用MediaRecorder.requestData()(en-US)dataavailable时，将传递自记录开始或上次事件发生以来捕获的所有媒体数据；然后blob创建一个新文件，媒体捕获继续进入blob。如果将timeslice属性传递给启动媒体捕获的MediaRecorder.start()(en-US)方法，则dataavailable事件会每隔timeslice毫秒触发一次。这意味着每个blob都有特定的持续时间（最后一个blob除外，它可能更短，因为它将是自上次事件以来剩下的所有内容）。让mediaRecorder;constrecordButton=document.querySelector('button#record');recordButton.addEventListener('click',()=>{if(recordButton.textContent==='开始录音'){startRecording();}else{stopRecording();recordButton.textContent='StartRecording';playButton.disabled=false;}});functionstartRecording(){recordingBlobs=[];尝试{mediaRecorder=newMediaRecorder(window.stream);}catch(e){console.error('创建MediaRecorder时出现异常：',e);}recordButton.textContent='停止录音';playButton.disabled=true;mediaRecorder.ondataavailable=handleDataAvailable;mediaRecorder.start();}functionstopRecording(){mediaRecorder.stop();}functionhandleDataAvailable(event){if(event.data&&event.data.size>0){recordingBlobs.push(event.data);}}playmediastreamURL.createObjectURL()静态方法创建一个DOMString，其中包含表示参数中给定对象的URL。此URL的生命周期与创建它的窗口中的文档相关联。这个新的URL对象代表指定的File对象或Blob对象。让recordingBlobs;constrecordedVideo=document.querySelector('video#recorded');constplayButton=document.querySelector('button#play');playButton.addEventListener('click',()=>{constsuperBuffer=newBlob(recordsBlobs,{type:'video/webm'});recordedVideo.src=null;recordVideo.srcObject=null;recordedVideo.src=window.URL.createObjectURL(superBuffer);recordVideo.controls=true;recordVideo.play();});HTML
