将 Canvas 流发送到 UDP 多播地址答案

【问题标题】：Send Canvas stream to UDP Multicast address将 Canvas 流发送到 UDP 多播地址
【发布时间】：2017-10-19 14:08:06
【问题描述】：

我目前有一个用户可以在其中绘制的画布。我正在做的是这样的：

var canvas = $('#can')[0];
var ctx = canvas.getContext('2d');
var stream = canvas.captureStream(60);

var video = $('#video')[0];
video.srcObject = stream;

所以我得到了画布，并使用captureStream 方法获取画布内容的实时流，然后将其放入html video 标记为srcObject。

我现在想要实现的是，将直播流（保存在变量 stream 中）发送到 udp 多播地址，因此我可以使用 MPV 或其他视频播放器接收它。

那么您有什么方法可以告诉我如何开始使用它吗？或者有什么简单的方法可以做到这一点？

【问题讨论】：

您从canvasElement.captureStream() 获得的MediaStream 与您从gUM 获得的MediaStream 完全相同（还有更多方法）。然后，您通常使用 WebRTC 与其他端点共享>此流。但是 WebRTC 不适合多部分/广播，所以你的 broad 问题变成了这个问题：stackoverflow.com/questions/18318983/… 建议使用网关服务器端，它将实现广播。

标签： javascript html canvas udp video-streaming

【解决方案1】：

即使它在技术上不通过 UDP，因为您补充说它可以是另一种网络播放器，只要您可以读取流，您应该看看使用 WebRTC 可以做什么。

这就是 webtorrent 在浏览器中用于其传输协议的内容，您也许可以利用它并将其用作播放器。

在this page 上展示了如何实现它的一个很好的例子，通过使用captureStream 并将其发送到另一个视频元素。不过，它需要在 Chrome 设置中启用一些实验性标志，但不知道在您的用例中它是否可能是无操作的。

如果您查看有关 UDP 广播的 this answer，建议您使用 SRTP，如果您确实希望这样做的话。 @Kaiido 引用的那个也是开始研究这个主题的好资源。

您也可以查看nile.js。

【讨论】：