Media streaming issues with Chrome

lukejacksonn / servor

Dependency free file server for single page app development

MIT License

1.04k stars 70 forks source link

Media streaming issues with Chrome #55

Open gordonnl opened 4 years ago

gordonnl commented 4 years ago

Hey mate, I've been running into a couple issues with how Chrome handles media (audio/video):

Without the response header Content-Length, checking media.duration returns Infinity.
Without serving the requested chunk (Content-Range), changing media.currentTime just makes the file play from the beginning (as the whole file is returned).

In comparison, Firefox has neither issue.

I recall reading about this a long time ago, and found it weird how Chrome kept re-downloading the video assets with experiences that involve changing the currentTime, but I'm not sure how best to work streaming into Servor. Any ideas/thoughts?

Cheers.

lukejacksonn commented 4 years ago

Ahh interesting.. I don't have many projects that serve media so I haven't come across it. Happy to take a look though!

I wonder if just adding content-length will help 🤔 or if we have to go full content-range and streams. Is the reproduction just load a video in a video tab then try seek (change currentTime)?

gordonnl commented 4 years ago

Yeah same, that's why I've only just noticed!

So the Content-Length is enough if you just need to check duration, but it doesn't solve the seeking issue.

To reproduce, just create an index.html with <audio controls src="music.mp3"></audio> as the content with any old audio file, and serve it. Then observe the inability to seek in Chrome.

gordonnl commented 4 years ago

I managed to hack it to work using this as a guide.

The main changes I've found are that it needs the Content-Range header, and to be a readable stream using fs.createReadStream(uri, { start, end }).pipe(res) rather than res.write() and res.end().

lukejacksonn commented 4 years ago

Well, that sounds doable! Do you have it working in a fork of servor? If so I'd love to see a PR.

gordonnl commented 4 years ago

I have a modified version of it - I just threw the main file up here for you to check!

lukejacksonn commented 4 years ago

Thanks 🙇 this will speed things up a lot but not 100% sure exactly when I will get around to implementing. Will leave this issue open in case anyone else wants to tackle it!