Desktop Safari 18.5中MediaRecorder录制视频12-15秒冻结问题

现象说明 #

在运行macOS Sequoia 15.5的桌面端Safari 18.5（版本号20621.2.5.11.8）中，录制视频的预览会在约12-15秒处冻结，但视频元数据仍保留完整时长。该问题与Blob实际大小无关，经M2 MacBook Pro、Intel Mac mini等多设备测试结果一致，相同录制时长的视频均在同一时间点冻结。

测试日志示例：

• 测试1：录制30秒，13.5秒处冻结，Blob大小16842764，类型video/mp4; codecs=avc1.42000a,mp4a.40.2
• 测试2：录制30秒，14秒处冻结，Blob大小17884798，类型video/mp4; codecs=avc1.42000a,mp4a.40.2
• 测试3：录制30秒，14秒处冻结，Blob大小17339667，类型video/mp4; codecs=avc1.42000a,mp4a.40.2

该功能此前在桌面端Safari正常，目前移动端Safari及Chromium内核浏览器仍可正常运行。

代码实现 #

使用react-webcam库创建摄像头元素，通过ref获取流并初始化MediaRecorder：

if (orientation.type.includes('portrait') && portraitWebcamRef.current?.stream) {
  portraitMediaRecorderRef.current = new MediaRecorder(portraitWebcamRef?.current?.stream, {
    // mimeType: "video/webm",  IGNORING FOR CROSS BROWSER SUPPORT
  });
  portraitMediaRecorderRef.current.addEventListener('dataavailable', (event) => handleDataAvailable(event));
  portraitMediaRecorderRef.current.start();
}

用户停止录制时处理dataavailable事件：

const handleDataAvailable = (blob: BlobEvent) => {
  const { data } = blob;
  if (data.size > 0) {
    console.info('Data available in blob event:', data);
    setRecordedChunks((prev: Array<Blob>) => prev.concat(data));
    setReviewVideoSrc(URL.createObjectURL(data));
  } else {
    console.warn('No data available in blob event', data);
  }
};

其中setReviewVideoSrc(URL.createObjectURL(data))用于生成预览视频，setRecordedChunks用于后续视频上传。

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