MediaRecorder录制流数据

在我们介绍了如何使用 WebRTC API 录制本地桌面数据并通过 HTML video 播放出来，现在我们想把采集到的本地桌面数据录制保存成文件并下载到本地，或者录制音视频设备采集到的数据，即可使用 MediaRecorder 类。stream：表示媒体流参数，可以是从 getUserMedia 或者 getDisplayMedia 获取到的流参数对象。options：表示限制选项，可以包含如下

椛茶

4980人浏览 · 2022-03-20 19:55:46

椛茶 · 2022-03-20 19:55:46 发布

一. 前言

在这篇博客我们介绍了如何使用 WebRTC API 录制本地桌面数据并通过 HTML video 播放出来，现在我们想把采集到的本地桌面数据录制保存成文件并下载到本地，或者录制音视频设备采集到的数据，即可使用 MediaRecorder 类。

var mediaRecorder = new MediaRecorder(stream, options);

stream：表示媒体流参数，可以是从 getUserMedia 或者 getDisplayMedia 获取到的流参数对象。

options：表示限制选项，可以包含如下属性。

属性值	说明
mimeType	录制容器的类型，可以是 video/webm;codecs=h264，audio/webm;codecs=opus
audioBitsPerSecond	音频码率
videoBitsPerSecond	视频码率
bitsPerSecond	整体码率

二. MediaRecorder

1. MediaRecorder 录制相关的函数

MediaRecorder.isTypeSupported()

说明：判断限制选项中设定的参数是否支持，例如可以设定 mimeType 为 video/webm;codecs=h264。

MediaRecorder.start(timeslice)

说明：开始录制，timeslice 为可选参数，如果设置了则会按时间切片存储数据。

MediaRecorder.stop()

说明：停止录制，调用 stop 后会触发 ondataavailable 事件。

MediaRecorder.pause()

说明：暂停录制。

MediaRecorder.resume()

说明：恢复录制。

2. MediaRecorder 事件

MediaRecorder.ondataavailable

说明：回调该事件函数表示存在有效数据了，通过回调事件函数参数的 data 属性可以获取到数据。如果 MediaRecorder.start 时指定了 timeslice，则会每个 timeslice 周期触发一次 ondataavailable 事件函数，如果没有指定 timeslice，则会在调用 stop 时回调 ondataavailable 事件函数。

MediaRecorder.onerror

说明：当错误发生时会回调该函数，录制会停止。

三. 实例演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>录制本地桌面</title>
    </head>
    <body>
        <table>
            <tr>
                <td><video autoplay playsinline id="video_player"></video></td>
                <td><video autoplay playsinline id="record_video_player"></video></td>
            </tr>
        </table>
        <button id="record">开始录制</button>
        <button id="play" disabled>播放</button>
        <button id="download" disabled>下载到本地</button>
        <script src="./js/record_desktop.js"></script>
    </body>
</html>

'use strict'

var videoPlayer = document.querySelector("video#video_player");
var recordVideoPlayer = document.querySelector("video#record_video_player");
var btRecord = document.querySelector("button#record");
var btPlay = document.querySelector("button#play");
var btDownload = document.querySelector("button#download");

var dataBuffer;
var mediaRecorder;

function HandleError(err) {
    console.log(err.name + "," + err.message);
}

function GetMediaStream(mediaStream) {
    videoPlayer.srcObject = mediaStream;
    window.stream = mediaStream;
}

function HandleDataAvailable(event) {
    if (event && event.data && event.data.size > 0) {
        dataBuffer.push(event.data);
    }
}

function StartRecord() {
    var options = {
        mimeType : 'video/webm;codecs=h264'
    };
    dataBuffer = [];

    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
        console.error(`${options.mimeType} is not supported!`);
        return;
    }

    try {
        mediaRecorder = new MediaRecorder(window.stream, options);
    } catch (err) {
        console.error('Fail to new MediaRecorder!');
        return;
    }
    mediaRecorder.ondataavailable = HandleDataAvailable;
    mediaRecorder.start();
}

function StopRecord() {
    mediaRecorder.stop();
}

if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
    console.log('getDisplayMedia is not supported!');
} else {
    var constraints = {
        video : {
            frameRate   : 24,
            width       : 640,
            height      : 480
        }
    };
    navigator.mediaDevices.getDisplayMedia(constraints)
        .then(GetMediaStream)
        .catch(HandleError);
}

btRecord.onclick = () => {
    if (btRecord.textContent === "开始录制") {
        StartRecord();
        btRecord.textContent = "结束录制";
        btPlay.disabled = true;
        btDownload.disabled = true;
    } else if (btRecord.textContent === "结束录制") {
        StopRecord();
        btRecord.textContent = "开始录制";
        btPlay.disabled = false;
        btDownload.disabled = false;
    }
}

btPlay.onclick = () => {
    var blob = new Blob(dataBuffer, {type : 'video/webm'});
    recordVideoPlayer.src = window.URL.createObjectURL(blob);
    recordVideoPlayer.srcObject = null;
    recordVideoPlayer.controls = true;
    recordVideoPlayer.play();
}

btDownload.onclick = () => {
    var blob = new Blob(dataBuffer, {type : 'video/webm'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.style.display = 'none';
    a.download = 'video.webm';
    a.click();
}

运行后效果如下所示，首先选择希望共享的屏幕或窗口。