GB28181设备接入实现web无插件多屏直播

最新推荐文章于 2025-03-02 14:18:17 发布

原创

最新推荐文章于 2025-03-02 14:18:17 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #c++ #node.js #python

视跃GB28181平台通过将PS流转化为HTTPFLV流，实现Web端无插件低延时播放。前端采用Vue+iview进行多屏布局，支持灵活切换2×2、3×3、4×4等多种分屏模式。

视跃GB28181平台web无插件直播的实现原理：后台是把GB28181的ps流转化成http flv，为了少做无谓的推拉，没有用rtmp推nginx（srs），自主实现ps流转化为了http flv和https flv的流，下发给浏览器端。

浏览器端开始用的rtmp+video.js，后来担心以后浏览器不支持flash，最终使用flv.js，修改了些bug，减少了延时，于是轻松实现了web的无插件低延时播放，但是监控行业，多屏是必备功能，所以在此基础上增加了多屏直播。

多屏直播主要在于前端的布局了，我们试用的vue+iview，通过通过2*2,3*3,4*4的网格化分屏采用col和row的标签实现，并通过v-if循环创建标签，4,9,16的画面只需要动态切换row和col标签的值即可。代码如下：

<Row v-for="n in row_num" :key="n" :gutter="1" :style="{'line-height': 1}">
	<Col :span="24/col_num" v-for="m in row_num" :key="m">
    <sylayer ref="refplayer" :videotype="videotype" ></sylayer>
	</Col>
</Row>

通过vue的这种变量化的Dom元素的机制，我们可以很轻松的实现可以互相切换的多屏界面。多屏切换脚本函数代码如下：

    cut (num) {
      if (this.row_num === num) {
        return
      }

      this.row_num = num
      this.col_num = num
    },
    splitContent (num) {
      let n = Math.sq