一、业务需求和调研

1. 现有的平台系统播放实时视频。

因为用户电脑都是Linux系统，无法直接使用海康前端SDK，讨论决定由后台推视频流，简单调研后发现最流行的是flv，而且有B站开源的flv.js适配。前期后台推给我RTMP前缀的视频流，我尝试使用video.js，西瓜视频等都失败了，后来后端改为http前缀的，对接成功。这里还要讲一下flv.js的文档, 不知道是我理解有误, 还是文档没有更新, 还是让人一身冷汗的:

第二句讲: FLV实时流在所有浏览器无法工作

但是点进去livestream.md:

这里又讲: 根据IO限制, flv.js目前在各类新版浏览器支持HTTP FLV实时流

总而言之，即便是chrome已经不支持flash，但是用B站这款flv.js还是可以实现在现代浏览器播放HTTP FLV视频流的。

2. 分屏，先点击分屏，然后选择需要播放的视频设备，在该分屏播放对应的视频流。

3. 开启新的视频的同时，以及离开本页面时要关闭之前的视频流，以减轻服务器压力。这一点跟主流需求还是很不同的，因为通常都会理解为在分屏可以同时观看多个摄像头的实时画面，所以即使我已经实现了需求，但还是感觉分屏在这里是有些鸡肋的。

二、实现效果

这里展示4屏和6屏，1屏就不用展示了，下面代码中还有9屏和16屏可选，目前我这里用不到，就先注释掉了。

三、鸣谢

感谢二位大佬的解决方案，这是我实现本业务需求的基础：

ID： 抄一下你代码

全网最详细！vue中使用flv.js 播放直播监控视频流

ID： 三体人1379号

vue实现视频播放1，4，6，9，16宫格布局

四、代码实现

1. 子组件, 也就是视频播放器，您也可以根据不同的视频流资源配置不同的播放器：

2. 父组件结构：

3. 核心业务逻辑：

4. 样式, 这里有些ant D穿透样式, 可以去掉：

好文阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：