Display video from Gridfs storage in react app

Question

I am using multer-gridfs-storage and gridfs-stream to store my video in the backend (Express/Node). When I try to retrieve the file to play on my front end (React) the player refuses to recognize the source.

I am using Video-React to display the video on download. The download is successful, I get a Binary string back from the backend, which I converted to a Blob.

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

This is my Video-React player being rendered

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

Then I tried two techniques

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 is being set correctly but the video never loads

2. URL.createObjectURL

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

src is set to a blob: url but still nothing

Is this an issue with Video-react or should I be doing something else? Any pointers to references I could look at will also help. What am I doing wrong? dataURL works in the case of images, I checked, but not video.

Answer 1

So after some more reading, I finally figured out the problem. Since I'm using gridfs-stream I'm actually piping the response from the server. So I was never getting the whole file, and trying to convert res.data, which is just a chunk, was a mistake. Instead, in my res object, I found the source url within the config property.

res.config.url

This contained my source url to which my server was piping the chunks. Should have figured it out earlier, considering I picked GridFS storage for precisely this reason.