在网页上用websocket播放RTSP实时流 性能优化 进阶方案

Posted 2023-03-23

参考技术A 最近发现有的网站上，显示的视频流很丝滑，而且在多路情况下不会出现页面卡死。 总结了一下所使用的技术。

后端推消息，把数据转为json字符串，通过websocket推给前端, 图片使用base64编码


"channel": "camera_1",
"url": "data:image/png;base64,iV"


前端接收到数据后，解码，使用img 标签展示 图片base64

客户端的传输方式改为 ArrayBuffer方式。将channel、图片文件流等信息拼接为二进制数据。 通过websocket推送给前端
举例：
channel频道: camera_1 占两个字节；
图片: file文件流 占128字节
字节顺序 Little-endian

前端读取为ArrayBuffer, 通过视图操作，取出图片的二进制流，生成Blob对象
读取blob对象， 返回 URL格式的字符串（base64编码）以表示所读取文件的内容
前端img 标签 src 赋值为 base64 字符串，显示视频流图片。

JavaCV音视频开发宝典：使用JavaCV和springBoot实现websocket-flv直播服务,无需流媒体服务,浏览器网页flv.js播放器直接播放rtsp,rtmp等实时视频

《JavaCV音视频开发宝典》专栏目录导航
《JavaCV音视频开发宝典》专栏介绍和目录

​

硬核注意：本文默认读者已经熟练掌握springboot和websocket的前置知识，并已基本掌握JavaCV音视频原理。

前言

前面我们已经讲了webm直播，http-flv直播，本章就直接开始动手实现websocket-flv直播。
关于flv格式的起源与发展等等基本知识在上一章：
《JavaCV音视频开发宝典：使用JavaCV和springBoot实现http-flv直播服务,无需流媒体服务,浏览器网页flv.js转封装方式播放rtsp,rtmp和桌面投屏实时画面》中基本上都讲过了，不再赘述，有兴趣的可以去看看。

websocket-flv是为了解决http-flv的一些弊端而出现的流媒体传输技术。
websocket-flv是要解决什么问题呢？
这就不得不提到浏览器的ht