如何从CSS或JS更改WebKit宏为false

Question

在Safari Tech Preview 26中引入的用于异步加载大型图像的新WebKit功能会导致基于mjpg-streamer网络摄像头的流出现闪烁问题。默认为true的布尔属性largeImageAsyncDecodingEnabled是导致此问题的原因。链接到该属性定义：Link to the property definition 我正在尝试找到一种方法在html页面上使用CSS或JS将此属性设置为false。这是否可能？还是有其他方法可以解决这个问题？

这是针对运行OctoPi的3D打印机服务器的OctoPrint。通过试错，我发现任何超过453x453像素的图像都会异步加载并导致闪烁；这类似于令人讨厌的频闪灯效果。我正在使用1280x720的分辨率进行网络摄像头捕捉，在技术预览26之前没有任何问题。

谢谢您的帮助！

- klcjr89

---

你能添加一些代码吗？ - Sagar V

Answer 1

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

- klcjr89

Answer 2

你无法覆盖宏。但是你可以在图像加载后强制页面的其余部分加载。

通过使用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的简单事件。

如果通过preload链接获取资源并且响应包含no-cache指令，则用户代理将保留获取的响应，并在稍后使用相同的导航请求进行获取时立即提供。

更新

根据我们的评论讨论，您有两个选项。

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);
});

2. 强制用户选择另一个浏览器。如果您使用window.userAgent检测到它是Safari技术预览26，则将其引导到另一个页面，说明由于兼容性问题，不支持此版本的浏览器。请降级/选择其他浏览器。 - 请注意，这可能是暂时的。由于这是已知问题（闪烁），他们将在未来提供修复。

---

特别鸣谢 To markdown，在几秒钟内将HTML转换为Markdown（我与其无关联）。

- Sagar V

---

直播流无法预加载。同时，你无法使用JS / CSS在客户端关闭WebKit宏。@aviatorken89 - Sagar V

@aviatorken89 Webkit由苹果公司及Google等贡献者共同维护，它们都高度重视安全性，因此无法执行远程代码。如果您制作一个工作截屏视频并在YouTube上上传，我可以尝试提供帮助。 - Sagar V

我认为他们不会这样做。因为每个人都是为用户而开发，而不是为开发者。他们将其作为改进用户体验的新功能引入。所以，我认为他们根本不会在意。如果你分享YouTube链接，那么我可以使用JS为其制作一些黑客。 - Sagar V

这是我刚制作的一个快速YouTube视频。使用的是Safari技术预览33（最新版本）。https://youtu.be/5ABeC_SaWoE - klcjr89

我已经提交了一个PR，但我不确定他们是否会合并它。你可以在这里跟踪它 https://github.com/WebKit/webkit/pull/18 - Sagar V

Answer 3

我看不到任何客户端的黑客攻击，不会演变成一个完整的建设。你可能能够绕过它，但向 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的用户界面访问，并且没有解决无需用户交互的问题。

- Penquin