WebRTC 之 MediaRecorder: 用你的浏览器录音和录像
既然现在的笔记本电脑，平板，手机都有摄像头和麦克风，那么录音和录像就是一件非常容易的事情了，但是如果不用别人写好的录音录像程序，让你自己来实现一个录音和录像应用，其实也没那么简单。
但是有了 WebRTC 和支持它的浏览器， 事情就变得简单多了
现代浏览器不仅支持 audio 和 video 两个新的元素，还支持了MediaStream 和 MediaRecorder 这样的媒体 API
第一步：创建一个供演示的 HTML 文件
源码在此 record_demo.html
这个 html 文件很简单，就是如下四个按钮
再加上一个 HTML5 支持的 video 元素
<video autoplay></video>
第二步：处理这四个按键的的 click 事件
源码见 record_demo.js
1. 打开媒体 “open media” 按键的处理 - 获取本地媒体流
var localStream = null;var mediaRecorder = null;var recordChunks = [];var recordElement = document.querySelector('video');var recordMediaType = 'video/webm';var mediaConstraints = {
audio: {
echoCancellation: {exact: true}
},
video: {
width: 640,
height: 480
}};async function openMedia(e, constraints) {
if (mediaButton.textContent === 'Close Media') {
closeMedia(e);
return;
}
try {
const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
handleSuccess(stream);
mediaButton.textContent = 'Close Media';
console.log('openMedia success ');
} catch (ex) {
handleError(ex);
}}function handleSuccess(stream) {
localStream = stream;
recordElement.srcObject = stream;}上述代码获取本地用户的 audio 和 video 媒体流，async 和 await 关键字是ES7 提供的异步支持，await 就是先返回，等异步操作完成再回来执行下一步语句， async 代表函数是异步的。
当媒体流获取后，就赋予本地的
2. 开始录制 “start record” 的处理 - 录制本地媒体流
MediaRecorder API 就是录制媒体流的核心
image.png
function startRecord() {
if(!localStream) {
console.error("stream is not created.");
return;
}
if (recordButton.textContent === 'Stop Record') {
stopRecord();
return;
}
var options = {mimeType: recordMediaType};
mediaRecorder = new MediaRecorder(localStream, options);
mediaRecorder.start();
recordButton.textContent = 'Stop Record';
playButton.disabled = true;
downButton.disabled = true;
console.log("recorder started");
mediaRecorder.ondataavailable = function(e) {
console.log("data available", e.data);
recordChunks.push(e.data);
}
mediaRecorder.onstop = function(e) {
console.log('onstop fired');
var blob = new Blob(recordChunks, { 'type' : recordMediaType });
var blobURL = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = blobURL;
a.download = 'test.webm';
document.body.appendChild(a);
};}上述代码很简单，关键的地方就是创建 MediaRecorder 对象，传入媒体流，然后开始录制
var options = {mimeType: recordMediaType};mediaRecorder = new MediaRecorder(localStream, options);mediaRecorder.start();为了能播放和下载所录制的媒体文件，需要将录制的内容存贮下来var recordChunks = [];是一个字节数组， 在录制停止时一起存入本地的 blob 对象中
mediaRecorder.ondataavailable = function(e) {
console.log("data available", e.data);
recordChunks.push(e.data);
}
mediaRecorder.onstop = function(e) {
console.log('onstop fired');
var blob = new Blob(recordChunks, { 'type' : recordMediaType });
var blobURL = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = blobURL;
a.download = 'test.webm';
document.body.appendChild(a);
};3. 播放 “Plan Record” 的处理 - 播放本地存储的媒体文件
它由录制时保存下来的 blob 数组创建出来
function playRecord() {
const blob = new Blob(recordChunks, {type: recordMediaType});
recordElement.src = null;
recordElement.srcObject = null;
recordElement.src = window.URL.createObjectURL(blob);
recordElement.controls = true;
recordElement.play();}4. 下载 “Download Record ” 的处理 - 下载本地存储的媒体文件
function downRecord() {
const blob = new Blob(recordChunks, {type: recordMediaType});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);}可点击https://www.fanyamin.com/webrtc/examples/record_demo.html 看最终的效果：
参考资料
API 参见 https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
实例代码参考 https://webrtc.github.io/samples/src/content/getusermedia/record/
作者：瓦尔特有范
链接：https://www.jianshu.com/p/308d1da1fb83
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。