WebRTC如何减小录制视频的大小

Question

我使用这个示例https://www.webrtc-experiment.com/RecordRTC/在(Firefox/Chrome)中录制了10秒的视频。录制的blob大小大约为[10秒，4.36MB（320x240）]，然后我修改了一些参数如下：

var videoConstraints = {
    audio: false,
    video: {
        mandatory: {
            width: { min: 320 },
            height: { min: 240 }
        },
        optional: [
            { width: 320 },
            { width: 
                { min: 320 }
            },
            { frameRate: 60 },
            { quality: 10 },
            { width: 
                { max: 320 }
            },
            { facingMode: "user" }
        ]
    }
};

但是blob的大小几乎相同。我该怎么做，才能减小记录的blob大小呢。

- Santosh Shingare

Answer 1

您的限制条件混合了Chrome特定的格式和标准格式，这样在任何浏览器下都无法工作。

标准格式（在Chrome中仍需要polyfill）：

var constraints = {
  video: {
    width: { min: 320 },
    height: { min: 240 },
    advanced: [
       { width: 320 },
       { width: { min: 320 } },
       { frameRate: 60 },
       { width: { max: 320 } },
       { facingMode: "user" }
    ]
  }
};

标准还可以让你以声明方式表达，因此以下代码是相同或更好的选择：

（这里放链接）

var constraints = {
  video: {
    width: { min: 320, ideal: 320 },
    height: { min: 240 },
    frameRate: 60,
    facingMode: "user",
  }
};

最后，如果您想要缩小尺寸，请勿使用min。 min和max是边界值，因此min不能给您低分辨率，恰恰相反，它设置了一个下限。请改用ideal来控制重力或甚至使用max。 我不会解释这在Chrome中是什么样子，因为它使用的语法已经过时，不能在其他浏览器中使用，但此代码段使用polyfill可以在各个浏览器中运行。

var constraints = {
  video: {
    width: { min: 320, ideal: 320 },
    height: { min: 240 },
    frameRate: 60,
    facingMode: "user",
  }
};

function start() {
  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) { v.srcObject = stream; })
  .then(function() {
    return new Promise(function(r) { v.onloadedmetadata = r;});
  })
  .then(function() {
    log("Success: "+ v.videoWidth +"x"+ v.videoHeight);
  })
  .catch(failed);
}

function log(msg) { div.innerHTML += "<p>" + msg + "</p>"; }
function failed(e) { log(e + ", line " + e.lineNumber); }

<video id="v" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button><div id="div"></div>
<script src="https://rawgit.com/webrtc/adapter/master/adapter.js"></script>

quality不是一个标准的限制条件。

- jib

---

不确定为什么代码片段在Chrome中无法工作。在 这个fiddle 中可以工作。 - jib

Answer 2

@jib的回答将降低捕获的分辨率/帧速率。 然而，blob大小不改变的原因是您需要减少MediaRecorder的编码比特率。 然而，目前没有任何浏览器实现了MediaRecorder的比特率限制（Firefox计划很快这样做- Firefox最初的实现是支持Firefox OS相机中的视频录制，并以固定比特率运行）。

- jesup