Stream video from Gridfs mongoDB

Question

I'm trying to stream video by chunks , video is stored in mongodb using grid fs ,

here is the API :

videoRoute.get('/:id', (req, res) => { 
GFS.findById(req.params.id, (err: any, file: any) => {
// Check if file
if (!file || file.length === 0) {
  return res.status(404).json({
    err: 'No file exists',
  });
}
// Read output to browser

const range = req.headers.range;
if (!range) {
  res.status(400).send('Requires Range header');
} else {
  // Create response headers
  const start = Number(range.replace(/\D/g, ''));
  const end = file.length - 1;

  const contentLength = end - start + 1;
  const headers = {
    'Content-Range': `bytes ${start}-${end}/${file.length}`,
    'Accept-Ranges': 'bytes',
    'Content-Length': contentLength,
  };

  // HTTP Status 206 for Partial Content
  res.writeHead(206, headers);

  const bucket = new mongoose.mongo.GridFSBucket(mongoose.connection.db, {
    bucketName: 'uploads',
  });
  const readstream = bucket.openDownloadStream(file._id, {
    start,
    end,
  });

  readstream.pipe(res);
}
});
});

When I use only the final part ( readStream and pipe it ) , the video works fine but it starts playing until it fully loads , but in order to implement the loading by chunks I had to do the other stuff but it doesn't work , here's what I get : Click to see image