登录
首页 >  Golang >  Go问答

multipart/x-mixed-replace PNG 流始终显示最后一帧之前的帧

来源:stackoverflow

时间:2024-04-22 21:45:37 325浏览 收藏

今日不肯埋头,明日何以抬头!每日一句努力自己的话哈哈~哈喽,今天我将给大家带来一篇《multipart/x-mixed-replace PNG 流始终显示最后一帧之前的帧》,主要内容是讲解等等,感兴趣的朋友可以收藏或者有更好的建议在评论提出,我都会认真看的!大家一起进步,一起学习!

问题内容

制作了一个通过 multipart/x-mixed-replace content-type 标头将 png 图像流式传输到浏览器的程序后,我注意到 标记中仅显示最后一帧,而不是最近发送了一封。

这种行为非常烦人,因为我只在图像更改时发送更新以节省带宽,这意味着在我等待更新时屏幕上会显示错误的帧。

具体来说,我使用的是 brave 浏览器(基于 chromium),但由于我尝试了上下“屏蔽”,我认为这个问题至少也出现在其他基于 chromium 的浏览器中。

搜索问题仅产生一个相关结果(以及许多不相关的结果),即 howtoforge 线程,没有回复。同样,我也认为问题与缓冲有关,但我确保刷新缓冲区无济于事,这与线程中的用户非常相似。用户确实报告说它可以在他们的一台服务器上运行,但不能在另一台服务器上运行,这让我相信它可能与特定的 http 标头或类似的东西有关。我的第一个猜测是 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()在主体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 标头开始,以边界结束。第一个实部之前有一个边界。该初始边界封闭了 MIME 前导码。

您的代码假设零件从边界开始。基于此假设,您首先发送边界,然后发送 MIME 标头,最后发送 MIME 正文。然后停止发送,直到下一部分准备好。因此,只有在发送下一部分后,才会检测到一个部分的结尾,因为只有那时您才发送前一部分的结束边界。

要解决此问题,您的代码应首先发送一个边界来结束 MIME 前导码。对于每个新部分,它应该发送 MIME 标头、MIME 正文,然后发送结束该部分的边界。

我遇到了同样的问题:使用 multipart/x-mixed 时有 1 帧延迟-替换

此问题似乎出现在 Chrome 中,并且似乎与 Chrome no longer support multipart/x-mixed-replace 资源有关。 Firefox 中不存在此问题。

因此,“欺骗”Chrome 显示视频流的唯一方法是将每个图像发送两次,或者接受 1 帧延迟。 如前所述,Firefox 中不存在该问题。

理论要掌握,实操不能落!以上关于《multipart/x-mixed-replace PNG 流始终显示最后一帧之前的帧》的详细介绍,大家都掌握了吧!如果想要继续提升自己的能力,那么就来关注golang学习网公众号吧!

声明:本文转载于:stackoverflow 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>