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'); } }