NodeJS Express video streaming server with server controlled range

Question

So I don't currently have any code but its just a general question. I've seen multiple articles and SO Questions that handle this issue except that in all of those the byte range header, that essentially specifies what time segment of the video is sent back to the client, is also specified by the client. I want the server to keep track of the current video position and stream the video back to the client.

The articles and SO Questions I've seen for reference:

https://blog.logrocket.com/build-video-streaming-server-node/

Streaming a video file to an html5 video player with Node.js so that the video controls continue to work?

I want to make more clear what I mean: I want the server to specify the byte range when the HTML video player requests the video for a kind of "live" streaming. Im also open to other suggestions if I am missing an obvious solution to this — F4LS3, Jul 22 '22 at 23:46
To stream just parts of a file, use `fs.createReadStream("video.mp4", {start: ..., end: ...}).pipe(res);` — Heiko Theißen, Jul 23 '22 at 07:49
Well yes, but how do I have to specify the start and end parameters? Like I want to send only a specific time sequence of the video and I only have it in seconds/milliseconds. I need some way to convert that to like the byte range — F4LS3, Jul 23 '22 at 10:49
I've coded this so far now https://www.toptal.com/developers/hastebin/ayulusatob.js It allows me to set the amount of bytes I want to send which is the `end` variable, but only if the start byte that was requested by the browser is 0. As you might be able to see I've tried to "trick" the browser by telling it in the header that I'm sending the bytes from 0-`end` but actually Im trying to send whatever I in the server define as `start` so Im actually sending `start`-`end` as a range which however doesn't work and wont play a video and instead outputs an unsupported video format/MIME-Type — F4LS3, Jul 23 '22 at 22:34

score 1 · Accepted Answer · edited Jul 30 '22 at 08:02

Here's a solution that does not involve explicitly changing the header for the <video> tag src request or controlling the byte range piped from the server.

The video element has a property called currentTime (in seconds) which allows the client to control its own range header. A separate request to the server for an initial value for 'currentTime' would allow the server to control the start time of the video.

<video id="video"><source src="/srcendpoint" muted type="video/mp4" /></video>

<script>
  const video = document.getElementById("videoPlayer")
  getCurrentSecAndPlay()
    
  async function getCurrentSecAndPlay() {
    let response = await fetch('/currentPosition').then(response => response.json())
    video.currentTime += response.currentSec
    video.play()
  }
</script>

This is sort of a work-around solution to mimic livestream behaviour. Maybe it's good enough for you. I do not have a lot of knowledge on HLS and RTMP but if you wanted to make a true livestream you should study those things.

sources:

Thanks this works for my project. So simple but really effective — F4LS3, Aug 23 '22 at 00:54

NodeJS Express video streaming server with server controlled range

1 Answers1