8

Safari Tech Preview 26 中引入的用于异步加载大图像的新 WebKit 功能会导致基于 mjpg-streamer 网络摄像头的流闪烁，该布尔属性默认为 true largeImageAsyncDecodingEnabled, 会导致此问题。链接到属性定义

我正在尝试找到一种方法在使用 CSS 或 JS 的 html 页面上将此属性设置为 false。这甚至可能吗？还是有其他方法可以做到这一点？

这适用于为 3D 打印机服务器运行 OctoPi 的 OctoPrint。我通过反复试验发现，任何超过 453x453 px 的图像都会异步加载并导致闪烁；这类似于烦人的频闪灯效果。我为网络摄像头使用 1280x720 的分辨率，在技术预览 26 之前没有问题。

感谢您的帮助！

4

3 回答 3

2

该问题现已在 Safari 技术预览版 37 中得到修复。https://trac.webkit.org/changeset/219876/webkit/

于 2017-08-11T00:56:46.437 回答
1

您不能覆盖宏。但是您可能会在加载图像后强制加载页面的其余部分。

通过使用 CSS/JS？为什么？使用纯 HTML

存在link rel preload标记。在 W3C 上阅读更多信息

重要的部分是

链接元素上的 preload 关键字提供了一个声明式提取原语，它解决了上述启动早期提取并将提取与资源执行分离的用例。因此，preload 关键字用作低级原语，使应用程序能够构建自定义资源加载和执行行为，而不会向用户代理隐藏资源并导致延迟资源获取惩罚。

如何实现

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="url" as="image">

<!-- or, preload stylesheet resource via JavaScript -->
<script>
  var res = document.createElement("link");
  res.rel = "preload";
  res.as = "image";
  res.href = "url";
  document.head.appendChild(res);
</script>

如果加载成功，将任务排队以触发load在链接元素处命名的简单事件。否则，将任务排队以触发error在链接元素处命名的简单事件。

如果通过预加载链接获取资源并且响应包含no-cache指令，则获取的响应由用户代理保留，并在稍后通过匹配的相同导航请求获取时立即可用

更新

根据我们的评论讨论，

您有 2 个选项。1.尝试将img标签更改为，video因为问题只影响img标签。

使用以下代码

$(document).ready(function(){
  var newTag=$('img')[0].cloneNode(true);
  newTag = $(newTag).wrap("<video></video>")[0].parentNode;
  newTag = $(newTag).wrap("<div></div>")[0];
  newTag = newTag.parentNode.innerHTML;
  newTag = newTag.replace("img","source");
  $('img').replaceWith(newTag);
});
  1. 强制用户选择另一个浏览器。也就是说，如果您使用 检测到它是 Safari 技术预览版 26 window.userAgent，然后将它们导航到另一个页面，说明由于兼容性问题，不支持此版本的浏览器。请降级/选择其他浏览器。- 请注意，这可能是暂时的。由于这是一个已知问题（闪烁），他们将在未来提供修复。

特别感谢To markdown在几秒钟内将 HTML 转换为 Markdown（我没有任何从属关系）

于 2017-06-11T13:56:12.423 回答
-1

我看不到任何不会变成完整结构的客户端黑客攻击。你也许可以绕过它，但将它报告给 WebKit 似乎是最好的前进方式。

WebKit-bug 170640是阻止 largeImageAsyncDecodingEnabled 启用的原因。它也引起了闪烁。一旦修复，他们默认启用它。然而，这表明仍然存在问题。

从 GitHub 检索到的 HTTP 标头

如果有人决定向 WebKit 提交错误报告，这可能会有所帮助。

标准标题如下

mjpg-streamer/mjpg-streamer-experimental/plugins/output_http/httpd.h

#define STD_HEADER "Connection: close\r\n" \
"Server: MJPG-Streamer/0.2\r\n" \
"Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, post-check=0, max-age=0\r\n" \
"Pragma: no-cache\r\n" \
"Expires: Mon, 3 Jan 2000 12:34:56 GMT\r\n"

然后对于实际的图像流：

mjpg-streamer-experimental/plugins/output_http/httpd.c#L466

sprintf(buffer, "HTTP/1.0 200 OK\r\n" \
        "Access-Control-Allow-Origin: *\r\n" \
        STD_HEADER \
        "Content-Type: multipart/x-mixed-replace;boundary=" BOUNDARY "\r\n" \
        "\r\n" \
        "--" BOUNDARY "\r\n");

需要注意的是，WebKit 中似乎已经有一个设置/切换来启用和/或禁用 largeImageAsyncDecodingEnabled，请在此处查看。我怀疑这是否可以通过 Safari 的 UI 访问，并且在没有用户交互的情况下无法解决问题。

于 2017-06-18T09:46:44.177 回答