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: [email protected]

tel: [phone]

web：www.founu.com