使用HTML5中的MediaRecorder API录制最高质量的视频。

Question

使用 MediaRecorder API我能够编写一个页面，从网络移动摄像头捕捉视频，并将视频保存在本地磁盘上。代码的片段如下。

let mediaRecorder;
let recordedBlobs;

window.addEventListener('load', async () => {
    const constraints = {
        audio: true,
        video: true
    };

    await init(constraints);
});

async function init(constraints) {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
}

function handleSuccess(stream) {
    window.stream = stream;

    const camVideo = document.querySelector('video#vidCamera');
    camVideo.srcObject = stream;
}

function startRecording(mime) {
    recordedBlobs = [];
    let options = { mimeType: 'video/webm;codecs=vp9,opus'};

    mediaRecorder = new MediaRecorder(window.stream, options);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();
}

function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

这工作很好，我下载文件后，视频被捕获，它播放正常。 我的问题是关于视频的质量。

我的问题是关于视频的质量： 忽略任何系统移动资源的限制，我想设置MediaRecoder的属性，以产生一个尽可能高的质量的视频（录音）。我知道这是通过传递适当的选项来处理的，在我的例子中是 { mimeType: 'video/webm;codecs=vp9,opus'}. 我尝试了不同的，并为每个记录10秒的视频（见大小）。

options = { mimeType: 'video/webm;codecs=avc1,opus'};   //904KB
options = { mimeType: 'video/webm;codecs=h264,opus' };  //923KB
options = { mimeType: 'video/webm;codecs=vp9,opus' };   //1951KB
options = { mimeType: 'video/x-matroska;codecs=avc1' }; //917KB
options = { mimeType: 'video/webm;codecs=vp8,opus' };   //2687KB
options = { mimeType: 'video/webm;codecs=avc1' };       //917KB
options = { mimeType: 'video/webm;codecs=h264' };       //919KB
options = { mimeType: 'video/webm' };                   //906KB
options = { mimeType: '' };                             //896KB

上述所有视频都有帧 高x宽480x640. 请注意，我没有在代码中任何地方设置这些尺寸。

我可以看到最大尺寸是由vp8和opus产生的。

1. 这是否意味着，最高质量的视频是由vp8和opus的组合？
2. 如果不是这样的话，什么组合的视频音频编解码器将产生最高的质量？
3. 那尺寸呢，是不是应该更高？还是取决于我使用的设备机器？

我已经检查了 高质量的视频演示推荐 此处 但没有给出的组合选项的例子。我已经尝试过avc1，opus上面，它只产生904KB视频。

我们的目标是选择视频音频编解码器的组合，以产生最高质量的视频，我假设，它将有所有视频的最大尺寸。

EDIT:

所以我最终选择了vp8,opus，但有以下限制条件。

选项。

let options = { mimeType: 'video/webm;codecs=vp8,opus' };

限制条件：

const constraints = {
    audio: true,
    video: {
        height: { min: 720, max: 1280 },
        width: { min: 1080, max: 1920 },
        frameRate: { min: 15, ideal: 24, max: 30 },
        facingMode: "user"
    }
}

这样就能制作出我满意的高质量视频 还请注意代码中使用的类型（mp4），其中录制的块状物被转为blob。

Blob。

const blob = new Blob(recordedBlobs, { type: 'video/mp4' });

Answer 1

我假设480x640是你的网络摄像头的尺寸。但为了确保你得到最大的视频尺寸，请为宽度和高度设置一个理想的约束 (MDN 参考）。)

const constraints = { audio: true,      video:{
    width: { ideal: <aBigNumber> },
    height: { ideal: <aBigNumber> },      frameRate: {ideal: <framerate>}
}};

对于你提出的哪种质量最高的问题，尺寸不是你最好的参考。每种格式都会以不同的方式对视频进行编码和压缩--就像你可以拥有质量相同但压缩算法不同的JPG或PNG一样。