在 React 应用程序中显示来自 Gridfs 存储的视频

Question

我正在使用multer-gridfs-storage 和gridfs-stream 将我的视频存储在后端（Express/Node）中。当我尝试检索文件以在我的前端 (React) 上播放时，播放器拒绝识别源。

我正在使用 Video-React 来显示下载的视频。下载成功，我从后端得到一个二进制字符串，我将其转换为 Blob。

 try{
      fileBlob = new Blob([res.data], {type : res.headers['content-type']});
    }catch(err){
      console.log('Error converting to blob');
      console.log(err);
    }

这是我正在渲染的 Video-React 播放器

 <Player 
      autoPlay
      ref="player"
      >
      <source src={this.state.fileURL} />
      <ControlBar autoHide={false} />
      </Player>

然后我尝试了两种技术

1. readDataAsURL

   let reader = new FileReader(); reader.onload = function(event){ //rThis is just a reference to the parent function this rThis.setState({fileURL: reader.result}, () => { rThis.refs.player.load(); }); } try{ reader.readAsDataURL(fileBlob); }catch(err){ console.log('Error trying readDataURL'); console.log(err); }

src 设置正确，但视频从不加载

1. URL.createObjectURL

   let vidURL = URL.createObjectURL(fileBlob); rThis.setState({fileURL: vidURL}, () => { rThis.refs.player.load(); });

src 设置为 blob: 网址但仍然没有

这是 Video-react 的问题还是我应该做其他事情？我可以查看的任何指向引用的指针也会有所帮助。我究竟做错了什么？ dataURL 适用于图像，我检查过，但不适用于视频。

Answer 1

所以在阅读了更多之后，我终于找到了问题所在。由于我使用的是gridfs-stream，我实际上是在通过管道传输来自服务器的响应。所以我从来没有得到整个文件，而试图转换只是一个块的res.data 是一个错误。相反，在我的 res 对象中，我在 config 属性中找到了源 URL。

res.config.url

这包含了我的源 URL，我的服务器将这些块传送到该 URL。考虑到我正是出于这个原因选择了 GridFS 存储，早该想通了。