如何流式传输不断变化的图像

Question

设置：

我有一台NGINX网络服务器。在网页上，我运行javascript每隔半秒刷新文件tmp_image.jpg：

var img = new Image();
img.onload = function() {
    var canvas = document.getElementById("x");
    var context = canvas.getContext("2d");
    context.drawImage(img, 0, 0);
    setTimeout(timedRefresh, 500);
};

function timedRefresh() {
    // just change src attribute, will always trigger the onload callback
    try {
        img.src = 'tmp_image.jpg?d=' + Date.now();
    }catch(e){
        console.log(e);
    }
}
setTimeout(timedRefresh, 100);

使用HTML：

<canvas id="x" width="700px" height="500px"></canvas>

在另一个使用覆盆子pi相机的过程中，我正在运行一个脚本，用图像picamera将图像写入文件tmp_image.jpg：

for frame in cam.camera.capture_continuous(raw, format="rgb", use_video_port=True):
    img = frame.array
    cv2.imwrite("tmp_image.jpg", img)

问题：

我收到错误：

  

获取http://192.168.1.234/images/tmp_img.jpg?d=1513855080653 net :: ERR_CONTENT_LENGTH_MISMATCH

然后导致刷新崩溃（即使我已将其放入try catch） 我相信这是因为NGINX正在尝试在写入文件时读取该文件。所以我该怎么做？这是非常低效的吗？