用一个 flv.js 播放监控的例子，带你深撅直播流技术
2024-11-27 07:59:03
本文记录了在使用 flv.js 播放监控视频时遇到的各种问题。虽然 flv.js 的官方文档简洁，但运行播放示例很容易。然而，播放时出现的异常让人困惑。原因在于，一方面 GitHub 上的文档晦涩难懂，说明不够详细；另一方面，缺乏对流数据的充分认识以及缺乏处理流数据的经验。
音视频开发免费学习资源推荐：
直播与点播：直播与点播的区别在于实时性。点播就像在哔哩哔哩看视频，视频在服务器上存储完毕，用户通过视频链接播放。而直播则不同，它具有实时性，视频流在客户端产生，并通过流媒体服务器实时推送到其他客户端。
流数据与静态数据：流数据，如直播产生的视频，是一帧一帧的二进制数据，需要通过拼接才能形成视频。而静态数据，如文本、JSON、图片等，是一次性获取的数据。流数据的处理需要使用数组缓冲区（ArrayBuffer）和视图对象（如 Int8Array、Uint8Array、Uint8ClampedArray）。
选择 flv 的原因：在直播场景下，flv 由于其小的头部文件和简单结构，解析速度快，适合实时传输。相比之下，mp4 格式虽然兼容性好，但在直播场景下体积大，解析复杂。
flv.js 的基础实现：flv.js 支持 WebSocket 和 HTTP 两种传输方式，适用于实时传输。创建播放器实例需要配置对象，包括音频和视频的有无。播放器实例创建后，需要设置流地址，然后执行播放。
播放/暂停逻辑：直播中的播放/暂停逻辑与点播不同，核心在于拉流/断流。在直播场景下，隐藏视频的暂停/播放按钮，实现自定义的播放和暂停逻辑。
异常处理：flv.js 可能遇到各种问题，包括后端数据流问题和前端处理逻辑问题。官方文档对异常处理说明不够清晰，需要理解异常分为一级和二级，并且事件和错误是通过枚举表示的。
样式定制：直播流的播放/暂停逻辑需要与点播不同，因此需要隐藏或自定义视频操作栏。通过CSS和HTML实现自定义按钮，如全屏按钮，并可能需要自定义弹幕等其他样式。
热门标签
