使用MediaRecorder与FileSaver.js时，如何检测磁盘空间并处理保存失败？

1. 捕获FileSaver.js的保存错误 #

新版FileSaver.js的saveAs()方法返回Promise，可直接通过catch()捕获保存失败的异常，其中就包含磁盘空间不足的场景。

示例代码：

// 假设recordingBlob是已录制完成的媒体Blob对象
saveAs(recordingBlob, `会议录制_${new Date().toISOString()}.webm`)
  .catch(error => {
    handleSaveError(error);
  });

2. 识别磁盘空间不足的错误类型 #

Chrome在磁盘满时抛出的错误会带有特征性信息或错误名，可通过以下逻辑判断：

function handleSaveError(error) {
  const isDiskFull = 
    error.message.includes('Failed, File Too Large') ||
    error.message.includes('Not enough space') ||
    error.name === 'QuotaExceededError';

  if (isDiskFull) {
    showRetryPrompt();
  } else {
    alert(`保存失败：${error.message}`);
  }
}

3. 实现重试保存功能 #

给用户弹出提示并提供重试选项，点击后重新触发保存逻辑：

function showRetryPrompt() {
  if (confirm('磁盘空间不足，无法保存录制文件。是否清理空间后重试？')) {
    // 复用之前的Blob对象重新保存
    saveAs(recordingBlob, `会议录制_${new Date().toISOString()}.webm`)
      .catch(handleSaveError); // 递归捕获错误，支持多次重试
  }
}

4. 可选优化：提前检测磁盘剩余空间 #

如果想在录制前预判空间是否足够，可使用HTTPS环境支持的StorageManager API，对比预估文件大小和剩余空间：

async function checkDiskSpace(requiredSizeInBytes) {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    const estimate = await navigator.storage.estimate();
    const remainingSpace = estimate.quota - estimate.usage;
    return remainingSpace >= requiredSizeInBytes;
  }
  // 不支持API时默认允许继续流程
  return true;
}

// 使用示例：检查是否有100MB剩余空间
const requiredSize = 100 * 1024 * 1024;
const hasEnoughSpace = await checkDiskSpace(requiredSize);
if (!hasEnoughSpace) {
  alert('磁盘剩余空间不足，请清理后再开始录制');
}

注意：该API返回的是浏览器分配的存储配额，不一定等于硬盘实际剩余空间，仅作参考。

内容的提问来源于stack exchange，提问作者Exlord