TSINGSEE青犀视频开发WebRTC如何在Vue.js 配合video标签实现多分屏功能？

TSINGSEE青犀视频研发的视频平台都支持分屏播放，当我们需要通过新的框架来搭建一套新的产品的时候，就要考虑到如何通过新的方式来构建这样一套多屏分割的界面。

我们上次在《我之前做过的所有产品都值得用RTC重做一次》曾经讲过，我们对于RTC的研发正在紧密的进行当中，将会在未来推出RTC类的技术产品。

在开发WebRTC实现多屏分割过程中，会遇到用到数组格式使用循环来处理，但是该方法会需要很多的代码量，代码繁杂冗长，不易于编译和检查，怎么才能用少的代码量实现上图功能是我们目前要考虑的问题。

我们在开发中用的是element-ui框架；因此首先想到的是通过element-ui框架中的el-row与el-col这二个标签来实现多屏分割。（补充：使用单一分栏创建基础的格栅布局，实现浏览器内容分割作用）在使用这二个标签中，又联想到了使用简单的数组，如下图：

如数组格式；

  

   

    

     

    
    

     

      [{ 
     
    
   

    

     

    
    

     

      children: [{},{}, ....]
     
    
   

    

     

    
    

     

      }, {
     
    
   

    

     

    
    

     

      children: [{},{}, ....]
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      },....]
     
    
  

第一个数组表示：需要使用vue框架进行循环，来显示第二个数组的内容。
第二个数组children表示：里面的video内容。

但实际该数组很繁琐，并且在上图中的数字按钮中，每次点击都会重新创建对象，极大影响了代码执行效率。

在多次尝试和思考后，我们想到了一种较为简单的实现方式，依然使用element-ui库的el-row与el-col标签，但在编译的时候我们把数组代码做如下修改：

最终实现效果就是只有以上三行代码量来实现多屏分割。

代码参数介绍：
value: 点击按钮分屏的值：如：1，2，4，9，16 。先获取根号值
rows: 对应的是el-row这个标签的循环值。取整
cols: 对应的是el-col这个标签的循环值。四舍五入算法

最终效果如下图：

在研发WebRTC框架的过程中，我们发现该框架真的是一个宝藏，很值得我们深入探究，如果还想了解更多，欢迎联系我们。