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学习网公众号吧!
-
502 收藏
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
139 收藏
-
204 收藏
-
325 收藏
-
477 收藏
-
486 收藏
-
439 收藏
-
357 收藏
-
352 收藏
-
101 收藏
-
440 收藏
-
212 收藏
-
143 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 508次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习