NodeJS Streaming MJPEG for browser, some images not showing

I am just sending 5 jpegs to the browser. (Actually, the code below may be more elegant, but this is just to show the idea)

    im[0] = fs.readFileSync("banner1.jpg");
    im[1] = fs.readFileSync("banner2.jpg");
    im[2] = fs.readFileSync("banner3.jpg");
    im[3] = fs.readFileSync("banner4.jpg");
    im[4] = fs.readFileSync("banner5.jpg");

    app.get("/image", function(req,res){
        res.setHeader('Content-type', 'multipart/x-mixed-replace; boundary=--myboundary');
        res.write("Content-Type: image/jpeg\r\n\r\n");
        res.write(im[0]);
        res.write("\r\n--myboundary\r\n");
        var time = 1000;
        setTimeout(function(){
            res.write("Content-Type: image/jpeg\r\n\r\n");
            res.write(im[1]);
            res.write("\r\n--myboundary\r\n");
        },time*1);
        setTimeout(function(){
            res.write("Content-Type: image/jpeg\r\n\r\n");
            res.write(im[2]);
            res.write("\r\n--myboundary\r\n");
        },time*2);
        setTimeout(function(){
            res.write("Content-Type: image/jpeg\r\n\r\n");
            res.write(im[3]);
            res.write("\r\n--myboundary\r\n");
        },time*3);
        setTimeout(function(){
            res.write("Content-Type: image/jpeg\r\n\r\n");
            res.write(im[4]);
            res.write("\r\n--myboundary\r\n");
            res.end();
        },time*4);
    });

      

But the problem is it doesn't show im[3]

even if I change the time, so what's the problem? Is Chrome data buffering or NodeJS?

+3


source to share





All Articles