React项目中Blob格式录制视频无法在video标签播放问题

核心问题分析 #

你的代码中Blob生成时机错误：在handleStopRecording里，你先基于当前recordedChunks创建Blob，再调用mediaRecorderRef.current.stop()。但MediaRecorder的stop()方法会触发最后一次dataavailable事件，把完整录制数据推入recordedChunks，这就导致你设置的video对应的Blob是不完整的（甚至是空Blob，从你打印的Blob { size: 0, type: 'video/webm' }可验证）。而下载按钮是在录制完成后调用，此时recordedChunks已收集完整数据，所以下载功能正常。

解决方案 #

调整录制停止后的逻辑顺序，在MediaRecorder的stop事件中生成最终Blob（该事件触发时，所有dataavailable数据已收集完毕），同时清理对象URL避免内存泄漏。

修改关键代码片段

1. 重构handleStopRecording，先停止录制再处理数据：

const handleStopRecording = useCallback(() => {
  setIsVideoComplete(true);
  setShowStats(true);
  stopTimer();
  if (isRecording && mediaRecorderRef.current) {
    setIsRecording(false);
    // 先停止录制，触发dataavailable和stop事件收集完整数据
    mediaRecorderRef.current.stop();
  }
}, [isRecording]);

2. 在handleStartRecording中添加stop事件监听，生成最终Blob：

const handleStartRecording = useCallback(() => {
  setShowStats(false);
  setIsVideoComplete(false);
  if (!isRecording) {
    setIsRecording(true);
    setRecordedChunks([]); // 重置录制数据
    startTimer();
    if (webcamRef.current && webcamRef.current.video.srcObject) {
      const stream = webcamRef.current.video.srcObject;
      mediaRecorderRef.current = new MediaRecorder(stream, {
        mimeType: 'video/webm',
      });
      mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
      // 监听stop事件，在所有数据收集完成后生成Blob
      mediaRecorderRef.current.addEventListener('stop', () => {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        console.log(blob);
        setVideo(blob);
      });
      mediaRecorderRef.current.start();
    }
  }
}, [handleDataAvailable, isRecording, startTimer]);

3. 添加组件卸载时的资源清理：

useEffect(() => {
  return () => {
    // 清理对象URL，避免内存泄漏
    if (video) {
      URL.revokeObjectURL(URL.createObjectURL(video));
    }
    stopTimer();
    // 确保录制器停止
    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
      mediaRecorderRef.current.stop();
    }
  };
}, [video]);

4. 修复JSX转义问题：将代码中所有<替换为<，>替换为>，否则页面无法正常渲染组件。

补充说明 #

• 确保recordedChunks在每次开始录制时重置，避免旧数据干扰新录制内容。
• 若仍有播放问题，可检查浏览器对video/webm格式的支持，或尝试更换mimeType为video/mp4（需浏览器支持）。

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