[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(); } ```