W3C：开发专业媒体制作应用(4)

来源：W3C/SMPTE Joint Workshop on Professional Media Production on the Web 主讲人：Oleg Sidorkin, Max Grosse 内容整理：陈梓煜 本文介绍了两则来自W3C的演讲。第一篇Oleg Sidorkin讲述了如何在现代化远程办公大流行的趋势下，使得几乎任何网站或启用网络的工具都可以获得额外的功能，以便进行团队协作。第二篇Max Grosse他们开发的网页端深度学习结果查看工具，可以在网页端方便地查看高动态范围高质量的深度学习图像结果。

目录

• 分布式多方媒体内容协作
• 在Web上查看OpenEXR文件

分布式多方媒体内容协作

1.任务目标

在以前，把团队召集在同一个房间同一块屏幕下协同工作毫不费力，但是随着远程工作的大流行，现有协同工作软件，例如网络会议，内容分享工具，不足以满足高自由度媒体内容创作团队的需求，例如艺术创作，动画创作，视频创作等。我们在 Bluescape 创造了一种新颖的方法，使得几乎任何网站或启用网络的工具都可以获得额外的功能，以便在查看、评论和编辑媒体内容时获得实时共同体验。当用户或团队开启共同会话时，被使用的的网站会加载到云中，同时将相同的副本和所有新增的更改广播到所有连接的客户端，为它们提供相同的质量、相同的延迟和大致相同体验，就像他们在本地设备上或在同一屏幕后面浏览内容一样。

2.实现方法

在服务器端，我们使用 Chromium 作为无头浏览器（没有图形界面的浏览器），这要归功于它的开源特性和成熟的 Chrome DevTools 协议 (CDP) 的可用性。需要考虑的另一点是 Chrome 赢得了全球 65% 的浏览器市场份额。我们选择了老式的 WebSockets 作为一种低延迟的通信协议，可以保证消息的有序传递。在捕获实时的网页与其副本并将其交付给远程客户端会遇到一些挑战。

W3C DOM4 引入了 MutationObserver 来应对突发事件。MutationObserver 是一种捕捉 DOM（DOM，文档对象模型是HTML和XML文档的编程接口） 更改的工具，但它没有提供足够的信息来了解确切的更改是什么，以及更新的 DOM 以广播到连接的客户端。我们在其中嵌入了 JavaScript 代码，这些代码将浏览器 DOM 转换为虚拟 DOM，并计算虚拟 DOM 的旧版本和新版本之间的差异。为了控制计算成本，我们使用了更适合的数据结构和来自 MutationObserver 的关于每个受影响区域的提示。虚拟 DOM 的不变性允许我们通过三等号 JavaScript 运算符利用浅比较，因此如果客户端不会受到影响，则可以跳过对整个子树的分析。

它适用于几乎所有的 DOM 元素，但也有一些特殊情况。MutationObserver 不会感知canvas元素的变化，并且从canvas上下文中提取信息会带来其自身的挑战。我们使用混合方法，对于动态较少的canvas，如图表，我们将内容提取为数据 URL，该 URL 成为虚拟 DOM 中的特殊属性，因此可以使用与常规元素相同的同步逻辑。对于具有高度动态内容的canvas，特别是针对 WebGL 的canvas，我们有一个基于 captureStream API 和 WebRTC 视频流的实验方法。

附带的 MutationObserver 文档不会感知 Shadow DOM 中的变化，因此应该单独观察每个这样的 shadowRoot，这为监控子系统增加了额外的工作，但它是可以解决的。然而在封闭模式下创建的 Shadow DOM 树对于 JavaScript 来说是不可见的。在这种情况下，对 Element 的 attachShadow 方法进行补丁以保持它们打开，这可能与某些网站逻辑相矛盾，但这是可行的。

如果要向所有连接的客户端提供网页内容，必须对其进行某些修改。首先剥离所有 JavaScript 代码，有效地使网页被动且可嵌入，甚至可以绕过 iframe 嵌入实现。所有 JavaScript 逻辑都在无头浏览器的云中执行。修补指向外部资产的链接，因此它们也都可以从云中获得而不是直接访问。事件处理程序可以拦截页面中的客户端交互并将它们重新路由到网站的云中。当网站的单个云可以被多个分布式客户端有效控制和查看时，这种拦截使得能够引入真正的协同浏览体验。

