MediaRecorder 录制分段持久化与上传实践

概述MediaRecorder 可将媒体流录制为分段 Blob。本文展示录制回调、持久化与上传恢复流程。能力检测与录制const supportsMR = typeof MediaRecorder === 'function';

async function startRecord(stream) {

if (!supportsMR) throw new Error('unsupported');

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

mr.ondataavailable = e => e.data && saveChunk(e.data);

mr.start(1000);

return mr;

}

IndexedDB 持久化function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('chunks')) db.createObjectStore('chunks', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); }

async function saveChunk(blob) {

const db = await openDB('rec');

const tx = db.transaction('chunks','readwrite');

tx.objectStore('chunks').add(blob);

await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); });

db.close();

}

上传与恢复async function loadChunks() {

const db = await openDB('rec');

const tx = db.transaction('chunks','readonly');

const store = tx.objectStore('chunks');

const req = store.openCursor();

const list = [];

await new Promise((resolve, reject) => { req.onsuccess = e => { const c = e.target.result; if (c) { list.push(c.value); c.continue(); } else resolve(); }; req.onerror = () => reject(req.error); });

db.close();

return list;

}

async function uploadAll(url) {

const chunks = await loadChunks();

for (let i=0;i<chunks.length;i++) {

const res = await fetch(url, { method:'POST', headers:{ 'X-Index': String(i) }, body: chunks[i] });

if (!res.ok) throw new Error('upload failed');

}

}