图片流模拟直播的性能优化问题

[V2WT]

目前正在做一个 算法展示页面。 需求是将嵌入式设备采集的图像及跑完之后算法的结果一并输出展示出来。

现在的做法是，在嵌入式设备上，通过 ZMQ 将原始图像数据 （ 720P 的灰度图）以及当前图像相关的语义信息（目标框，点之类的）通过 protobuf 序列化后 发送到 服务端（ flask ）， 服务端将 灰度图编码成（ jpg ）通过 base64 嵌入 json 发送到 前端。

前端每一帧都用 canvas 绘制到界面上。

目前前端如果是一台非常好的机器的时候 可以保持流畅， 可是换成普通的笔记本电脑 就会越来越慢，延时逐渐增加。

还有一个问题是如果多个浏览器同时登陆服务器预览的话，有一个浏览器慢的话会拖累所有的浏览器。

这个流程有什么技术层面上还能优化的吗？ 还有我这样的需求 有没有其他的实现方式？ 也考虑过将图片推流到流媒体服务器，前端进行拉流展示，但是就不好做到语义信息及视频帧的同步。

有哪位做过类似的 可以指导下吗？

[yinanc]

这…… 720P 图像编码到 base64 再传输再解码还用 canvas 一帧帧绘制，每个过程想想都是消耗极大的吧
直接用视频推流不好吗？

[V2WT]

@yinanc 直接推流 就是不好做同步，因为我每一帧都想要绘制目标框体之类的数据，想用前端 丰富的展示手法去显示 比如 Three.js 之类的。
还有想请问下 前端 base64 解码开销大吗？

[chinuno]

做 base64 开销巨大。如果一定要传图片这种方式的话可以考虑用 websocket 传数据，去掉 base64。你这个延时增加有可能是因为网络 io 跟反序列化耗时长。按照 25fps 的视频一张图片处理的时间不超过 40ms，具体测看看是哪部分耗时长再做针对性优化

[jswh]

websocket 直传二进制数据会不会好点。

[0987363]

server 端统一用 ws 推送，加超时处理

[V2WT]

@chinuno 有这个想法，所以想问下如果我用 websocket 直接传递二进制数据，如何将语义信息及图片二进制一起编码（ python ） 和解码（ javascript ）呢？

[V2WT]

@0987363 现在服务端用的是一个 python-websocket 的框架， 对所有连接上来的前端 轮训着去发送，但是不知道在哪里做超时的设置，请问下有熟悉的 websocket server 框架推荐吗？ 我试过几个 总是感觉发送慢，可是实际上网络并没有占满。

[V2WT]

顶一下，今天还没能解决这个问题。。

[V2WT]

再来看看，目前想把 base64 先剔除掉看看

[0987363]

@V2WT 这个没用过，如果你是单线程轮询，那么就改多线程试试

[V2WT]

暂时将 Base64 操作剔除了，直接将 protobuf 发送到前端，由前端去解析，效果好了非常多。

[V2WT]

问题解决了。。前端的同事 每次来一帧画面都 new 了一个 新的 canvas..
只用一个 canvas 就行了。。