multipart/x-mixed-replace PNG 流总是显示前一帧
multipart/x-mixed-replace PNG stream always showing frame before last
制作了一个通过 multipart/x-mixed-replace Content-Type header 将 PNG 图像流式传输到浏览器的程序后，我注意到只有帧 before-last 显示在<img> 标签，而不是最近发送的标签。
这种行为非常烦人，因为我只在图像更改时发送更新以节省带宽，这意味着在我等待更新时屏幕上会出现错误的帧。
具体来说，我使用的是 Brave 浏览器（基于 chromium），但由于我已经尝试上下使用“屏蔽”，我认为至少在其他 chromium-based 浏览器中也会出现此问题。
搜索问题只得到一个相关结果（还有许多 non-relevant 个），即 this HowToForge 线程，没有回复。同样，我也认为问题与缓冲有关，但我确保刷新缓冲区无济于事，这与线程中的用户非常相似。用户确实报告说它可以在他们的一台服务器上运行，但不能在另一台服务器上运行，这让我相信它可能与特定的 HTTP header 或类似的东西有关。我的第一个猜测是 Content-Length 因为浏览器可以判断图像何时完成，但它似乎没有任何效果。
基本上，我的问题是：有没有办法告诉浏览器显示最近的 multipart/x-mixed-replace 而不是之前的？而且，如果这不是标准行为，原因可能是什么？
当然，这是相关的源代码，但我想这更像是一个一般的 HTTP 问题，而不是与代码有关的问题：
服务器
package routes
import (
"crypto/md5"
"fmt"
"image/color"
"net/http"
"time"
brain "path/to/image/generator/module"
)
func init() {
RouteHandler{
function: func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "multipart/x-mixed-replace; boundary=frame")
w.Header().Set("Cache-Control", "no-cache") // <- Just in case
w.WriteHeader(200)
// If the request contains a token and the token maps to a valid "brain", start consuming frames from
// the brain and returning them to the client
params := r.URL.Query()
if val, ok := params["token"]; ok && len(val) > 0 {
if b, ok := SharedMemory["brains"].(map[string]*brain.Brain)[val[0]]; ok && !b.CheckHasExit() {
// Keep a checksum of the previous frame to avoid sending frames which haven't changed. Frames cannot
// be compared directly (at least efficiently) as they are slices not arrays
previousFrameChecksum := [16]byte{}
for {
if !b.CheckHasExit() {
frame, err := b.GetNextFrame(SharedMemory["conf"].(map[string]interface{})["DISPLAY_COL"].(color.Color))
if err == nil && md5.Sum(frame) != previousFrameChecksum {
// Only write the frame if we succesfully read it and it's different to the previous
_, err = w.Write([]byte(fmt.Sprintf("--frame\r\nContent-Type: image/png\r\nContent-Size: %d\r\n\r\n%s\r\n", len(frame), frame)))
if err != nil {
// The client most likely disconnected, so we should end the stream. As the brain still exists, the
// user can re-connect at any time
return
}
// Update the checksum to this frame
previousFrameChecksum = md5.Sum(frame)
// If possible, flush the buffer to make sure the frame is sent ASAP
if flusher, ok := w.(http.Flusher); ok {
flusher.Flush()
}
}
// Limit the framerate to reduce CPU usage
<-time.After(time.Duration(SharedMemory["conf"].(map[string]interface{})["FPS_LIMITER_INTERVAL"].(int)) * time.Millisecond)
} else {
// The brain has exit so there is no more we can do - we are braindead :P
return
}
}
}
}
},
}.Register("/stream", "/stream.png")
}
客户端（start() 在 body onload 中运行）
function start() {
// Fetch the token from local storage. If it's empty, the server will automatically create a new one
var token = localStorage.getItem("token");
// Create a session with the server
http = new XMLHttpRequest();
http.open("GET", "/startsession?token="+(token)+"&w="+(parent.innerWidth)+"&h="+(parent.innerHeight));
http.send();
http.onreadystatechange = (e) => {
if (http.readyState === 4 && http.status === 200) {
// Save the returned token
token = http.responseText;
localStorage.setItem("token", token);
// Create screen
var img = document.createElement("img");
img.alt = "main display";
// Hide the loader when it loads
img.onload = function() {
var loader = document.getElementById("loader");
loader.remove();
}
// Start loading
img.src = "/stream.png?token="+token;
// Start capturing keystrokes
document.onkeydown = function(e) {
// Send the keypress to the server as a command (ignore the response)
cmdsend = new XMLHttpRequest();
cmdsend.open("POST", "/cmd?token="+(token));
cmdsend.send("keypress:"+e.code);
// Catch special cases
if (e.code === "Escape") {
// Clear local storage to remove leftover token
localStorage.clear();
// Remove keypress handler
document.onkeydown = function(e) {}
// Notify the user
alert("Session ended succesfully and the screen is inactive. You may now close this tab.");
}
// Cancel whatever it is the keypress normally does
return false;
}
// Add screen to body
document.getElementById("body").appendChild(img);
} else if (http.readyState === 4) {
alert("Error while starting the session: "+http.responseText);
}
}
}
多部分 MIME 消息中的一个部分以 MIME header 开始，以边界结束。在第一个实部之前只有一个边界。此初始边界关闭 MIME 前导码。
您的代码假定部分 开始于 边界。基于这个假设，您首先发送边界，然后是 MIME header，然后是 MIME body。然后停止发送，直到下一部分准备就绪。因此，只有在您发送下一部分时才会检测到一个部分的结尾，因为只有在那时您才发送前一部分的结束边界。
要解决此问题，您的代码应首先发送一个边界以结束 MIME 前导码。对于每个新部分，它应该发送 MIME header、MIME body，然后是结束该部分的边界。
我遇到了同样的问题：使用multipart/x-mixed-replace
时有1帧延迟
这个问题似乎出现在 Chrome 中，似乎与 Chrome no longer support multipart/x-mixed-replace 资源有关。 Firefox 中不存在此问题。
因此，“欺骗”Chrome 显示视频流的唯一方法是将每个图像发送两次，否则将有 1 帧延迟。
如前所述，Firefox 中不存在问题。
这是 Chrome 的问题。在 Firefox 中，它按预期工作。
我通过以下方式解决了这个问题C# example
var chromeWorkaround = Encoding.UTF8.GetBytes($"\r\n--{Boundary}\r\n\r\n--{Boundary}\r\n");
将此附加到您的流中，它似乎强制 chrome 立即呈现。
我在这里报告了：https://bugs.chromium.org/p/chromium/issues/detail?id=1250396
制作了一个通过 multipart/x-mixed-replace Content-Type header 将 PNG 图像流式传输到浏览器的程序后，我注意到只有帧 before-last 显示在<img> 标签，而不是最近发送的标签。
这种行为非常烦人，因为我只在图像更改时发送更新以节省带宽，这意味着在我等待更新时屏幕上会出现错误的帧。
具体来说，我使用的是 Brave 浏览器（基于 chromium），但由于我已经尝试上下使用“屏蔽”，我认为至少在其他 chromium-based 浏览器中也会出现此问题。
搜索问题只得到一个相关结果（还有许多 non-relevant 个），即 this HowToForge 线程，没有回复。同样，我也认为问题与缓冲有关，但我确保刷新缓冲区无济于事，这与线程中的用户非常相似。用户确实报告说它可以在他们的一台服务器上运行，但不能在另一台服务器上运行，这让我相信它可能与特定的 HTTP header 或类似的东西有关。我的第一个猜测是 Content-Length 因为浏览器可以判断图像何时完成，但它似乎没有任何效果。
基本上，我的问题是：有没有办法告诉浏览器显示最近的 multipart/x-mixed-replace 而不是之前的？而且，如果这不是标准行为，原因可能是什么？
当然，这是相关的源代码，但我想这更像是一个一般的 HTTP 问题，而不是与代码有关的问题：
服务器
package routes
import (
"crypto/md5"
"fmt"
"image/color"
"net/http"
"time"
brain "path/to/image/generator/module"
)
func init() {
RouteHandler{
function: func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "multipart/x-mixed-replace; boundary=frame")
w.Header().Set("Cache-Control", "no-cache") // <- Just in case
w.WriteHeader(200)
// If the request contains a token and the token maps to a valid "brain", start consuming frames from
// the brain and returning them to the client
params := r.URL.Query()
if val, ok := params["token"]; ok && len(val) > 0 {
if b, ok := SharedMemory["brains"].(map[string]*brain.Brain)[val[0]]; ok && !b.CheckHasExit() {
// Keep a checksum of the previous frame to avoid sending frames which haven't changed. Frames cannot
// be compared directly (at least efficiently) as they are slices not arrays
previousFrameChecksum := [16]byte{}
for {
if !b.CheckHasExit() {
frame, err := b.GetNextFrame(SharedMemory["conf"].(map[string]interface{})["DISPLAY_COL"].(color.Color))
if err == nil && md5.Sum(frame) != previousFrameChecksum {
// Only write the frame if we succesfully read it and it's different to the previous
_, err = w.Write([]byte(fmt.Sprintf("--frame\r\nContent-Type: image/png\r\nContent-Size: %d\r\n\r\n%s\r\n", len(frame), frame)))
if err != nil {
// The client most likely disconnected, so we should end the stream. As the brain still exists, the
// user can re-connect at any time
return
}
// Update the checksum to this frame
previousFrameChecksum = md5.Sum(frame)
// If possible, flush the buffer to make sure the frame is sent ASAP
if flusher, ok := w.(http.Flusher); ok {
flusher.Flush()
}
}
// Limit the framerate to reduce CPU usage
<-time.After(time.Duration(SharedMemory["conf"].(map[string]interface{})["FPS_LIMITER_INTERVAL"].(int)) * time.Millisecond)
} else {
// The brain has exit so there is no more we can do - we are braindead :P
return
}
}
}
}
},
}.Register("/stream", "/stream.png")
}
客户端（start() 在 body onload 中运行）
function start() {
// Fetch the token from local storage. If it's empty, the server will automatically create a new one
var token = localStorage.getItem("token");
// Create a session with the server
http = new XMLHttpRequest();
http.open("GET", "/startsession?token="+(token)+"&w="+(parent.innerWidth)+"&h="+(parent.innerHeight));
http.send();
http.onreadystatechange = (e) => {
if (http.readyState === 4 && http.status === 200) {
// Save the returned token
token = http.responseText;
localStorage.setItem("token", token);
// Create screen
var img = document.createElement("img");
img.alt = "main display";
// Hide the loader when it loads
img.onload = function() {
var loader = document.getElementById("loader");
loader.remove();
}
// Start loading
img.src = "/stream.png?token="+token;
// Start capturing keystrokes
document.onkeydown = function(e) {
// Send the keypress to the server as a command (ignore the response)
cmdsend = new XMLHttpRequest();
cmdsend.open("POST", "/cmd?token="+(token));
cmdsend.send("keypress:"+e.code);
// Catch special cases
if (e.code === "Escape") {
// Clear local storage to remove leftover token
localStorage.clear();
// Remove keypress handler
document.onkeydown = function(e) {}
// Notify the user
alert("Session ended succesfully and the screen is inactive. You may now close this tab.");
}
// Cancel whatever it is the keypress normally does
return false;
}
// Add screen to body
document.getElementById("body").appendChild(img);
} else if (http.readyState === 4) {
alert("Error while starting the session: "+http.responseText);
}
}
}
多部分 MIME 消息中的一个部分以 MIME header 开始，以边界结束。在第一个实部之前只有一个边界。此初始边界关闭 MIME 前导码。
您的代码假定部分 开始于 边界。基于这个假设，您首先发送边界，然后是 MIME header，然后是 MIME body。然后停止发送，直到下一部分准备就绪。因此，只有在您发送下一部分时才会检测到一个部分的结尾，因为只有在那时您才发送前一部分的结束边界。
要解决此问题，您的代码应首先发送一个边界以结束 MIME 前导码。对于每个新部分，它应该发送 MIME header、MIME body，然后是结束该部分的边界。
我遇到了同样的问题：使用multipart/x-mixed-replace
这个问题似乎出现在 Chrome 中，似乎与 Chrome no longer support multipart/x-mixed-replace 资源有关。 Firefox 中不存在此问题。
因此，“欺骗”Chrome 显示视频流的唯一方法是将每个图像发送两次，否则将有 1 帧延迟。 如前所述，Firefox 中不存在问题。
这是 Chrome 的问题。在 Firefox 中，它按预期工作。
我通过以下方式解决了这个问题C# example
var chromeWorkaround = Encoding.UTF8.GetBytes($"\r\n--{Boundary}\r\n\r\n--{Boundary}\r\n");
将此附加到您的流中，它似乎强制 chrome 立即呈现。
我在这里报告了：https://bugs.chromium.org/p/chromium/issues/detail?id=1250396