3.更多挑战

事件处理程序区分由用户操作生成的“可信”事件和由脚本生成或修改或通过 dispatchEvent API 调度的合成事件。某些网站有效地使用了此功能，以确保用户输入的真实性。到目前为止，我们发现的解决方法是通过 Chrome DevTools 协议调度此类事件。在这种情况，将合成事件转变为可信事件。

当涉及到格式错误的内容时，修补外部资产变得很棘手。例如，浏览器可能会忽略 CSS 文件中的一组错误并仍然显示有效部分，而 node.js 生态系统中的大多数 CSS 解析库将无法处理它。我们目前使用的解决方案是尽可能地模仿浏览器的行为，有效地采用这样的逻辑，比如从浏览器的代码库中解析 CSS 代码，这要归功于它的开源特性。

我们还发现页面同步逻辑对浏览器扩展插件很敏感。一些 DOM 更改是位置性的，如果扩展以意想不到的方式更改了浏览器 DOM，同步协议可能会混淆。作为该问题的部分缓解措施，我们为关键 DOM 元素引入了唯一标识符。JavaScript 也不公开对象指针和任何类型的对象标识，因此我们使用树，利用 Map 容器的区分属性，其中键可以是任何值，包括 DOM 元素。保留这样的映射允许我们为 DOM 元素引入唯一标识符和对象指针，并保持原始 DOM 完整而不会干扰网站逻辑。

4.总结

实现协同浏览器时，我们面临许多挑战，我（Oleg Sidorkin）只描述了其中的四分之一。很大一部分与相应 Web 技术中的限制或设计决策有关。我们正在尝试实现完全远程的浏览体验。对于大多数此类问题，他们设法找到解决方法或利用 Web 堆栈的动态特性引入某些 hack。因此当它正常工作时，它会完美实现各种功能。但是如果没有正常工作，找到解决方案就很棘手。总之，该方案是可行的。

附上演讲视频：http://mpvideo.qpic.cn/0bc3ayabeaaacianw4dplbrfabwdcidaaeqa.f10002.mp4?dis_k=cb2b694c35a988613a6f8490e51d9cd4&dis_t=1653388118&vid=wxv_2380701541780783107&format_id=10002&support_redirect=0&mmversion=false

在Web上查看OpenEXR文件

本演讲关于在网络上查看 OpenEXR 文件以便更好地进行机器学习。主讲者为来自DisneyResearch的首席软件工程师 Max Grosse。Max Grosse将向大家展示他们使用的机器学习管线，以及处理影片制作资产如何在这方面带来挑战，以及他们如何使用现代网络技术解决这些问题。

由于我们是华特迪士尼公司工作室部门的一部分，我们自然会处理影视制作资产。在图像方面，这通常意味着我们要处理高分辨率（至少 1080p，最高 4k 甚至更高）的图像。同时图像通常具有高动态范围，以 OpenEXR 文件格式存储为 16 位或 32 位浮点数。对于许多应用程序，除了最终合成的颜色之外，我们还需要检查图像的其他数据，这些可以是来自渲染的特征缓冲区，例如深度、法向量或 alpha 掩码，并作为单独的输入提供，因此您可以快速确定每个最终颜色像素的深度或法向量。为了检查输入到深度神经网络的训练数据，查看验证集上的错误图，并且通常能够判断这些结果的视觉质量，或者让艺术家能够正确判断这些，我们不但需要 jpeg 图像的剪切缩略图，我们还迫切需求更高效的工具，例如Tensorboard。一个例子是我的同事于 2017 年在 ACM SIGGRAPH 上发表的用于去噪蒙特卡洛渲染的Kernel-Predicting卷积网络。该工作引入了一种深度学习方法，用于对 Monte-Carlo 渲染图像进行去噪，从而产生适合生产的高质量结果。

图像质量

