WebRTC使用MediaRecoder錄製媒體流並下載
MediaRecoder
var mediaRecorder = new MideaRecoder(stream,options);
參數說明
| stream | 媒體流，可以從getUserMedia、、或者獲取 |
|---|---|
| options | 限制選項 |
限制選項說明
| mimeType | ( video/webm);(audio/webm);(video/webm);(codecs=vp8);(video/webm;codecs=h264);(audio/webm;codecs=opus) |
|---|---|
| audioBitsPerSecond | 音頻碼率 |
| videoBitsPerSecond | 視頻碼率（越多清晰度越高） |
| bitsPerSecond | 整體碼率 |
對於mimeType,每個括號是的一種約束，也可以將webm改爲mp4，codesc的種類必須要得到webm的支持
API
//開始錄製媒體，timeslice是可選的，如果設置了灰暗時間切片存儲數據
MediaRecoder.start(timeslice)
//停止錄製，此時或出發包括最終Blob數據(數據存儲區域)的dataavailable事件
MediaRecoder.stop()
MediaRecoder.pause //暫停錄製
MediaRecoder.resume() //恢復錄製
MediaRecoder.isTypeSupported() //檢查是否支持格式
事件
//每次記錄一定時間的數據（如果沒有指定時間片，則記錄整個數據）時會定期觸發
MediaRecoder.ondataavailable
//有錯誤發生時觸發
MediaRecoder.onerror
js存儲數據的方式
1、字符串
2、Blob（使用這種）
3、ArrayBuffer
4、ArrayBufferView
在學習錄製媒體流之前，我們先來認識一個新的API——getDisplayMedia( )，通過這個API，我們可以捕捉桌面並獲取視頻流（此功能需要較新版本的Chrome）
//contraints與getUserMedia中的contraints一致
var promise = navigator.mediaDevices.getDisplayMedia(contraints);
下面看看這個API的實戰效果
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC get video devices</title>
</head>
<body>
<video autoplay playsinline id="player"></video>
<script>
var videoplay = document.getElementById("player");
//調用瀏覽器的設備，獲取攝像頭的使用
navigator.mediaDevices.getUserMedia({video:true})
.then(stream => {
videoplay.srcObject = stream;
}).catch(error => {
console.log(error);
})
</script>
</body>
</html>
學習以上知識後，進入錄製音視頻的實戰：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>錄製音視頻</title>
</head>
<body>
<table>
<tr>
<td><video autoplay playsinline id="player"></video></td>
<td><video playsinline id="recplayer"></video></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>
<script>
var videoplay = document.getElementById("player");
var recvideo = document.getElementById("recplayer");
var btnRecord = document.getElementById("record");
var btnPlay = document.getElementById("recplay");
var btnDownload = document.getElementById("download");
//二進制數組，存儲視頻
var buffer;
//全局
var meidaRecoder;
navigator.mediaDevices.getUserMedia({video: true})
.then(stream => {
window.stream = stream;
videoplay.srcObject = stream;
}).catch(error => {
console.log(error);
});
function handleDataAvailable(e) {
//判斷是否有數據
if(e&& e.data && e.data.size > 0){
buffer.push(e.data);
}
}
function startRecord(){
//開始錄製,初始化數組
buffer = [];
var options = {
//錄製視頻，格式爲webm
mimeType: 'video/webm;codecs=vp8'
};
//檢驗是否支持mimeType
if(!MediaRecorder.isTypeSupported(options.mimeType)){
console.log(`${options.mimeType} is not supported`);
return;
}
try{
meidaRecoder = new MediaRecorder(window.stream, options)
}catch (e) {
console.log('Filed tp create MideaRecoder',e);
return;
}
//存儲數據時觸發事件,數據有效時執行handleDataAvailable
meidaRecoder.ondataavailable = handleDataAvailable;
//設置時間片,每過一個時間片就會存儲數據
meidaRecoder.start(10);
}
function stopRecord(){
//停止錄製
meidaRecoder.stop();
}
//錄製視頻
btnRecord.onclick = () => {
if(btnRecord.textContent === "Start Record"){
startRecord();
btnRecord.textContent = 'Stop Record';
btnPlay.disabled = true;
btnDownload.disabled = true;
}else {
stopRecord();
btnRecord.textContent = "Start Record";
btnPlay.disabled = false;
btnDownload.disabled = false;
}
};
//播放視頻
btnPlay.onclick = () => {
var blob = new Blob(buffer,{type: 'video/webm'});
recvideo.src = window.URL.createObjectURL(blob);
recvideo.srcObject = null;
recvideo.control = 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();
}
</script>
</body>
</html>