Not able to use videostrem in next.js

[mayank1513]

Hi,

I have posted question here - https://stackoverflow.com/q/67980499/9640177

I am trying to play video using media stream in next js. My api looks like this

import fs from 'fs'
import path from 'path'

export default function (req, res) {
  let f = 'file_name';
  if (req.method === 'POST') {
    const data = JSON.parse(req.body);
    f = data.path;
  }
  const filePath = path.resolve('.', f)
  const stat = fs.statSync(filePath)
  res.writeHead(200, {
    'Content-Type': 'audio/mpeg',
    'Content-Length': stat.size
  });
  const readStream = fs.createReadStream(filePath);
  readStream.pipe(res);
}

and in the index.js

fetch('/api/hello', {
  method: 'POST',
  body: JSON.stringify({ path: 'my_file' })
}).then(res => res.blob()).then((blob) => {
  const url = URL.createObjectURL(blob);
  vel.current.src = url;
})

This works well for small videos. However, I am trying to use media stream to avoid pulling all data into blob before I can play that.

I tried various ways including Videostream with no success.

Specifically, I don't understand how to create the "readable stream that provides the bytes between offsets "start" and "end" inclusive" - required by Videostream.

The goal is to allow only authenticated users to access the videos exposed by api and make it difficult to download while keeping the ux as smooth as possible.

https://stackoverflow.com/q/67980499/9640177