Streaming Video with Nestjs

What do you need to be done?

• Create a route that will serve the video you want to upload:

@Get('/video-example')
  getFile(@Res({ passthrough: true }) res): StreamableFile {
    const file = createReadStream(join(process.cwd(), 'videos/video.mp4'));
    res.set({
      'Content-Type': 'video/mp4',
      'Content-Disposition': 'attachment; filename="video.mp4"',
    });
    return new StreamableFile(file);
}

• Consume the video using the video tag on your webpage:

<video width="80%" height="50%" controls>
   <source src="/video-example" type="video/mp4">
</video>

• Result (access localhost:3000):

See on Github: https://github.com/savi8sant8s/nestjs-video-streaming-example

Comments

[Micael Levi L. C.]

cool! another way would be:

@Get()
@Header('Content-type', 'video/mp4')
@Header('Content-Disposition', 'inline; filename="video.mp4"')
getFile(): StreamableFile {
  const file = createReadStream(join(process.cwd(), 'videos/video.mp4'));
  return new StreamableFile(file);
}

[Sávio Santos]

Even better. very cool!!

[rm116]

@micalevisk How a frontend client like react will receive the StreamableFile(file) ? If it was a large PDF file for example ? is there a way to send it / receive it piece by piece ?

[rm116]

@savi8sant8s How a frontend client like react will receive the StreamableFile(file) ? If it was a large PDF file for example ? is there a way to send it / receive it piece by piece ?

[Sávio Santos]

you can try this article: medium.com/@storrisi/how-to-show-a...