这是 JERI 的工作开始的时候，JavaScript 范围增广图像查看器。我们的想法是我们可以拥有一个远程或本地 HTTP 服务器，它不仅可以直接提供我们感兴趣的 OpenEXR 图像，还可以提供基于 HTML5 的查看器，以便可以在现代浏览器中直接检查这些 OpenEXR 图像。特别是，这允许方便地查看存储在我们的计算集群上的结果图像，而无需在本地显式复制或挂载它。这也保证了客户端接收原始图像无需任何额外的压缩，将显示的非常精确的像素值。它的工作方式想是一个可配置的 <;img>;的标签，同时带有许多附加功能，可以深入挖掘扩展范围的图像。

JERI.io介绍

为此，我们使用 EMScripten 将 OpenEXR 库编译为网页端可集成的。EMScripten 工具链在质量方面仍然有些欠缺，但是一旦建成，它就可以潜在地用于各种应用程序。解码速度不是我们主要关心的问题，因此我们没有对它与原生解决方案的解码 EXR 图像的速度进行任何广泛的基准测试来对比。通常即使在本地网络上我们下载 EXR 的延迟也会很小，因此解码速度对用户来说并不是问题。

在Web上显示EXR图像

鉴于输入图像的扩展范围性质，我们需要一种方法来控制伽马和曝光等内容，也要应对某些情况例如我们想要深入了解特定黑暗或明亮区域的细节。深度学习通常由损失函数驱动网络更新，在我们的例子中，它通常是图像指标差异的组合。可视化此差异图对于帮助开发所需的模型非常重要。对于所有这些可视化方面，我们选择利用 WebGL，它提供了一种非常有效和方便的方式来改变事物的显示方式，而且无需太多代码也无需直接修改原始像素值。尤其是将所有像素操作卸载到 GPU，保持用户体验流畅并避免直接在单个 JavaScript 线程中操作大型像素数组。基本的查看器应用程序是用带有 React.js 的 TypeScript 编写的，可以选择处理 UI 并帮助将查看器集成到其他 React.js 项目中。查看器本身是通过一个 JSON 文件来配置的，该文件描述要加载哪些 EXR 图像、找到它们的远程路径、要分组的图像，以及哪些图像应该一起形成差异图。

可编辑EXR

下图展示 JERI 的效果（推荐观看视频）。该示例来自 jeri 网站，仅用作说明。在此示例中，我们可能从渲染器中获得了嘈杂的输入。可以切换到“改进”以检查简单降噪器的结果。我们可以放大和平移，甚至在像素级别上进行真正的比较。最终，我们感兴趣的是我们如何与参考进行比较，我们也可以简单地切换到它。（视频演示）例如，正如您所看到的，冰块中丢失了相当多的细节，更好的是展现方式是计算错误图。在这里我们还可以调整曝光，这样我们就可以更好地可视化我们无法在那个细节中看到的部分。当然，彩色图像的曝光调整工作也一样。如果我们想查看它在不同输入上的表现，我们可以对一组不同的图像重复此操作。

JERI DEMO

我们已将其集成到集群上运行的机器学习监控系统中。在这里，您可以看到一个更典型的用例，您可以在左侧看到记录的训练运行情况，并在主平面中显示许多不同的图像和指标集，从而可以快速深入并监控您的进度和结果。例如，我们可以在训练期间查看不同的验证图像、不同的通道集和不同的时间点。我们还可以随时启动 Tensorboard 来查看其他记录的指标或编写结果报告，因此像 JERI 这样的基于 Web 的解决方案非常适合。我们已将 JERI 发布为开源软件，您可以自己尝试并将其集成到您自己的解决方案中，详情请参阅 jeri.io。

附上演讲视频：http://mpvideo.qpic.cn/0bc3v4abgaaavaanuhtphjrfbl6dcoxqaeya.f10002.mp4?dis_k=613e428183e7863474e20043b30ee9a1&dis_t=1653388118&vid=wxv_2380701325891567619&format_id=10002&support_redirect=0&mmversion=false

1. W3C: 开发专业媒体制作应用 (1)
2. W3C: 开发专业媒体制作应用 (2)
3. W3C: 开发专业媒体制作应用 (3)