如何将React Media Recorder生成的视频Blob URL转换为MP4文件

错误根因 #

你当前代码的问题在于直接将mediaBlobUrl（blob:开头的临时地址字符串）作为二进制内容传入File构造函数，生成的文件只存储了这个短字符串的内容，所以体积仅为几十字节，无法正常播放。
<a>标签下载正常是因为浏览器解析blob协议的href时，会自动读取地址对应的真实二进制视频数据，而非直接存储字符串内容。

可用解决方法 #

方法1：直接使用库返回的原始Blob生成File #

useReactMediaRecorder本身会返回录制完成的原始mediaBlob对象，不需要经过Blob URL中转，直接用它生成File即可：

const {
  status,
  startRecording,
  stopRecording,
  mediaBlob // 直接取原始Blob对象
} = useReactMediaRecorder({ video: true });

// 停止录制完成后调用即可生成正常的MP4文件
const myFile = new File([mediaBlob], "demo.mp4", { type: 'video/mp4' });

方法2：通过fetch读取Blob URL的真实二进制数据 #

如果你只有Blob URL没有原始Blob，可以通过fetch请求读取真实数据后再生成File：

// 异步转换方法，需在async函数中调用
const blobUrlToMp4File = async (blobUrl, fileName = "demo.mp4") => {
  const res = await fetch(blobUrl);
  const videoBlob = await res.blob();
  return new File([videoBlob], fileName, { type: "video/mp4" });
}

// 调用示例
const myFile = await blobUrlToMp4File(mediaBlobUrl);

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