如何使用JavaScript通过MediaRecorder将浏览器录屏文件存储到Firebase Storage

问题根因 #

你上传失败的核心原因是main.js中调用Firebase Storage的put方法时，传入了未定义的file变量，没有正确传入已经生成好的录屏completeBlob对象，不需要额外转arraybuffer、uint8array格式，直接传Blob就可以正常上传。

修改方案 #

直接替换main.js中onstop回调内的上传逻辑即可：

var metadata = {
  contentType: 'video/webm',
};

// 直接传入已生成的录屏Blob对象
fbStorageChildRef.put(completeBlob, metadata).then((snapshot) => {
  console.log(`上传成功！快照数据 : ${snapshot}`);
  chunks = [];
}).catch(err => {
  // 新增错误捕获，方便后续排查问题
  console.error('上传失败错误信息：', err)
});

额外优化建议 #

• 当前存储引用固定为videos/videofile.webm，每次上传都会覆盖之前的文件，可通过时间戳生成唯一文件名避免覆盖：

  // 每次录制生成独立的存储引用
  const fbStorageChildRef = fbStorageRef.child(`videos/${Date.now()}.webm`);
  

• 确认Firebase Storage安全规则配置正确，测试阶段可临时放开权限验证功能，生产环境务必按业务需求收紧规则。

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