如何在浏览器中直播图像？

Posted 2023-02-16

【中文标题】如何在浏览器中直播图像？

【英文标题】：How to live stream images in browser?

【发布时间】：2020-05-05 13:18:26

【问题描述】：

我正在尝试创建一个应用程序来在电子书阅读器的浏览器中镜像我的手机屏幕。 这个想法是不断地制作屏幕截图，并从手机上运行的 http 服务器提供它们。 到目前为止，我已经成功在手机上运行了一个 http 服务器并分享了最新的截图。 现在我想自动更新浏览器中的图像 - 我应该使用哪种机制 - 网站应该每 x 毫秒拉一次图像还是我可以从服务器推送更改？图像过渡应该顺利进行。电子书的浏览器受到某种限制，例如它不支持 html5-video 和可能许多其他的东西。 我正在使用基本的 dart httpServer（因为我的应用程序处于抖动状态）并且希望保持基本。 对于测试，我有一个 png 屏幕截图，但我也想针对灰度进行优化，如果浏览器支持，我可能会尝试用画布做一些事情（这里没有经验）。

主要问题： - 有没有一种简单的方法可以将更改从服务器推送到浏览器？ -如何实现图像之间的平滑过渡（如果图像没有变化则跳过刷新）？ - 使用图像有哪些替代方法？ -canvas 能以某种方式帮助我吗？

【问题讨论】：

这是我的电子阅读器浏览器支持的 html5 标准html5test.com/s/af07c24c02743dd1.html

【参考方案1】：

我认为这里最好使用 WebRTC。浏览器提供getDisplayMedia，允许您捕获一个标签或设备的整个显示。

然后，您可以连接您的两台设备，并实时流式传输捕获的内容。另一个好处是它将是 P2P，您应该会看到亚秒级的延迟（而且您不会增加运行 HTTP 服务器的复杂性）。

您所需要的只是一个信令服务器，用于在两个对等方之间发送 Offer/Answer/ICE Candidates。这些消息只是启动呼叫的“引导”详细信息。

---

如果 getDisplayMedia 在设备上不起作用，您可以通过本机应用添加 WebRTC。 flutter-webrtc 是一种可能的解决方案。

【讨论】：

我不确定这是否可行，因为我想从用户正在使用的任何应用程序/显示器而不是我的应用程序本身制作屏幕截图

我的电子书浏览器不支持 webrtc - 查看我的结果html5test.com/s/af07c24c02743dd1.html