Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy are images not fully shown with my streaming app?
    primarykey
    data
    text
    <p>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. </p> <p>Here's an example, with the bottom portion of the picture missing on the left. </p> <p><img src="https://i.stack.imgur.com/JP9t3.png" alt="enter image description here"></p> <p>A site showing the problem is <a href="http://bits.meloncholy.com/node-video-gallery/#!browse/" rel="nofollow noreferrer">here</a> and an identical-looking site without the problem is <a href="http://bits.meloncholy.com/video-gallery/#!browse/" rel="nofollow noreferrer">here</a>. (There should be pink bits at the bottom of most images with the first link.)</p> <p>The code for the app is <a href="https://github.com/meloncholy/vid-streamer/" rel="nofollow noreferrer">on Github</a>, but I guess the important lines are</p> <pre><code>stream = fs.createReadStream(info.file, { flags: "r", start: info.start, end: info.end }); stream.pipe(res); </code></pre> <p>(So all of the heavy lifting is done by stream.js, not my code.)</p> <ul> <li>I've tried removing the start and end params, but it makes no difference. </li> <li>If I change it to stream the file to <code>process.stdout</code> instead and save the output to a file, the whole image is shown.</li> <li>A file comparison program says the file from <code>stdout</code> and the original are identical.</li> <li>If I transfer something other than a baseline jpeg (so even progressive jpegs work), it shows the whole file.*</li> <li>If I access the file via the linked Node.js app (which uses Express), but not through the streamer, it shows the whole image.</li> <li>If I save the incomplete picture from my browser to the desktop, it saves the whole image. </li> <li>For some jpegs it works, but not for most.</li> <li>The problem happens locally and on my server (Windows 2008 R2 and Ubuntu 11 resp.).</li> </ul> <p>Browser tests (over 3 computers &amp; 1 VM)</p> <ul> <li>Safari 4, 5 - works</li> <li>Firefox 4, 11 (2 computers) - doesn't work</li> <li>Chrome 18 (2 computers) - doesn't work</li> <li>IE 8 - doesn't work</li> <li>IE 9 - works</li> <li>Opera 11 - works</li> </ul> <p>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. </p> <p>Happy to supply more details if needed. </p> <p>* Obviously I haven't tried every possible file type, but pngs, progressive jpegs, text and videos seem to work. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload