如何从一系列位图创建视频流并通过IP网络发送？

Question

我有一个裸机应用程序在带有10BASE-T以太网(CS8900)的微型16位微控制器(ST10)和基于EasyWeb项目的Tcp/IP实现上运行.

该应用程序的主要工作是控制公共交通乘客信息的LED矩阵显示.它生成大约41 fps的显示信息和可配置的显示尺寸,例如160×32像素,1位颜色深度(每个LED可以打开或关闭).

例:

有一个小的网络服务器实现,它提供相应的帧缓冲内容(相当于led矩阵显示内容)作为PNG或BMP下载(由于CPU负载和1位颜色深度未压缩).所以我可以通过以下方式接收快照:

wget http://$IP/content.png

要么

wget http://$IP/content.bmp

或者将适当的html代码放入控制器中index.html以在Web浏览器中查看.我也可以编写html/javascript代码来定期更新该图片,例如每秒,以便用户可以看到显示内容的变化.

现在进行下一步,我想将显示内容作为某种视频流提供,然后将适当的html代码添加到我的index.html或只是用例如vlc打开"流URI" .

由于我的帧缓冲位图是未压缩的,我期望一个恒定的比特率.

我不确定从这个开始的最佳方式是什么.

(1)如果我已经为每个帧准备了一个PNG,那么哪个视频格式最容易生成(但我只有几毫秒的PNG并且不能长时间缓冲它)？

请注意,我的目标系统在内存和计算能力方面都受到资源限制.

(2)通过IP分发哪种方式？

我已经打开了一些tcp套接字用于侦听端口80.我可以通过使用分块传输编码(每个帧作为一个自己的块)通过HTTP(接收后)流式传输视频.(也许HTTP Live Streaming这样做？)

我也读过像SCTP,RTP和RTSP这样的思考,但在我的目标上实现这个看起来更像是一件事.由于还有潜在的防火墙缺点,我认为我更喜欢HTTP进行传输.

请注意,应用程序使用纯C编码,没有操作系统或强大的库.所有的东西都是从头开始编码的,甚至是Web服务器和PNG代.

编辑2017-09-14,试用APNG

正如Nominal Animal所说,我尝试使用APNG.

我延伸我的代码,以产生适当的fcTL和fdAT组块的每个帧,并提供bla.apng与HTTP内容类型image/apng.

下载后,bla.apng它们看起来很有用,例如在firefox或chrome中打开(但不是在 konqueror, vlc, dragon player, gwenview).

尝试流式播放该apng可以很好地工作但只能使用firefox.Chrome希望首先完全下载该文件.

所以APNG可能是一个解决方案,但缺点是它目前只适用于firefox.经过进一步测试后我发现,在APNG播放约1小时后,32位版本的Firefox(55.0.2)崩溃了,此时已传输了大约100 MiB的数据.看起来他们不会丢弃旧/过时的帧.

进一步的限制:由于APNG需要在每个动画块上具有32位"序列号"(每帧需要2个),因此最大播放持续时间可能存在限制.但是对于我24毫秒的帧速率,这个持续时间限制大约是600天,所以我可以忍受.

需要注意的是APNG MIME类型是由mozilla.org指定要image/apng.但是在我的测试中,我发现当我的HTTP服务器提供带有Content-Type的APNG时,它会得到更好的支持image/png.例如,iOS上的Chromium和Safari将在下载后播放我的APNG文件(但仍然不是流式传输).甚至维基百科服务器也提供例如具有Content-Type的这个沙滩球APNGimage/png.

编辑2017-09-17,试用动画GIF

正如Nominal Animal所建议的,我现在尝试了动画GIF.

在完全下载(例如100或1000帧)后,在某些浏览器和查看器中看起来不错.

尝试直播,在Firefox,Chrome,Opera,Rekonq和Safari(在macOS Sierra上)看起来不错.不工作的Safari(在OSX El Capitan和iOS 10.3.1上),Konqueror,vlc,dragon player,gwenview.例如Safari(在iOS 10.3.3和OSX El Capitan上测试)首先要在显示/回放之前完全下载gif.

使用GIF的缺点:由于某种原因(例如cpu使用),我不想为生成的帧图片实现数据压缩.对于例如PNG,我在IDAT块中使用未压缩数据,对于具有1位颜色深度的160x32 PNG,每帧获得大约740字节.但是当使用没有压缩的GIF时,特别是对于1位黑/白位图,它会将像素数据吹出3-4倍.

Answer 1

首先,嵌入式低级设备与非常复杂的现代Web浏览器不太友好."连接"这样的方面是非常糟糕的主意.但是如果你有这个强大要求的技术规范......

MJPEG以流媒体视频而闻名,但在你的情况下它非常糟糕,因为需要大量的CPU资源并产生糟糕的压缩比和高图形质量的影响.这是jpeg压缩的本质 - 它最适合照片(具有许多渐变的图像),但对于像素艺术(具有锐利线条的图像)则不好.

看起来他们不会丢弃旧/过时的帧.

这是正确的行为,因为这不是视频,而是动画格式,可以重复!与GIF格式完全相同.使用MJPEG的情况可能更好,因为这被建立为视频流.

如果我正在做这个项目,我会做这样的事情:

1. 没有浏览器.使用winapi或一些低级库编写非常简单的本机播放器来创建窗口,接收UDP数据包并显示二进制数据.在控制器部分,您必须填写udp数据包并将其发送到客户端.UDP协议对于实时流更好,它在延迟的情况下丢弃数据包(帧),维护非常简单.

2. 使用TCP流,但原始数据(每像素1位).TCP总是会产生一些延迟和缓存,你无法避免它.与以前相同,但您不需要握手机制来启动视频流.此外,您可以使用Flash和Applet等旧技术编写应用程序,读取原始套接字并将应用程序放在网页中.

3. 您可以尝试通过TCP(HTTP)使用原始数据流式传输AVI文件.没有索引,它几乎无处可播放,除了VLC.奇怪的解决方案,但如果你不能编写客户端代码和魔杖VLC - 它将工作.

4. 您可以在中间服务器上编写代码转换器.例如,您的控制器将UDP数据包发送到此服务器,服务器将其转发为h264并通过RTMP流式传输到youtube ...您的客户端可以使用浏览器,VLC,流将以高质量达到几兆位/秒.但是你需要一些服务器.

5. 最后,我认为这是最好的解决方案:只向客户端发送文本,坐标,动画等,一切都会呈现给您的控制器.使用Emscripten,您可以将源转换为JS并在浏览器中编写完全相同的渲染器.作为传输,您可以使用websockets或一些带有多个<script>元素的长HTML页面的技巧 ,就像我们在旧时代那样.

请告诉我哪个国家/城市有这个公共交通乘客信息显示？它看起来很酷.在我的城市,每辆公共汽车都有LED面板,但它只是显示静态文本,可怕的是没有使用设备的巨大潜力.