Embarking on a small experiment to gauge the size of captured videos using the MediaDevices.getUserMedia() API.
My Safari implementation yielded videos 5-10 times larger than those in Chrome. Here's the code snippet:
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();
On my end, Safari clocks in at 6.5MB after 10 seconds, while Chrome maintains a modest 0.6MB.
Despite tweaking MediaConstraints, resolutions, and duration parameters, the glaring size discrepancy between the two browsers persists.