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

      视跃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.sqrt(num)
      this.cut(n)
    }

通过传入的分屏开平方得到行数和列数，然后通过变量绑定的方式循环创建播放器标签。最终 效果如下（国网某省送变电公司大华的4G的移动监控接入视跃realgbs平台的截图）

上面是3*3的，点击“四屏”按钮，切换到4分屏:

      

     

更多信息

e-mail: yujesoft@163.com

tel: 13971177602

web：www.founu.com