javascript - How to play a protected video streaming node api in frontend

Question

I've created a video streaming server with NodeJs which is protected with jwt token.

router.get("/video-streams/:id", authenticateUser, async (req, res) => {
  try {
    let id = req.params.id;
    userdata = await User.aggregate([
      { $match: { email: req.user.data } },
      { $unwind: "$videos" },
      { $match: { "videos._id": ObjectId(id) } },
    ]);
    if (userdata.length <= 0) {
      res.status(404).send({
        message: "No Video Found",
      });
    } else {
      const path = userdata[0].videos.path;
      const stat = fs.statSync(path);
      const fileSize = stat.size;
      const range = req.headers.range;
      if (range) {
        const parts = range.replace(/bytes=/, "").split("-");
        const start = parseInt(parts[0], 10);
        const end = parts[1] ? parseInt(parts[1]) : fileSize - 1;
        const chunksize = end + start + 1;
        const file = fs.createReadStream(path, { start, end });
        const head = {
          "Content-Range": `bytes ${start}-${end}/${fileSize}`,
          "Accept-Ranges": "bytes",
          "Content-Length": chunksize,
          "Content-Type": "video/mp4",
        };
        res.writeHead(206, head);
        file.pipe(res);
      } else {
        const head = {
          "Content-Length": fileSize,
          "Content-Type": "video/mp4",
        };
        res.writeHead(200, head);
        fs.createReadStream(path).pipe(res);
      }
    }
  } catch (err) {
    res.status(500).send({ message: "Error happened ", err });
  }
});

Now I'm calling this endpoint in html like

  <ReactPlayer
      controls
      width="100%"
      height="100%"
      url={"http://localhost:8080/api/v1/video-streams/" + path}
    ></ReactPlayer>

It is giving me Unauthorised error as i'm not passing Authorization header in api call. How can I pass auth header in html video tag?

question from:https://stackoverflow.com/questions/65841460/how-to-play-a-protected-video-streaming-node-api-in-frontend

Answer 1

Waitting for answers