[TOC] ## MediaRecoder ### 基本格式 ``` var mediaRecorder = new MediaRecorder(stream[,options]); ``` 参数说明： |参数 | 说明 | | --- | --- | | stream | 媒体流，可从getUserMedia、\<video>、\<audio>或\<canvas>获取 | |options|限制选项| | 选项 | 说明 | | --- | --- | | mimeType | video/webm audio/webm video/webm; codecs=vp8 video/webm;codecs=h264 audio/webm;codecs=opus | | audioBitsPerSecond| 音频码率| | videooBitsPerSecond| 视频码率| |bitsPerSecond| 整体码率| ### MediaRecorder API(一) * MediaRecorder.start(timeslice) 开始录制媒体，timeslice是可选的，如果设置了会按时间切片存储数据 * MediaRecorder.stop() 停止录制，此时会触发包括最终Blob数据的dataavailable时间 * MediaRecorder.pause() * MediaRecorder.resume() * MediaRecorder.isTypeSupported() ### MediaRecorder事件 * MediaRecorder.ondataavailable 每次记录一定时间的数据时（如果没有指定时间片，则记录整个数据时）会定时触发。 onerror 录制错误时候会停止录制 ### JavaScript几种存储数据的方式 * 字符串 * Blob * ArrayBuffer * ArrayBufferView ## 实际操作 ### 创建标签 创建开始录制/开始播放/开始下载/存放录制视频的标签： ``` <table> <tr> <td> <video autoplay playsinline id="player"></video> </td> <td> <!--播放录制视频标签--> <video autoplay playsinline id="recplayer"></video> </td> <td> <div id="constraints" class="output"> </div> </td> </tr> <tr> <!--开始录制视频按钮--> <td><button id="record">Start Record</button></td> <!--播放录制视频按钮--> <td><button id="recplay" disabled>Play</button></td> <!--下载录制视频按钮--> <td><button id="download" disabled>Download</button></td> </tr> </table> ``` 在gotMediaStream函数中,把流放到全局的window中 ``` window.stream = stream; ``` 再获取响应的按钮，添加相应的按钮事件： ``` // 录制视频的四个按钮 var recvideo = document.querySelector('video#recplayer'); var btnRecord = document.querySelector('button#record'); var btnPlay = document.querySelector('button#recplay'); var btnDownload = document.querySelector('button#download'); //录制视频的数据 var buffer; var mediaRecorder; function handleDataAvilable(e) { if (e && e.data && e.data.size > 0) { buffer.push(e.data); } } function startRecord() { buffer = []; var options = { memeType: 'video/webm;codecs=vp8' } if (!MediaRecorder.isTypeSupported(options.memeType)) { console.error('${options.memeType} is not suttported'); return; } try { mediaRecorder = new MediaRecorder(stream, options); }catch (e) { console.error('Failed to create MediaRecorder:', e); } mediaRecorder.ondataavailable = handleDataAvilable; mediaRecorder.start(10); } function stopRecord() { mediaRecorder.stop(); } //录制视频按钮点击事件 btnRecord.onclick = ()=> { if (btnRecord.textContent === 'Start Record') { startRecord(); btnRecord.textContent = 'Stop Record'; btnPlay.disabled = false; btnDownload.disabled = false; }else { stopRecord(); btnRecord.textContent = 'Start Record'; // btnPlay.disabled = true; // btnDownload.disabled = true; } }; btnPlay.onclick = ()=> { var blob = new Blob(buffer, {type: 'video/webm'}); recvideo.src = window.URL.createObjectURL(blob); recvideo.srcObject = null; recvideo.controls = true; recvideo.play(); } // 下载按钮 btnDownload.onclick = ()=> { var blob = new Blob(buffer, {type: 'video/webm'}); var url = window.URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.style.display = 'none'; a.download = 'aaa.webm'; a.click(); } ```