0

I'm trying to stream a video directly to a browser using node.js as the backend. I would like the video to be streamed from a specific time and would also like it to be partially streamed since it is a pretty large file. Right now I am doing this with fluent-ffmpeg, like this:

const ffmpeg = require('fluent-ffmpeg');

app.get('/clock/', (req, res) => {
  const videoPath = 'video.mp4'; 
  const now = new Date();

  ffmpeg(videoPath)
    .videoCodec('libx264')
    .withAudioCodec('aac')
    .setStartTime(`${(now.getHours() - 10) % 24}:${now.getMinutes() - 1}:${now.getSeconds()}`)
    .format('mp4')
    .outputOptions(['-frag_duration 100','-movflags frag_keyframe+faststart','-pix_fmt yuv420p'])
    .on('end', () => {
      console.log("File has been converted succesfully");
    })
    .on('error', (err) => {
      if (err.message.toLowerCase().includes('output stream closed')) return;
      console.log('An error occoured', err);
    })
    .pipe(res, { end: true });
});

This will work with Chrome, but Safari just doesn't want to stream it. I know that the reason why it doesn't work on Safari is that Safari needs the range header. I've therefore tried to do that, but:

  1. I can't get it to work with fluent-ffmpeg.
  2. When I try to do it the "normal" way, without fluent-ffmpeg, it needs to load the whole video file before it plays.

The video doesn't need to start at the specific timestamp. It would be nice tho, but I have a workaround for that if it's not possible :)

So my question is: How can I get the code above to work with Safari. And if that is impossible: How can I code something that doesn't need to be loaded fully, before it can be played in Safari browsers, aka. partial video streaming.

Thor Bilsby
  • 1
  • 1
  • Related issue: https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/issues/684 – jfriend00 Jun 11 '21 at 23:17
  • You could support the range headers and still use ffmpeg as here: https://unix.stackexchange.com/questions/633412/how-to-download-partial-content-from-remote-video-url-in-nodejs – jfriend00 Jun 11 '21 at 23:19
  • @jfriend00 I need to do the opposite of downloading a video. I can't really figure out how I should reverse the code from the link that you've commented. – Thor Bilsby Jun 12 '21 at 00:37
  • Well, the answer to the question I linked, shows you how to fetch a range of data from a video file which you could use to support the RANGE header and make Safari happy. – jfriend00 Jun 12 '21 at 05:49

0 Answers0