iPad浏览器中MediaRecorder录制音频遇WebKitBlobResource error3及中断问题

核心问题根源 #

1. MIME类型兼容性缺失：硬编码指定audio/mp3作为输出格式，但iPad的WebKit内核（Safari）并不原生支持MP3编码的MediaRecorder输出，强制指定会导致Blob生成异常或录制流程中断。
2. 频繁Blob操作触发资源异常：每次ondataavailable事件触发就合并Blob并更新音频播放器源，WebKit环境下这类高频资源操作容易触发WebKitBlobResource error 3。
3. 录制状态切换的资源管理漏洞：暂停录制时的requestData()与pause()调用顺序不合理，且未主动释放媒体流资源，导致WebKit内部资源堆积引发录制中断。

具体修复步骤 #

1. 适配WebKit支持的原生MIME类型 #

不要硬编码格式，先检测MediaRecorder支持的音频类型，优先选择WebKit原生兼容的格式：

@ViewChild('audioPlayer') audioPlayer: ElementRef;
mediaRecorder: MediaRecorder;
chunks: Blob[] = [];
currentAudioURL: string | null = null;

startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        // 优先选择WebKit支持的格式
        const supportedMimeTypes = [
          'audio/mp4',
          'audio/webm;codecs=opus',
          'audio/wav'
        ];
        const selectedMimeType = supportedMimeTypes.find(mime => MediaRecorder.isTypeSupported(mime)) || 'audio/mp4';
        
        this.mediaRecorder = new MediaRecorder(stream, { mimeType: selectedMimeType });
        console.log('MediaRecorder.mimeType: ', selectedMimeType);
        
        this.mediaRecorder.ondataavailable = (e: BlobEvent) => {
          this.chunks.push(e.data);
        };

        this.mediaRecorder.onstop = () => {
          console.log('Stopped recording');
          this.processRecordingChunks();
          this.chunks = [];
          // 主动释放媒体流轨道
          stream.getTracks().forEach(track => track.stop());
        };

        // 新增错误监听
        this.mediaRecorder.onerror = (e: MediaRecorderErrorEvent) => {
          console.error('MediaRecorder异常:', e.error);
          this.cleanUpResources();
        };

        this.mediaRecorder.start();
     
      })
      .catch(error => {
        console.error('麦克风访问失败: ', error);
      });
}

2. 优化Blob与ObjectURL操作逻辑 #

仅在录制暂停或停止时处理完整数据，避免频繁资源操作：

// 统一处理录制数据的方法
processRecordingChunks() {
  if (this.chunks.length === 0) return;
  
  // 释放旧的ObjectURL，避免内存泄漏
  if (this.currentAudioURL) {
    window.URL.revokeObjectURL(this.currentAudioURL);
  }
  
  const blob = new Blob(this.chunks, { type: this.mediaRecorder.mimeType });
  this.currentAudioURL = window.URL.createObjectURL(blob);
  this.audioPlayer.nativeElement.src = this.currentAudioURL;
}

pauseRecording() {
  if (this.mediaRecorder.state === 'recording') {
    this.mediaRecorder.pause();
    // 延迟请求数据，确保片段写入完成
    setTimeout(() => {
      this.mediaRecorder.requestData();
      this.processRecordingChunks();
    }, 100);
  }
}

// 新增资源清理方法
cleanUpResources() {
  this.chunks = [];
  if (this.currentAudioURL) {
    window.URL.revokeObjectURL(this.currentAudioURL);
    this.currentAudioURL = null;
  }
}

3. 组件销毁时清理所有资源 #

在Angular组件生命周期中主动释放资源，避免WebKit内存溢出：

ngOnDestroy() {
  if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
    this.mediaRecorder.stop();
  }
  this.cleanUpResources();
}

额外注意事项 #

• iPad Safari对单次录制时长有隐性限制，过长录制建议拆分为多个片段；
• 测试时优先使用iPad Safari的隐私模式，排除缓存或插件干扰。

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