為什么 Safari 在使用 MediaDevices.getUserMedia() API 時會產生比 Chrome 更大的視頻？

Question

我正在設置一個小實驗來測量MediaDevices.getUserMedia() API 捕獲的視頻的大小。

當我在 Safari 中運行我的代碼時，它生成的視頻比 Chrome 大 5-10 倍。 這是我的代碼：

index.html:

<html lang="en">
  <head>
    <title>Video Spike</title>
  </head>
  <body>
    <video autoplay id="video" muted></video>
    <br />
    <button id="record">Record 10 second video</button>
  </body>
  <script src="./index.js"></script>
</html>

index.js:

const videoElem = document.getElementById("video");
const recordBtn = document.getElementById("record");

async function startCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: {
      frameRate: 30,
      height: 240,
      width: 240,
    },
  });

  videoElem.srcObject = stream;

  let buffer;

  recordBtn.addEventListener("click", () => {
    buffer = [];
    const recorder = new MediaRecorder(stream);

    setTimeout(() => recorder.stop(), 10000);

    recorder.ondataavailable = async (event) => {
      buffer.push(event.data);
      console.log(
        "current video size:",
        new Blob(buffer, { type: "video/webm" }).size / 1024 / 1024,
        "MB"
      );
    };

    recorder.start(1000);
  });
}

startCamera();

10 秒后，Safari 記錄了 6.5MB，Chrome 記錄了 0.6MB。

我試着玩弄 MediaContraints object、分辨率和記錄的持續時間，但兩個瀏覽器之間似乎總是存在巨大的大小差異。

Answer 1

創建bitsPerSecond時可以選擇設置MediaRecorder 。

new MediaRecorder(stream, { bitsPerSecond: 200_000 });

看起來 Chrome 和 Safari 有不同的默認值。

也可以分別設置audioBitsPerSecond和videoBitsPerSecond 。

Answer 2

最大的問題實際上是 Safari 確實將您的視頻編碼為 mp4 容器中的 H264，而 Chrome 確實會生成 VP9 webm 視頻。

在Blob()構造函數中設置{ type: "video/webm" }不足以使其成為實際的 webm 文件。 為此，您必須設置MediaRecorder的mimeType ：

const recorder = new MediaRecorder(stream, { mimeType: "video/webm" });

請注意，您甚至可以控制正在使用的編解碼器。 但不幸的是，Safari 仍然不支持 mp4 中的 H264。

因此，雖然 Safari 確實具有明顯更高的videoBitsPerSecond默認值（10Mbps vs Chrome 中的 2.5Mbps）並且您可以按照其他答案的建議減少它，但兩種瀏覽器之間仍然存在巨大差異，例如使用您的測試用例並強制使用 2.5Mbps 的視頻比特率，我的 Safari 生成一個 3MB 的文件，而 Chrome 生成一個 0.8Mb 的文件。 你對此無能為力。

為什么 Safari 在使用 MediaDevices.getUserMedia() API 時會產生比 Chrome 更大的視頻？

問題描述

2 個解決方案

解決方案1
2 已采納 2022-11-24 23:05:48

解決方案2
0 2023-06-09 08:25:05

為什么 Safari 在使用 MediaDevices.getUserMedia() API 時會產生比 Chrome 更大的視頻？

問題描述

2 個解決方案

解決方案1 2 已采納 2022-11-24 23:05:48

解決方案2 0 2023-06-09 08:25:05

解決方案1
2 已采納 2022-11-24 23:05:48

解決方案2
0 2023-06-09 08:25:05