Unable to Stream MP4 Video to Mobile IOS Safari With GridFS-Stream

Question

I can't seem to get my basic mp4 video streaming server to work on mobile IOS Safari/Chrome. It works fine on desktop chrome, but only shows the video player and controls with a black screen on IOS Safari.

I found some information talking about specifying mime types, byte ranges, and headers, but It seems like I have already done everything necessary?

What else do I need to do to get my mp4 video to stream to mobile IOS Safari?

Server:

const gridfsBucket = new mongoose.mongo.GridFSBucket(conn, {
      bucketName: `bucketName`,
    });

    const range = req.headers.range;

    if (!range) {
      res.status(400).send("Requires Range header");
    }
    
    const videoSize = video.length;
    const start = Number(range.replace(/\D/g, ""));
    const end = videoSize - 1;
    const contentLength = end - start + 1;
    
    const headers = {
      "Content-Range": `bytes ${start}-${end}/${videoSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": contentLength,
      "Content-Type": "video/mp4",
    };

    res.writeHead(206, headers);

    const downloadStream = gridfsBucket.openDownloadStream(
      ObjectId(_id),
      {
        start,
        end: videoSize,
      }
    );

    downloadStream.pipe(res);
  }

HTML5 Video:

<video controls muted playsInline>
  <source
    src={`/api/main/stream/video/${_id}`}
    type="video/mp4"
  />
</video>

IOS Safari: