Question

I’ve written a simple Node.js app that streams content (primarily for videos, but other stuff works too). It seems to work fine except with some jpegs, where the bottom of the image is not always displayed.

Here’s an example, with the bottom portion of the picture missing on the left.

A site showing the problem is here and an identical-looking site without the problem is here. (There should be pink bits at the bottom of most images with the first link.)

The code for the app is on Github, but I guess the important lines are

stream = fs.createReadStream(info.file, { flags: "r", start: info.start, end: info.end });
stream.pipe(res);

(So all of the heavy lifting is done by stream.js, not my code.)

• I’ve tried removing the start and end params, but it makes no difference.
• If I change it to stream the file to process.stdout instead and save the output to a file, the whole image is shown.
• A file comparison program says the file from stdout and the original are identical.
• If I transfer something other than a baseline jpeg (so even progressive jpegs work), it shows the whole file.*
• If I access the file via the linked Node.js app (which uses Express), but not through the streamer, it shows the whole image.
• If I save the incomplete picture from my browser to the desktop, it saves the whole image.
• For some jpegs it works, but not for most.
• The problem happens locally and on my server (Windows 2008 R2 and Ubuntu 11 resp.).

Browser tests (over 3 computers & 1 VM)

• Safari 4, 5 – works
• Firefox 4, 11 (2 computers) – doesn’t work
• Chrome 18 (2 computers) – doesn’t work
• IE 8 – doesn’t work
• IE 9 – works
• Opera 11 – works

I really have no idea what’s going on here. I thought it could be a weird graphics driver bug, but the behaviour is consistent across all computers I’ve tried. I find it hard to blame Node.js / my code for this as it does seem to be transferring the whole of the file, but then it works fine without it.

Happy to supply more details if needed.

* Obviously I haven’t tried every possible file type, but pngs, progressive jpegs, text and videos seem to work.

Answer 1

It turns out that the problem was the file size sent in the header (header["Content-Length"]). I’d set this to info.end - info.start, whereas the actual size is 1 more than that. Some browsers didn’t like this and missed off the end of the picture when displaying it on screen. Oops.