Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why are images not fully shown with my streaming app?

Why are images not fully shown with my streaming app?

Problem

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.).

  • 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.

Problem courtesy of: meloncholy

Solution

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.

Solution courtesy of: meloncholy

Discussion

View additional discussion.



This post first appeared on Node.js Recipes, please read the originial post: here

Share the post

Why are images not fully shown with my streaming app?

×

Subscribe to Node.js Recipes

Get updates delivered right to your inbox!

Thank you for your subscription

×