MediaRecorder compresses any MediaStream (camera, screen, canvas captureStream(), WebRTC or Web Audio) into a file. Check formats with isTypeSupported(): Chrome 152 1 records WebM and MP4, and Safari 10 added WebM in version 18.4.
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
const types = ['video/webm;codecs=vp9,opus', 'video/mp4'];
const mimeType = types.find((t) => MediaRecorder.isTypeSupported(t));
const recorder = new MediaRecorder(stream, { mimeType });
const chunks = [];
recorder.ondataavailable = (e) => chunks.push(e.data);
recorder.onstop = () => (player.src = URL.createObjectURL(new Blob(chunks, { type: mimeType })));
recorder.start(1000); // emit a chunk every second
setTimeout(() => recorder.stop(), 3000); // Chrome 152: 3 chunks, 193 KB of VP9The timeslice lets you upload chunks while recording. Chrome's WebM files carry no duration (<video> reports Infinity), so remux them before seeking, for example with ffmpeg -i in.webm -c copy out.webm.