dav*_*lyi 3 javascript safari video-capture html5-video webrtc
我正在设置一个小实验来测量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 对象、分辨率和记录的持续时间，但两个浏览器之间似乎总是存在巨大的尺寸差异。
有一个选项可以bitsPerSecond在创建MediaRecorder.
new MediaRecorder(stream, { bitsPerSecond: 200_000 });
看来 Chrome 和 Safari 有不同的默认值。
还可以单独设置audioBitsPerSecond和videoBitsPerSecond。