浏览器的录制API -- MediaRecorderMediaRecorder 是 MediaStream Recor

核心

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体录制的接口, 通过调用 MediaRecorder() 构造方法实例化一个MediaRecorder对象，对指定的MediaStream对象进行录制。

实例化

var mediaRecorder = new MediaRecorder(stream[, options]);

stream 要录制的流
options 字典对象，包含一些配置。如mimeType、audioBitsPerSecond、videoBitsPerSecond（音视频比特率）

常用方法

MediaRecorder.isTypeSupported()
返回Boolean值，检测设置的 mimeType 是否被支持
MediaRecorder.start([timeslice])
开始录制，可以传入timeslice参数（毫秒），录制的媒体会按照设置的值分割成一个个单独的区块。否则以默认的方式录制一个整块。
MediaRecorder.pause()
暂停录制
MediaRecorder.resume()
继续被暂停的录制动作
MediaRecorder.stop()
停止录制. 同时触发dataavailable事件,返回一个存储Blob内容的录制数据.之后不再记录
MediaRecorder.requestData()
请求一个从开始到当前接收到的，存储为Blob类型的录制内容（或者返回上一次调用requestData()方法之后到现在的内容）。调用此方法后，录制将会继续，但是会创建一个新的Blob对象。

事件处理

MediaRecorder.ondataavailable()
调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)
其他事件监听函数，onerror, onpause, onresume, onstart, onstop（stop在媒体录制结束、媒体流结束时、调用stop时触发）

示例

录制一个摄像头(自拍视频)

<!--用以预览-->
<video></video>

<button onclick="onStartRecord()">开始</button>
<button onclick="onDownload()">下载</button>

获取摄像头媒体流

// 想要获取一个最接近 1280x720 的相机分辨率
var constraints = {
    audio: true,
    video: { width: 1280, height: 720 },
};
var recordedChunks = [];

var onStartRecord = function () {
    navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function (mediaStream) {
            var video = document.querySelector('video');
            video.srcObject = mediaStream;
            video.onloadedmetadata = function (e) {
                video.play();
            };

            startRecord(mediaStream);
        })
        .catch(function (err) {
            console.log(err.name + ': ' + err.message);
        }); // 总是在最后检查错误
};

录制相关

function startRecord(stream) {
    var options = { mimeType: 'video/webm; codecs=vp9' };
    mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();
}

//onDownloadClick，调用stop会停止并会触发ondataavailable，相应下载逻辑在回调中完成
var onDownload = function () {
    console.log('stopping');
    mediaRecorder.stop();
};

function handleDataAvailable(event) {
    console.log('data-available');
    if (event.data.size > 0) {
        recordedChunks.push(event.data);
        console.log(recordedChunks);
        download();
    } else {
        // ...
    }
}

function download() {
    var blob = new Blob(recordedChunks, {
        type: 'video/webm',
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

拓展

可以结合webrtc的屏幕分享接口方便的实现浏览器录屏。（包括浏览器外内容）