是否有可能将网站内容（例如图片，视频等）呈现到画布中？

Question

我希望能够将网站（例如youtube）作为纹理数据流式传输到WebGL场景中。我已经考虑了解决方案，我只是在WebGL场景上覆盖网站的iframe，但理想情况下，我希望能够使用网站的内容并将其作为纹理渲染到WebGL场景中后处理效果。

我已经看到了我们可以对网站进行快照（例如Html2Canvas）并流式传输图像数据的解决方案，但是，能够以30+ fps捕获和渲染可能会太昂贵。

有什么想法吗？

Answer 1

一种方法是使用正在定义的 MediaCapture API 这将允许您从应用程序窗口或浏览器创建MediaStream。

因此，您可以运行浏览器服务器端，流式传输其标签，在视频元素中抓取它，然后将此视频用作纹理。

但是，我不确定是否有任何无头浏览器确实实现了目前的类似功能。

Firefox和Chrome在其mediaDevices.getUserMedia API中使用{video: { mediaSource: "window" }}约束对此API有something similar，但Chrome仅允许此chrome://脚本（扩展名）

这是rough proof of concept，目前仅适用于Firefox。