如何将视频上传到 Firebase Storage for React App

Posted 2023-02-22

【中文标题】如何将视频上传到 Firebase Storage for React App

【英文标题】：How to upload videos to Firebase Storage for React App

【发布时间】：2020-09-07 23:04:27

【问题描述】：

我正在开发一个非常类似于社交媒体应用程序的 React 项目，用户可以在其中上传图片或视频。我正在使用 Firebase 存储来存储图像和视频。

我可以通过使用 react-firebase-file-uploader 包来完成图像上传，但是由于我是 Web 开发的新手，我正在努力寻找上传视频以进行反应的解决方案。

我已经搜索了整个互联网，但找不到合适的解决方案来完成这些任务。

我只需要上传视频并希望在将数据上传到 Firebase 存储之前对其进行预览。

我需要在上传之前或使用云功能上传到 Firebase 存储之后压缩视频以减小文件大小。

非常感谢您的帮助。

【问题讨论】：

我相信这个问题与视频操作有关，而不是与 firestore / firebase 相关。视频（一般而言）必须压缩并作为文件上传到 Firebase 存储才能保存。

【参考方案1】：

可能值得再次说明的是视频文件are compressed by default。如果有的话，您可以调整文件大小以降低分辨率，或对其进行处理以添加水印。

这是一个answer，描述了如何调整视频文件的大小。而here 是一个关于如何在 Cloud Functions 上使用moviepy 的教程。

【讨论】：

无论如何，这种处理最好在移动应用中进行，这样可以充分利用用户的电脑能力，避免通过互联网发送大文件。

【参考方案2】：

你可以试试这个

<input type = "file"
onChange = 
  (e) => 
    let videoObj = e.currentTarget.files[0];
    // console.log(videoObj)
    let 
      name,
      size,
      type
     = videoObj;

    size = size / 1000000
    //for not uploading the file more than 10 MB
    if (size > 10) 
      alert("please upload file less than 10 MB");
      return;
    

    //code for only uploading the video

    type = type.split("/")[0];

    if (type != "video") 
      alert("please upload video only");
      return;
    
  

/>

【讨论】：

尝试详细说明你的答案，而不是仅仅添加代码。

【参考方案3】：

你应该看看这个教程here和这个要点there

您可以在上传后使用 Cloud Functions 进行一些处理，但请注意内存和执行时间受到限制，您的脚本可能会在大文件上失败。

【讨论】：

如果您能告诉我如何使用云功能压缩视频文件，我会很高兴。

嗯，这不是一个简单的过程。鉴于内存和执行时间的限制，我想最好的方法是拥有一个特定的容器，它可以在 Cloud Functions 或 Cloud Run 之外完成。上传视频时，您的云函数可能会触发 PubSub 消息。它还取决于上传视频的具体格式。肯定不是一个简单的过程...