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>